Join Ray Villalobos for an in-depth discussion in this video Understanding design approaches, part of Creating an Adaptive Web Site for Multiple Screens.
Just a few years ago, working on the web meant dealing with one or two browsers on desktop devices. The rise of new browsers and devices has forced designers to deal with problems between different platforms. Designers wanting to use features like HTML5 and CSS3 have developed strategies to help them deal with these problems. The main approaches in use today are progressive enhancement, graceful degradation, responsive design, and adaptive design. Progressive enhancement means that you design a web site for the browsers with the lowest support for modern features say Windows Internet Explorer 7.
Once the design has been finalized for that site, you add features that enhance the experience for users with more modern browsers, making sure that the lowest common denominator still offers a decent user experience. You can use a web site like quirksmode. org to find out how different browsers support different features. So you can see this web site lists different features like CSS2 and CSS3 under Compatibility, and you could see up here the different browser types, and versions, and down here the different features.
You can dig down into each one of these different types of features to see how the browser supports, for example, different types of selectors. You can see that IE 5.5 does not support the greater than selector here, but any of these other browsers do. Graceful Degradation means that you begin by designing a web site for the best experience possible, and then work to make sure that older browsers and platforms you wish to support still provide an acceptable experience for users. Responsive Design deals specifically with designing for multiple screen resolutions, adjusting to design for different platforms.
It relies on using media queries to target specific screen sizes and orientations and using fluid grids to adapt the design of a web site. So this site, for example, will adjust to the width of the browser and will look differently on different devices. When we look at this site full-screen, we can see that we have this extra section right here on the side. When we shorten it to about an Apple tablet size, you see that it gets rid of this additional column, and lets you see the web site's content.
If we go down even shorter, you can get to an iPhone or a mobile device layout. It still shows you the content of the site just in a different way. One of the problems with Responsive Design is that reorganize content might not be the best way to present the information on your site. A site on a small device might be better served by rethinking the design, not reorganizing the layout. Adaptive Design means thinking about different ways to present information to different platforms and then optimizing the experience for each device.
There's no right or wrong approach, but generally, which approach you use might depend on the importance of legacy browser support for your project. Designers working for large corporate clients might need an approach where support for specific browsers or devices is critical.
- Setting up testing servers and emulators
- Creating and formatting a site template
- Using free Google fonts
- Preparing graphics
- Creating style sheets
- Loading external pages with AJAX
- Creating mobile tabs
- Detecting mobile devices
- Testing and debugging site code