Arrow Down
Design

10 responsive web design best practices

Ben Obear
-
November 14, 2015

You already know you want a responsive web design, so your customers can easily engage and interact with not just your advanced technology but your specific company efforts as well. With the machinery on the market today, it can be hard to conform design practices that will be compatible with each one. That's why you'll see lots of applications out there that are only for iPhone or only for Android. However, the benefits of having a responsive strategy are numerous. Not only will your customers feel included, but Google appreciates it as well. They take your responsive design into account when deciding where to place you on the search rankings for the day. Responsive web design techniques are being used successfully with the most accessed sites today, and you can make it happen for your company too. Of course, it will require some effort on your part. See the top practices before you implement your web design strategy.

1. Smaller Is Better

Everyone in the world may not have a smartphone or tablet, but sometimes it feels like they do. If you're working on responsive design for devices of all types, you'll want to start with your smallest screen size available and then scale out. Resources are best used when concentrated on the smaller platforms first, but you have to keep branching out after that. Whether you're on a 20" laptop or a standard smartphone, the information needs to be easily acceptable. You'll also want to use liquid layouts as much as possible, meaning you're doing one design for several screens as opposed to working individually on each type of machinery and size scale.

2. A Flexible Cityscape in Disguise

Grids make up our world, whether it's in an apartment building or a neighborhood, and they help us figure out where to go and where we are. In web design, it was common to use a fixed-grid method. It meant that websites were given a set parameter, regardless of the screen resolution. It caused the layout to be the same size, but the quality was inconsistent. Now you can use fluid grids which eliminate the need to manually adjust the dimensions, due to their automatic resizing in scale with the browser specifications. The grids actually use percentages rather than fixed data input, so it does a better job of ensuring each image is clear.

3. Using Media Queries

These are already available to you if you're using the CSS3 language, and they work to give the website the exact properties of each browser it interacts with. In order to determine the size of the screen, type of device and orientation of the images, you'll need to effectively use these queries. When text or format looks awkward on different devices, this is referred to as a breakpoint on the layout itself. If your site has features to it that are difficult or awkward to read (like narrow columns or panels), then your media queries need to define where these breakpoints are so the queries themselves can adjust and fix as needed.

4. Simplifying the Process

Having excellent content is one of your best ways to be favored by search engine algorithms and your customers. The more unique content you have that connects with the reader, the more you're likely to be shared and favored. However, having too much content can make your site difficult to load. Creating content specifically for desktop viewers will only complicate your mobile presence. You can tag any component with a .not_mobile if you really want to keep the content on the site. However, it may be a smarter idea to just start paring down the content altogether so you can focus on that which can be loaded across all screens.

5. Menus and Buttons

We all know what it's like to find a website that makes things difficult to find. The actions are clear to whoever developed the platform, but that doesn't mean anything to the user. People are much more comfortable with obvious menus and buttons that leave little room for confusion. A horizontal menu that can be swiped gives the visitor a good indication of what the site has to offer, and reduces the amount of time spent trying to navigate it. Make your biggest draw the largest portion on your screen, and give people large (scaled) buttons to click upon to get more information. Make them specific, and don't try to confuse readers with arrows that point your readers toward advertisements.

6. Headers and Paragraphs

Responsive design needs to have headings and text that look balanced. Too large and it will break up the text so much that reading will be annoying, but too small and you risk the readers having to squint to make out the information. The newest mobile designs make it easier for you to see due to better resolutions which actually should make it easier on you to pick the right sizing for your website. Typically, the optimal amount of characters in a single line will be between 60 to 75 characters. The eyes can follow certain layouts better, so aim for your text or photos to comprise about 500 to 700 pixels.

7. Optimizing the Content

It's one thing to fit the content onto a screen, it's another thing to actually consider yourself from a visitor standpoint. The more information you have up on your site, the more likely it is you can determine what customers are looking for and how easy it will be for them to find. Before you start finalizing your layout decisions, you need to figure out the most important information on the site and which people will want to access it at what times. You can't account for every given situation, but you can put yourself in the readers shoes as much as possible. For example, visitors on your mobile site may not solely be looking for the directions to your business. They may instead just want to know more about what you can do for them. Put the most important information at the top of the page regardless of how customers are accessing content. They used to call this putting the important parts above the fold, but this is really just saving people from having to scroll to find anything.  

8. Content Blocks

Your mobile site is composed of content blocks, and unfortunately you'll have to sacrifice certain pieces to make the site easy to follow. You can change the order of things around, so the eye is drawn to different parts of the screen on a desktop rather than a small phone screen. While mobile viewers are looking at the top, desktop viewers are absorbing the site as a whole. If your images are more relevant than your text, then you can manipulate to show one over the other for smaller screens. For a desktop image, you can simply place one beside the other.

9. Foregoing Image Quality

Pictures can really draw a user into a site, and they can make them sit up and take notice about your offers. However, images take a while to load, and they can pose problems to the performance of the page itself. You need to be ready to take out whatever slows down your site, and you may want to think about compromising on the quality of the pictures you do have. If you have any type of animated content or moving designs, then that may just be too many scripts for the device to run. Even if you're a design company, you still need to be able to impress those who may not have the most advanced gadget. Your customers will be far more interested in seeing what you have to offer rather than getting annoyed a slowly loading page.

10. You Can't Win 'Em All

Unfortunately, there are far too many types of technology available for you to figure it all out without investing an often inappropriate amount of resources. Instead of cursing people for using out-of-date machinery, you have to remember that eventually it won't be a problem anymore. People will eventually upgrade and can then start enjoying the fruits of your labor. With the advancements of technology, you know nothing stays the same. The best you can do is try to take into account as much as you can, so you can bring as many customers onboard with the new features.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Need help with product design or development?

Our product development experts are eager to learn more about your project and deliver an experience your customers and stakeholders love.

Ben Obear
San Francisco