You have all probably seen responsive web design and not even realized it. Responsive web designs are coded in a way that scales the content to the size of the web browser. An easy way to see if a website is responsive is to grab the browser window and drag to make it larger/smaller. As you hit certain widths, styles will change based on media queries in the CSS. This is a very simple way to create mobile/tablet versions of your website without needing to create a separate mobile site. These media queries are often used to hide or rearrange content for best consumption depending on the size of the device.
Take a look at the following list for some inspiration. Look at them on your machine or mobile device and try different browser widths or switch between portrait and landscape to see differences.
Examples of Responsive Websites
CSS Tricks – http://css-tricks.com/
CSS Tricks was one of the first responsive sites I’ve seen that has more than just the standard resizing of elements. Not only does it have multiple widths outside of the standard ones for mobiles, tablets, and larger screens, but it also animates some elements (using CSS3) that will slide into place as your browser stretches. It’s a great example of responsive design and an even better resource for common solutions to coding problems.
The Boston Globe – http://bostonglobe.com/
This high-profile newspaper was the first big player to make the jump to responsive. I love how when using a tablet/mobile device, the main navigation is condensed into an item called “Sections”. When clicking, or hovering, it drops down to show the remaining main navigation categories. Also notice the integrated weather that jumps around as your browser scales and the different use of fonts based on the current size.
Boagworld – http://boagworld.com/
I can’t say enough good things about Boagworld, as a resource, and now as a responsive design. If you build or run websites, go there immediately and subscribe to all his feeds and audioboo’s. Similar to the Boston Globe, his navigation is also condensed for mobile sizes, while still making it simple to search or subscribe (probably the 2 biggest goals of the site). Larger images become hidden and content moves around slightly (very little is hidden) so the site is just as informative on a mobile device as it is on a workstation.
Think Vitamin – http://thinkvitamin.com/
Think Vitamin is a blog for web professionals with all kinds of great resources from articles to a podcast. The site has a very unique navigation consisting of words and icons that hides and shrinks nicely as you get to smaller browsers. Secondary content (topics, social icons, search, etc) is all hidden from the mobile views as well to make room for what is most important, CONTENT!
8 Faces – http://8faces.com/
8Faces is a beautifully crafted typography magazine with a responsive web design to match. While not as fluid as the others, it does a great job of keep relevant content obvious based on the browsing device. Check out the fluid slider images when you get down into the smaller mobile sized browser widths.
Try it yourself!
Go ahead and resize your browser or turn your mobile device to a different orientation while browsing this site! Notice how the sidebar is suppressed to below the main content on smaller resolutions and how images stretch to fit the full width of the browser in the mobile sizes. These are all very simple things to implement in your own responsive designs. With a bit of planning and time you can easily create a simple responsive design using media queries. Happy coding!