The challenges of developing a website in today's changing world of browsing devices can be difficult. The rise in mobile computing and browsing means that your website, at the very least, should be usable on most, if not all interfaces. But, how should you accomplish this goal?
The short answer to this question is that it depends. For a site that already has a good user interface, you may want to consider implementing a completely separate mobile view of the site. If your site is ready for a redesign, you may want to consider developing the site so that it operates responsively.
What is Responsive Web Design?
Simply put, responsive web design is a website that adapts to the view port of the browser you are using. Do you run your browser maximized? Do you run your browser as one of many visible windows on your desktop? Have you used the snap feature in Windows to share your browser screen with another program? What about your tablet or your phone?
Responsive web design takes your website and displays it on each device and browser width with a similar look and feel. You can see how this works by taking the browser window you are looking at right now and reducing its width.
There are a couple of things to note:
- Note the images. They are a certain size, but as the browser view port shrinks, so do the images.
- Note the text. As the browser view port changes, the text size remains at a readable size, even when viewing on a tablet or mobile device.
- Note the menu. Instead of occupying valuable space, the menu converts from a standard menu in to a drop-down allowing you to view the entire menu and select the menu item you want to view.
If everyone should use it, why does Responsive Programming cost more?
Responsive design and implementation (programming) takes more time and additional planning, starting at the design phase of the project. This carries through in the development and testing. A fixed width site design needs to be tested (depending on the browsers that are validated by your web company) in 3 to 5 browsers. A responsive design needs to be tested in 7 or more, plus the browser widths that are specified in the CSS media queries! Think about it, when testing responsively these are the browsers that need to be tested:
- Internet Explorer (backwards compatibility with IE 7, 8 and 9) 4 browsers
- Google Chrome
- Mac Retina Display (Chrome, Firefox and Safari) 3 browsers
- iPhone 4 (non retina display), iPhone 4/iPhone 5 (retina display) 3 browsers
- iPad (older generation), and iPad 3 (retina display) 2 browsers
- Android phones
- Android tablets
Once the base browser set has been tested, now you need to test at browser widths, which is determined by the way the site is coded. Cascading Style Sheets will dictate the browser widths that need to be tested. Generally, the media queries will align with certain specific sizes, but these are the sizes for a sampling of devices:
- 320px wide - iPhone portrait
- 480px wide - iPhone landscape
- 640px wide - iPhone 4S/5 portrait
- 768px wide - iPad portrait/Microsoft Surface Portrait
- 800px wide - Samsung Galaxy Note portrait
- 960px wide - iPhone 4S landscape
- 1024px wide - iPad landscape
- 1136px wide - iPhone 5 landscape
- 1280px wide - Samsung Galaxy Note landscape
- 1366px wide - Microsoft Surface landscape
- 1536px wide - iPad 3 portrait
- 1560px wide - Google Nexus portrait
- 2048px wide - iPad 3 landscape
- 2560px wide - Google Nexus landscape
Not every size needs to be programmed for and there are several that will overlap. But CSS has to be developed and tested for, at a minimum:
Some Simple Tips and Tricks
Set your viewport
Mobile browsers will take a website and scale it down to fit the window the site is operating in. By setting the viewport, this provides instructions to the mobile browser in how to display the site. With the advent of higher pixel densities, you may need to include a target density setting in the meta tag. Be careful though! A pixel is not a pixel! Android, Windows phone, and Apple iOSS all interpret the width of a pixel differently, so setting your target-density dpi attribute may be important as well! Mobile Safari does not interpret this code, so it is best to follow an Apple device standard and adjust your pixel density after that to get the right display.
REMEMBER older browsers!
This is only one example of the various "shivs" that are available to make older browsers support HTML 5 and CSS3 and permits older browsers to be more responsive in their displays.
Other items that will help to make your site more responsive include:
- Responsive Images This plugin, while not making images fully responsive, will reduce the bandwidth for the images and will load a small, medium or larger version of the image automatically.
- FitVidJS This plugin works with the many different implementations of video display and will help to make your video displays more responsive.
- When looking for an image carousel or slideshow, there are a lot of them out there. Just make sure it is responsive to meet your needs!
- jQuery Mobile jQuery Mobile is a framework that uses HTML 5, and jQuery UI. This framework includes a number of mobile-specific events that create a better user experience across the many mobile devices in use today.
When your site is being designed, start with Mobile. The mobile design should supply a primary focus on the content. While design can work from either direction, when you are staring at a blank page, sharpening your focus to what is most important on any given page will often help propel your design forward.
Keep it simple!
Responsive design is still in its infancy. It can be easy to get carried away. While you may want that cool gizmo, sometimes it is just more practical and safer when considering older browsers to use more classic flexible layouts combined with media queries as needed.
Think of your site in terms of percentages rather than pixels! If you want to utilize 90% of the browser width in a 2 column layout, then bear that in mind! To accomplish that you would have:
- Container set to 90% of the browser window
- Remember within this container, you are dealing with 100% of the space!
- Main Column: 60%
- Right Column: 30%
- Gutter between the main column and the right column: 5%
- Note: We have not taken up the full 100% of the container. This is because some browsers will interpret borders, padding and margins differently than others. Leaving a little bit of extra room means that these browsers will not break the layout.
Responsive web design is one of many ways to supply your mobile user an enhanced experience. The most important thing is not that you are on the cutting edge, but that you are supplying a good experience for the visitors to your site. Whether working in a responsive mode or working with a dedicated mobile site design, your users will appreciate the efforts put in to making your site easily viewable on any device they are looking at.