Responsive Web Design-Done Right


By now most people who have a website or work with websites have at least heard about responsive web design. It is the essential group of techniques to make your website function well and look good on all of your devices. The problem is that many developers take the wrong approach and use the wrong tools to get the job done, leaving the client and the user with an inferior product. We follow certain processes and procedures to make sure that we do not just hand off a satisfactory website, but from the first step to the last, we assure that our solution fits your needs.

With most projects, a plan is best executed when it is properly conceptualized and wireframed. All components of a website are factored in from the beginning, so that both mobile and desktop users have an equally great experience.

Design Breakpoints Around the Content
Setting specific “breakpoints” of when to rearrange content on a site is a good way to pigeon-hole good experiences to only certain devices. We update functionality and styles whenever the site dictates, so that the end user gets the best of the website, no matter what size or brand their device is. If a developer decided to update the look of a website at a hard breakpoint of 768 pixels instead of 800 pixels, it might look good on an iPad. However, on the Google Nexus 10, the design could seem substantially off. If a developer adjusted the design whenever the website dictated, this issue could easily be resolved. This technique also helps out with devices in the future, since new phones and tablets with their own different sizes are coming out frequently, this content-first approach would be ready to handle them all.

Prioritize Content
Although it is important to keep a consistent experience from desktop to mobile, there are certain demands that need to be considered for smaller devices. Most desktop websites have multiple column layouts that just will not work when the viewing area is smaller, which is why the structure of a site is so important for responsive web design. If the design dictates that the sidebar should be below the main copy on a mobile device, it needs to be built that way from the beginning. It is of high importance to consider the priority of content on the page and to adjust accordingly.

Reduce Excess Resources
Not all content is necessary either. Your mobile device is most likely not as powerful as your desktop, and trimming unnecessary fat becomes mandatory when every byte counts. Extraneous text and background images can be dropped in favor of a leaner approach, so that a site’s speed is maximized. It might not have the exact same amount detail a desktop version can afford, but minimizing bandwidth expenses while maintaining the same aesthetic feel is more ideal.

Load What You Need
This does not mean that we remove everything on a mobile device, but we can make some adjustments that fit the current needs of whatever is being used. This really comes into play with images. The proper image in use should be the only image that is being loaded. For example, if a small device only needs a 600 pixel wide image, then only load that image. When the desktop needs a 2000 pixel wide image, only load that image. By following those rules, unnecessary files and data are not being loaded.

Consider the User
Adjustments are not only for speed and efficiency, but user experience and accessibility can also be benefitted. Font sizes, line heights, and spacing might all need to be fine-tuned on mobile devices for the content to be more readable or to fit the surrounding area better. Buttons can also be made larger to account for finger clicks, and a fixed navigation at the top of a page can help on long articles. Each device should be handled a little differently to fill the needs of the user, while still providing a complete experience.

Many other approaches are taken to produce a seamless and responsive website, but following a few of these guidelines will yield a more complete and better performing website that does not only aim for mobile compliance, but cross-platform excellence.

Enjoy what you’re reading? Sign up for the AYC Media newsletter and receive updates on our posts.