Responsive Web Design Examples–How to Squish Things the Right Way

Dog being sucked into car's seat.

While some things just aren’t mean to be squished, websites can be–at least when done properly. Responsive design allows a site to transition seamlessly from a large desktop screen, to a 10″ tablet, to a 4″ phone screen, without losing design authenticity or functionality in the process–and without requiring a dedicated mobile web site. Today we’ll take a look at some responsive web design examples right here on the Sourcebits site that demonstrate the right way to make a site fit properly into multiple screen sizes across multiple devices and platforms.

While this post should read flawlessly on a phone or tablet, you’ll get more out of it if you can view it from a desktop or laptop so you can follow along with the responsive web design examples as we walk through them.

Start by making sure your browser window is maximized. Once it is, if you’re viewing this from a large enough screen, you should see a full navigation menu on your left, with the Sourcebits name and logo at the top, and the names of the different areas of this site below, starting with Services.

In the upper right, you should see a “Responsive and Retina Ready” bar, along with four social media icons below it vertically. If you’re not seeing all of that, you’re either on too small a screen, or you haven’t maximized your browser window.

If you’re still with me this is when things get interesting. Grab the right edge of your browser window with your cursor, and drag it slowly towards the left of your screen to make the window more narrow. As you do this, you’ll eventually get to a point where the navigation on the left and the social media icons will change.

You should now see the four social media icons horizontally over the upper right of the headline for this article. On the left, you’ll notice that the menu nav has shrunk down to a hidden nav bar. Clicking on the berries will take you back to the home page, the menu icon will reveal the full menu nav, and the envelope takes you to our contact page.

What’s just as important about this page is what didn’t change. Notice that the blog content, which is presumably the main reason you’re on this page, stayed the same size even on a smaller screen. One of the key principles of the best responsive websites is that they preserve the format of core content as much as possible given the size of the viewer’s screen.

Now let’s see what happens when things get smaller. Grab the right edge of your browser window again and slowly bring it towards the left. If you go slowly enough, the next step you should see is pretty much the same page layout, but you’ll see the background photo disappear.

We use large, hi-res background photos on the site, and delivering these via a mobile connection can make the site run slowly. When we get to a size that we assume is mobile, we remove the background images to improve performance.

If you keep pulling the browser edge over to the left and shrink the screen more, you’ll now see the core content start to automatically adapt to the precise screen width. As the screen gets smaller, the responsive design allows the content to adapt seamlessly, from wrapping text around the image to adjusting the layout of the headline type.

If you keep narrowing the window at this point, you’ll see one final change. The left nav will disappear and move up to the top of the screen, and the content will stop wrapping around the image and will drop below it. This is the phone view, and it’s what you’d see if you loaded the site directly from a smartphone.

I hope you’ve enjoyed these live responsive web design examples. If you’re interested in learning more, expand your page out again, and follow us on Twitter, Facebook, LinkedIn or Google+ via the links above. We’ll be releasing a webinar and white paper on best practices for responsive web design shortly and we’ll let you know when they become available.

_______________________________________________________________________________________
Mark Chatow is Executive Director, Global Marketing at Sourcebits.
Follow Mark on Twitter: @markchatow