As you probably know, Responsive Web Design (RWD) delivers one website, with one code base, to a multitude of devices from laptops to tablets to mobile phones. At Flightpath, we get so many questions from clients and potential clients about responsive website design these days that we thought it would be a good idea to […]
As you probably know, Responsive Web Design (RWD) delivers one website, with one code base, to a multitude of devices from laptops to tablets to mobile phones. At Flightpath, we get so many questions from clients and potential clients about responsive website design these days that we thought it would be a good idea to briefly summarize some fundamentals and best practices.
Responsive Web Design Benefits
- Better user experience by supporting a wide range of devices, particularly mobile
- Better Google search engine ranking – With Google’s recent mobile-friendly algorithm update, websites that are responsive have a higher likelihood of ranking higher than desktop-only
- Easier and cheaper site management compared to maintaining separate desktop and mobile websites
Responsive Web Design Conventions
- RWD utilizes flexible images and media atop fluid grids that ebb and flow with a devices’ screen size
- Major “breakpoints” are established to allow a design to adapt and optimize better to certain screen widths. Typical breakpoints are as follows:
Responsive Web Design Creative and Production Considerations
- A non-responsive site cannot be simply “converted” to a responsive site.
- The code framework is entirely different
- Non-responsive website design elements will likely not work well on small screens
- To start, website content and design should be developed with smaller mobile screens in mind – where the focus is only on core content and functionality.
- While one of the hallmarks of RWD is to provide the same content to all devices, it is not only permissible but recommended to optimize some site attributes for different device sizes. (Example: Use show/hide button to limit the amount of content that shows at one time on small mobile screen.)
Responsive Web Design and Google Rankings
Google has updated its algorithm to prioritize search results per a variety of criteria associated with mobile usability and responsive design. These include:
- Font sizes
- Touch/tap element size & relative proximity
- Pop-up/interstitial usage
- Viewport configuration
- Flash usage
These factors should be borne in mind to ensure optimal search engine visibility for your responsive site. You can learn more about this via this blog from Google.