The Web continues to evolve with design in mind. (Hooray.) As designers, or simply web aficionados, we ought to support the advances by changing our thinking when it comes to web design. The prevalence of smartphone browsers and mobile websites spurred the development of responsive web design. It’s up to the designers and developers to use this new tool set and maintain a visually appealing and consistent experience on desktops, laptops, tablets and phones.
Here are five, easy-to-break habits for designers and developers using responsive Web design.
Habit to Break #1: The header must be a photo
The transition from desktop to mobile websites is a matter of orientation and size. The reduced size might be the most immediately recognized difference between the two devices, but orientation has just as much to do with the overall design. Anyone who’s designed around photos knows the importance of having a horizontal photo in a horizontal application and vice versa.
Smartphones throw a wrench into traditional website headers by switching up the orientation.
Do this Instead: Use a graphic element
You may not always have control over the photo composition. Graphic elements give you much more flexibility. Create an element with responsive web design in mind. In other words, make something that can be stretched or shrunk as needed. The easiest option is to make a ribbon with a logo or seal in the middle. I’m sure that will fall into a “responsive design cliches” article in the next year or so. But until it’s overdone, it’s acceptable.
Habit to Break #2: The logo should be small in the upper left
Eye tracking has been used for a while now to test how a person looks at a website. It’s the reason why logos are on the upper left in the first place – it’s one of the primary places a user looks when glancing at a site. On a mobile browser, the eye barely moves, so the data on hotspots are a little hazy at this point. The real issue is size. (320 pixels wide by 480 high isn’t a lot of real estate). If you put a logo with the same proportions in the upper left of your mobile site, the logo will be minuscule to the point of insignificance.
Do this Instead: Think in hierarchy
On a desktop design, it’s important to keep the logo in the upper left. For a mobile site design, think about what’s more important. I don’t have the data to back this up, but my hunch is that the top third of a mobile site is the hotspot. Place your logo there, front and center. The trend has been to remove the “home” button from websites and use the logo as a link back to the main page. Putting the logo in the center of mobile sites gives users continuity across the device and lets them browse with some familiarity.
Habit to Break #3: Web design requires its own mindset
There was a time when designers got lumped into categories – print designer, illustrator, web designer, etc. The chasm between skill sets is narrowing and designers are expected to be more versatile than ever before. With the onset of HTML5, developers can add shadows, bevels and other graphic elements once reserved for print. It won’t be long until the gap is bridged entirely.
Do this Instead: Treat responsive web design like two layouts of the same execution
In its simplest terms, a traditional website is designed like a 1/2 page, horizontal print ad whereas a mobile site is designed like a 1/4 page, vertical print ad. Each design must contain the same core information – logo, menu, intro copy, etc. By thinking of responsive Web design like carrying the same campaign execution across ad sizes, the task of building two very different sites or one uber-flexible site becomes a lot less daunting.
Habit to Break #4: Functionality must change
You might be saying, “Of course the functionality changes!” By functionality, I really mean the guts of the site and what it intends to deliver to the user rather than how all the stuff operates. As an agency in Fargo-Moorhead, we have the bittersweet luxury of being quasi-remote. We saw the influx of smartphones around the nation, but it took awhile for them to land in our neck of the woods. This means we were able to prepare ourselves for when companies started looking for mobile-friendly sites and merge with the upgrades in web design. The notion that desktop and mobile sites need to be mutually exclusive turned out to be false.
Do this Instead: Think about content.
With the hubbub surrounding the need to make two sites, we watched the dust settle and realized the way to deliver a good multi-platform site started with content. And I’m not just talking about words. I’m talking content. Unless the site you’re developing has some sort of device-specific push – like mobile banking – your site should try and deliver similar information. Aside from putting the logo at the top, the other basic rules of design apply. Catch attention and then put the most important or engaging content first. Note, the hierarchy should put the content that’s most important and engaging for the user first.
Habit to Break #5: Design ends at the header
When scrolling through a mobile site, especially a content-rich one, there seems to be endless amounts of text. The writer in me appreciates the swing back to copy-focused messaging in advertising, but the consumer in me gets a bit bored. The new generation expects to see images. We’re wired (or should I say wireless) that way. The consumer in me appreciates when mobile content still has something visually engaging to offer.
Do this Instead: Befriend your developers
To some it might sound crazy or down right blasphemous to work with developers during the design phase, but it’s important. Learn the comfort level of your developers and how you can set up the design to add in some flare throughout the scrolling process. Remember, you aren’t making two separate sites, so those design choices will need to be included in the desktop site. By gaining a better understanding of what you can do within responsive web design, you can work together to find tricks that give users a more rewarding online experience.
I began writing this article before attending a luncheon. Oddly enough, the luncheon discussed the inclusion of content across the myriad of Internet devices we use everyday. The speaker referred to computers, tablets, gaming systems and smartphones as “windows to the web.” That’s a truly accurate representation. As communicators, we should rally around this concept. The sky doesn’t change because we’re inside, just the size of our windows. As creatives, we should work to give users a rewarding experience regardless of the device. Hopefully responsive web design will carry that torch as we continue along this multi-platform, wireless journey.