SIS Blog: Software

Responsive web design: making your existing web site mobile-friendly

Responsive web design is something everyone is starting to do.  The prevalence of modern browsers that support CSS 3 media queries allows web designers to style a site such that sizes, positions, and spacing change based on the size of the browser.  In this way, the same site can be viewed on your iPhone, your Android tablet, and your desktop computer, and it will look good on all three.  On a mobile device, you can have legible text sizes, no horizontal scrollbars, and form controls that are large enough for you to select with your finger.  On a desktop computer, you can make use of the larger real estate.

You don’t have to have a mobile device to experience responsive design:  just resize your desktop browser and watch how a responsive web site adjusts its layout to suit your browser size.  Responsive and adaptive design are very exciting to me, because it doesn’t seem like that long ago when I would visit a site and see links to open an 800×600 version or a 1024×768 version.  Now, we are seeing web sites that display nicely regardless of the user’s screen size, and the user isn’t required to do anything extra.  In fact, if the user doesn’t view the site on a different device or change her browser size, she’ll never know the site could look any different.  That’s a big goal with responsive and adaptive layouts:  the layout should look “right” regardless of the resolution or aspect ratio used to view it.

Having a responsive web site doesn’t mean you have to create a new layout from scratch.  Most sites can keep their existing design and simply add some additional CSS to change their existing styles at different browser sizes.  We recently made this web site, ThinkSIS.com, responsive without having to change the page structure or rethink anything.  It is easier to make an existing design responsive if it already has good HTML and CSS markup, because it will be easier to target specific elements in the page for styling.

The best way I’ve found for making an existing design responsive is to work with a browser like Chrome, simply shrinking it and seeing what parts of your page suddenly look weird at smaller sizes.  You’ll find that horizontal scrollbars appear, large text wraps, columns are too wide, and content generally just doesn’t fit.  The Chrome extension Window Resizer is helpful because it will display a popup saying how big your window is as you resize your browser.  You can then use this size to create a media query that targets browsers that size or smaller.

While not all desktop browsers support the CSS 3 media queries required to have a responsive design, all of the most popular browsers have support in their latest versions.  Many of the popular browsers have supported media queries for a while, and with JavaScript frameworks like respond.js, your responsive design can reach an even wider audience.  Mobile browsers on iOS, Android, and Windows Phone 7 support media queries, so your responsive CSS will work.  Refer to When Can I Use CSS 3 Media Queries for more detailed support information.

With a responsive layout, you can possibly skip having a separate mobile site.  If you use technologies like Flash that are not well supported on mobile devices, you may still need to design a separate site for your mobile audience.  For many sites, however, basic HTML, CSS, and JavaScript are used, which are well supported across mobile devices.  In this case, you can save a lot of time and resources by not designing an entirely separate site just for mobile viewers.  Use your existing site, just optimize it using CSS and JavaScript to provide a consistently good experience to users, regardless of their viewing platform.  What kind of experience have you had with mobilizing an existing site using responsive design?

More information: