‘Responsive web design’ isn’t just a gimmick, a fad, or a catchphrase. As you probably know, the web is no longer just something accessed on a desktop. Smartphones, tablets, TVs, laptops, desktops, the list goes on and on. The web is everywhere, so as designers we can no longer make arbitrary assumptions about how and where our users will be accessing our site.
This unknown variable is something we embraced wholeheartedly during the design of the new 352 website. As you’ll see when we launch in the coming weeks, the new design adapts to all screen sizes without sacrificing content or functionality. It shows off the best the web has to offer, and it will be an example for our clients of what today’s web can look like.
Responsive and Agile
As with any new site we develop, we make sure to treat the screen size as nothing more than pixels. Some screens have a lot of pixels,
some have less. With responsive techniques, we adapt the site’s design to fit the widest range of screen sizes we can manage and pick the tools best suited for the task at hand.
You’ve heard us talk about our transition to agile web development. For our own site, the team leveraged the resources that agile gives us. The designers iterated fast and often. Even a week from launch, we’re still making adjustments to the design. As the project’s main front-end developer, I stepped in when the design was fleshed out, but by no means final.
Agile allows for front-end devs like myself to work alongside the designers, rather than after the fact. As I coded parts of the
site’s structure, I was able to go back to the design team with potential issues and bugs while they were still fleshing out the rest of the site. The open dialogue allows the team to quickly adapt to changing needs, giving us a true iterative process in both design and code.
From Design to Code
As soon as the design team had established a direction for the design on desktop and mobile, I took the design to code. Here, we use a variety of techniques to adapt the design for various screen sizes, like the use of percentage widths. In many cases, we would break our content into a grid – a static solution with fixed widths. When the screen size drops, those values may not apply.
Using percentage widths, such as a 50/50 split or a set of four 25% width columns, gives us an immense amount of flexibility. Whether the screen is 500px wide or 600px wide, the columns will still be broken up into their correct percentages.
A good deal of the 352 redesign requires custom content management. In many cases we were forced to hardcode out the regions leaving more general text areas to be handled by the CMS.
To adapt these content regions to different size screens, we made decisions on a feature-by-feature basis as to what to do with the content in terms of flow and stacking. In all cases, the goal was to retain the look and feel of the content as much as possible while providing an easy reading experience for all users.
Desktop or Mobile First?
We took an all-encompassing approach when deciding to code for the desktop first, or for mobile. That said, we looked at our analytics to see how visitors view the site and make doubly sure the site looks great at those specific sizes. With devices like the iPhone and the iPad, we can examine their specific device widths tweak our design to ensure the site looks great on those devices.
The most powerful tool in responsive design is the media query, a programmatic statement that tells the CSS to apply or not apply itself based upon a set of rules. For instance, we can set rules to be trigger off a minimum or maximum width of the browser window like I mentioned above. In a mobile-first world, we’d use minimum widths to add content as the browser enlarges to let the mobile design be smaller and more efficient.
Everything on the new site is handled with media queries to be fully responsive. No need for a mobile server or other tricks to achieve our results. Every user gets the same site, though we provide images optimized for the range of devices we support. If the user is on a retina-quality display, they’ll see the appropriate images. If not, we make sure to show them smaller, more compressed images that don’t bog down their data usage.
Unfortunately, media queries are not supported by IE8, which our analytics showed is the browser of choice for many of our users.
To solve that issue, we use maximum width declarations in media queries. Older browsers such as IE8 will simply ignore the styles within media queries, meaning we effectively code desktop-first where IE8 is king. Modern browsers such as those found on phones and tablets will recognize our queries and show the site in its best form.
The New Normal
As a final word on our use of Responsive design, I want to focus on our shared resources. A true responsive design should not be considered special but rather the norm. The web comes in all shapes and sizes, and we have built a site to fit that world. Whether it is with a finger or a mouse, a phone or a desktop, we show the user the same site.
While we can leverage these modern web technologies to simplify our own codebase, the most visible benefit is a site that looks good and works for every user. Be on the lookout for our new site, coming soon to any device near you.