We’ve all heard it before: good design is hard. Good web design not only has to look amazing, but it also has to be functional, often without the knowledge of what platform or resolution your design is even going to be used on. Responsive web design – a simple concept at its core – gave web designers and developers the opportunity to account for the unknown. We perfected the use of media queries, installed respond.js to account for the IE holdouts and core concepts were adopted.
The basic structure of responsive design is usually a 3-2-1 pattern. Main content and sidebars are eventually reduced to one long vertical column of information on our phones. And while this is responsive web design, it’s disheartening to think that’s all we can do to make our sites work well on all devices. So I want to challenge us all to design beyond the vertical; to think about the other aspects that go into making a well-designed responsive site.
Sites Designed Beyond the Vertical:
Example 1: Using organization creatively
Navigating content-heavy sites on mobile devices can be tough, and having a well-organized site will help users on all platforms. Smashing Magazine provides a great example of well organized content displayed creatively.
Notice their use of color on the desktop vs. the tablet. It’s reorganized and simplified for the one without any loss of information. They also have a very well organized menu that allows users to easily navigate the site no matter what device the site is viewed on.
Example 2: Using typography to make the difference.
Big & bold is the new minimalism. Large font and blocks on home pages are showing up everywhere. It only makes sense to use the typography to work for you, instead of against you.
Stephen Caver’s portfolio website does just that. The desktop version features large text, a strong presence and a beautifully designed grid layout. The mobile version combines the redundancies of the floating grid & top menu, but uses the typography in a clever fashion so the impact is still made.
Notice how even the big & bold text is pleasant to read on the mobile version. It’s worth taking a lesson from.
Example 3: Using style elements to create consistent appearances on all devices.
Having clearly defined style elements for different areas and regions on your website creates a more pleasant experience for your users. Keeping the style elements consistent on all platforms reinforces the site’s identity and enhances user experience all around.
Cornell University’s recent home page redesign follows all the trends – menu bar across the top of the page, with a large slideshow, very clearly defined horizontal regions, a sortable grid of nodes and the resource drawer footer. Through the use of color and styling, they provide a consistent and visually appealing experience for users on all devices. The end result is a beautiful website on all devices.
Example 4: Just having some fun & being creative.
There are a ton of available libraries and resources out there to add a little something extra to your site. Touch-responsive slideshows, fly out menus, pop up social share buttons…. The possibilities are endless. These elements can help add something special on the site that delights the user & is just plain fun to create.
One of the more popular libraries being used right now is jQuery Masonry, which is most commonly explained as the “Pinterest layout”. I recently built a site for the College of Education & Human Development using this library on certain pages of the site. It wasn’t appropriate to use on all pages, but added an extra element to make the site stand out a bit more, even on mobile devices.
So as you’re designing your next project, remember to think beyond vertical. Use other elements to enhance the user experience across all platforms. And keep creating beautifully designed, functional sites.