Here is what it means to say that website is responsive, or has a responsive design.
A truly responsive layout is not a redirect to a mobile version of the site, it is the same page responding (through CSS) to a screen of any size. This is accomplished by using relative measurements like percentages and also by setting up different rules for ranges of screen sizes.
Layout Responds to New Maximum Width
The cornerstone of the responsive website design is the ability to shrink or expand for any size of monitor. From the original iPhone size at 320 pixels wide to the largest desktop monitors, a responsive design will look different but acceptable on all of them. No elements will extend outside of the browser, and zooming will not be required on mobile devices. If the screen size changes during browsing – such as a user rotating their phone or tablet – the design must adjust again.
Font Size Responds for Readability on Small Screens
A beautiful design for desktop could become borderline illegible when browsing on a handheld iOS or Android device. Lovely swashy script headings turn into angry squiggles, and small text such as photo captions can become hard to read. Some fonts will look worse when using the type rendering of different operating systems. For this reason a responsive web design will need to go just a bit farther and ensure that everything stays readable on the large and small.
Images and Data Structures May Be Replaced At Small Sizes
For large images including text (could be a slider or a custom design element) and table formatted data, these structures can break on a small screen. There may simply be not enough room for every column in the table to be shown left to right as intended. Or the brilliant header at desktop size turns unreadable and awkward as it is squished to 480 pixels wide. These pieces of content will need to be addressed and made responsive.
Hover Events are Gone, Touch Is In
The last large difference in responsive design is the loss of hover states or events. While a mouse can hover over a link and watch it change color, a finger is either off the screen or on the screen and clicking (aka “touching” when referring to mobile). Any reactions to cursor moving or mouseover is gone – this means that your dropdown navigation menus will probably break! Therefore it is very important to either make responsive navigation choices for mobile OR to link to child subpages on each if your main pages. Otherwise mobile users will miss out entirely.
Last updated on