Five Tips for Responsive Web Design

If you’ve been discussing a website redesign with just about anyone these days, you’ve no doubt heard the term “Responsive Design” come up one, or a hundred times. Responsive Design, one of the more effective ways to approach designing websites for mobile devices, is all the rage. And rightfully so.
Every design and development decision made during the process of designing a user experience for a website ultimately ties back to your main goal: creating a relevant, intuitive, and impactful experience for your audience. And with the latest projection having mobile audiences, whether on phone, phablet (really large phones), or tablet, outpacing their desktop brethren this year, not having a plan to meet mobile audiences on their terms is a surefire way to deliver a crummy user experience that frustrates audiences and undermines your brand.

But, whereas, even just a few years ago, designing for mobile audiences was viewed as a luxury, and meant accounting for just a few types of devices, thanks to the unrelenting pace of innovation (have you SEEN how many phones Samsung offers?!), website design today means delivering user experiences to a seemingly infinite variety of screen sizes and resolutions.

This is where Responsive Design comes into play.

In short, Responsive Design is a very efficient, cost-effective way to make your website’s layout adjust on the fly for hundreds of different screen sizes your information can be displayed on. With a little bit of smart front-end coding, and thoughtful user experience design planning, a Responsive website will customize how it presents content and delivers the user experience for an almost infinite user base.
As they say, anything worth having takes hard work. And as with any designed solution, there’s a difference between good and great. So what exactly goes into executing a successful Responsive Design plan for mobile websites? To help answer this question, I’ve pulled together a non-technical primer to hopefully provide some insight into to key issues to be aware of if you’re planning a website redesign that includes Responsive Design.

Your Content
Too often, content is added to a website far after design comps have been approved and site development is in full swing (if not completed). But as I’ve discussed before, Designing with the Real Deal, aka, your content, is invaluable in helping designers and developers plan and create a user experience, especially for mobile, that effectively helps you reach your goals.
Unless your design firm is creating your content for you, it’s probably going to be hard to get your content ready early on in a website redesign (after all, you’ve got a job to do that isn’t designing websites). But having the content early in the initial design phase pays big dividends and makes it far more likely that the design solution you fell in love with will translate properly when real content is added.

Limiting Functionality
Mobile phones have limited capabilities compared to desktop computers, so while designing mobile-friendly wireframes and design comps early in the process tells you what your content will look like on a mobile device, what about making sure key features of your desktop site actually work on a phone? Design processes like mobile-first attempt to address this by limiting initial planning only to what’s possible on mobile, and then adding from there.
We prefer not to design for mobile-first, but rather be mindful of decisions we’re making during initial design, and simply have a plan for dealing with them as we translate to mobile devices. This often means turning off certain features that won’t translate well to mobile. Whatever process you prefer, as long as you keep in mind how you plan to deliver a great experience across all platforms by working with what they offer, you’ll be fine.

Responsive Frameworks
As interactive design for mobile has taken off over the last few years, responsive “frameworks,” custom libraries of code, like Foundation and Twitter Bootstrap, have been introduced to speed up the process. What they do is instantly provide a grid or general foundation for rapid prototyping of different mobile layouts and functionality, letting designers spend their time on the details of an effective brand experience (that’s what separates you from the crowd, after all).

Image Sizes
With an incredible range of screen sizes and resolutions, websites need a way to deliver images effectively to everything from a 27” iMac to a Samsung Galaxy II. In a nutshell, CSS Media Queries are little pieces of code that analyze the size of the user's browser window, then instantly deliver the proper code for that specific browser. Here's a great example of media queries in action - just click at the top of the page and watch the site resize images on-the-fly. Pretty cool!

Retrofitting Responsive
You have a website you’re happy with, but just want it to be mobile friendly? Absolutely doable, but be prepared to engage in a meaningful discovery process and make some compromises. Depending on the current design and structure of the website, this could be straightforward, or could require some intensive cosmetic surgery. It all depends on how your site’s HTML and CSS are written, and how well your site’s design lends itself to mobile layouts. The only way to find out is to audit your site’s existing code and discuss priorities and potential complications.

A word of caution with retrofitting: expect the unexpected. When you retrofit website code, there are usually unexpected surprises, and things may take longer than estimated. Choices about functionality that may have worked perfectly on a desktop also may turn out to be non-starters in a mobile environment. While retrofitting is not an ideal approach, it’s likely to be more cost-effective than remaking your entire site. So if you’re happy with your site’s design and have no user experience or CMS issues to address, retrofitting may be a good approach.

If I had only one piece of advice to give though, it would be that like any successful design and development engagement, planning thoroughly and thoughtfully for Responsive Design process early on is the best way to ensure fewer hiccups at the end of the project. It’s also the best way for your brand to deliver a great user experience to every audience, no matter where they are.

13 Simple Tips for Improving Your Web Design

1. Have a polished, professional logo--and link it to your home page. "Your logo is an important part of your brand, so make sure it's located prominently on your site," says Tiffany Monhollon, senior content marketing manager at online marketer ReachLocal. "Use a high-resolution image and feature it in the upper left corner of each of your pages," she advises. "Also, it's a good rule of thumb to link your logo back to your home page so that visitors can easily navigate to it."

2.Use intuitive navigation. "Primary navigation options are typically deployed in a horizontal [menu] bar along the top of the site," says Brian Gatti, a partner with Inspire Business Concepts, a digital marketing company. Provide "secondary navigation options underneath the primary navigation bar, or in the [left-hand] margin of the site, known as the sidebar."

Why is intuitive navigation so important? "Confusing navigation layouts will result in people quitting a page rather than trying to figure it out," Gatti says. So instead of putting links to less important pages--that detract from your call to action or primary information--at the top of your home or landing pages, put "less important links or pieces of information at the bottom of a page in the footer."

3. Get rid of clutter. "It's very easy these days to be visually overloaded with images, to the point where our brains stop processing information when confronted with too many options," explains Paolo Vidali, senior digital marketing strategist, DragonSearch, a digital marketing agency.

To keep visitors on your site, "make sure pages do not have competing calls to action or visual clutter [e.g., lots of graphics, photographs or animated gifs] that would draw the visitor's eyes away from the most important part of the page." To further keep clutter down on landing pages, "consider limiting the links and options in the header and footer to narrow the focus even further," he says.

4. Give visitors breathing room. "Create enough space between your paragraphs and images so the viewer has space to breathe and is more able to absorb all of the features your site and business have to offer," says Hannah Spencer, graphic designer, Coalition Technologies, a Web design and online marketing agency.

"Controlling white space through layout will keep users focused on the content and control user flow," adds Paul Novoa, founder and CEO at Novoa Media. "With a lot of visual competition taking place on the Web and on mobile, less is more. Controlling white space will improve user experience, increasing returns from the website."

5. Use color strategically. Using "a mostly neutral color palette can help your site project an elegant, clean and modern appearance," says Mark Hoben, the head of Web design at Egencia, the business travel division of the Expedia group, who is also a believer in using color wisely. "Employing small dashes of color--for headlines or key graphics--helps guide visitors to your most important content," he explains.

It is also important to use a color palette that complements your logo and is consistent with your other marketing materials.

6. Invest in good, professional photography. "Website visitors can sniff out generic photos in a second--and they'll be left with a generic impression of your company," warns Zane Schwarzlose, community relations director, Fahrenheit Marketing. "Your company isn't generic. So show your visitors that by investing in professional photography."

"We strongly recommend that our clients invest in professional photography or purchase professional stock photos," says Gatti. Good photographs "draw the eye, providing an emotional connection to the written content." Poor quality photographs or photographs that have nothing to do with your message, on the other hand, are worse than having no photographs.

Bonus photography tip: "If you want to draw attention to a particular piece of content or a signup button, include a photo of a person looking at the content," suggests Elie Khoury, cofounder and CEO of Woopra, which provides real-time customer and visitor analytics. "We are immediately drawn to faces of other humans--and when we see that face looking' at something, our eyes are instinctively drawn there as well."

7. Choose fonts that are easy to read across devices and browsers. When choosing fonts, keep in mind that people will be looking at your website not just on a laptop but on mobile devices. "Some large-scaled fonts may read well on [a computer monitor], but not scale or render well on mobile, losing the desired look and feel," explains Novoa. So he advises using a universal font.

8. Design every page as a landing page. "Most websites have a design that assumes a user enters through the home page and navigates into the site," says Michael Freeman, senior manager, Search & Analytics, ShoreTel, Inc., which provides hosted VoIP, cloud PBX service and business phone systems. "The reality, though, is that the majority of visits for most sites begin on a page that is not the home page," he says. Therefore, you need to design the site in such a way that whatever page a visitor lands on, key information is there.

9. Respect the fold. When asked for their top design tips, almost all the Web designers CIO.com queried immediately said: Put your call to action in the upper portion of your website, along with your phone number and/or email address (if you want customers to call or email you). Regarding home page images, "I recommend going against full-width sliders and encourage sliders or set images that cover two-thirds of the width allowing for a contact form to be above the fold," says Aaron Watters, director, Leadhub, a website design and SEO company.

10. Use responsive design--that automatically adapts to how the site is being viewed. "Rather than developing a site for each device, a responsive site is designed to adapt to the browser size," making for a better user experience, says Jayme Pretzloff, online marketing director, Wixon Jewelers. And a better user experience typically translates into more time spent on your site and higher conversion rates.

11. Forget Flash. "Thanks in part to the ongoing dispute between Adobe and Apple, the days of Flash as an Internet standard are slowly coming to a close, so why stay on the bandwagon when there are other options that are much more Web and user friendly?" asks Darrell Benatar, CEO of UserTesting.com. Instead, use HTML5, he says. "HTML5 is gaining more support on the Web, with search-engine friendly text and the ability to function on many of the popular mobile operating systems without requiring a plug-in. The same can't be said for Flash."

12. Don't forget about buttons "The 'Submit' or 'Send' button at the bottom of a Web form can be the ugliest part of a website," says Watters. So he encourages designers to make form submission buttons "so appealing visitors can't help themselves. They just have to click it." In addition, "when a visitor hovers over your submit button, it should change color, gradient, opacity or font treatment," he says.

13. Test your design. "Whether you are trying different placements for a call to action or even testing different shades of a color, website optimization can make a big impact to your bottom line," states Lindsey Marshall, production director, Red Clay Interactive, an Atlanta-based interactive marketing agency. "A user experience manager at Bing once remarked that Microsoft generated an additional $80 million in annual revenue just by testing and implementing a specific shade of blue!"
source:
http://www.cio.com/article/734408/13_Simple_Tips_for_Improving_Your_Web_Design?page=4&taxonomyId=600028