Overview
Responsive Web Design is a concept, that when implemented correctly, improves the user's overall experience. In short, it allows a website to respond to the user’s unique needs based on the restrictions of their viewing device.
Responsive Web Design was born out of necessity when the web development community realized current methods were insufficient and the means existed for better accommodating the varying needs of visitors. These needs are inconsistent window widths, screen resolutions, and user preferences being utilized by the ever-growing number of devices and gadgets people are using to interact with the web. Additionally, with
mobile internet usage projected to outpace that of desktop by 2015, it only makes sense to start thinking ahead about how these devices can be best supported.
From a technical standpoint, Responsive Web Design is accomplished with mix of flexible grids and layouts, images and video, and use of CSS media queries.
Value
- Reduction in overall maintenance effort as there is a single instance of content to edit
- More "future proof" than static width website and would likely require less work to accommodate new screen resolutions as additional devices are added to the marketplace in the form of smart phones, tablets, gaming consoles, and TVs
- Single codebase to manage for all devices instead of separate solutions that target each device like native apps
- Consistent delivery of user experience across all platforms, if functionality isn’t removed
- SEO benefits
- Single URL for content delivery unlike some multi-site configurations
- No redirection to other sites which reduces page load time
Challenges
- Media query support for legacy browsers
- Navigation restraints
- Menus with many links must be downsized to fit within environment
- Must work in touch environment
- Convert links to inputs for native support and pickers
- Image performance - Mobile devices often don’t need to download the full width resource that desktops do
- Responsive image solutions:
- Video display
- Responsive text
Implementation Consideration
- Responsive framework (Often labeled front-end frameworks) vs. Custom
- Complexity of project and its requirements dictates methods
- Responsive frameworks
- Save time in that there has already been development completed to include key break-points for popular device resolutions
- Some solutions can be bloated and include code for other potentially unnecessary elements like UI controls and unique layouts
- Custom
- Provides more flexibility, but increases overall development time as the developer creates each layout from scratch dictating each break-point
- Reduces code bloat
- Breakpoints
- Device or content centric
- Five CSS3 Media Query increments that support common device screen widths: 480, 600, 768, 992 and 1382px
Tips
- Planning for key break points is a must
- Coded wireframes can be helpful in illustrating responsive nature to the client and can save development time
- No specific framework required, simply a flexible grid will get the job done
- Scaffolding of content is a must
- Test throughout development phase
Testing and Resources
- Testing
- Resources
- Learning
- This Is Responsive. - http://bradfrost.github.com/this-is-responsive
- Frameworks