Accessibility for Modern Responsive Website Layouts

The older methods of web design have fallen by the wayside to make room for HTML5/CSS3 design. Unfortunately when you’ve become ingrained with older design techniques it can be difficult to extricate yourself from the outdated workflow. But modern usability centers around responsive design and requires more attention to detail.

The following design tips are perfect for anyone just familiarizing themselves with concepts of web design usability. Some designers might even argue that responsive web design is an antiquated term – it’s now just called “web design”. Any website worth its salt should be crafted in a responsive manner to support the largest possible audience.

Keep these ideas in mind while designing new websites and see what else can be accomplished. Responsive techniques have only been getting easier and newer advancements should make this process quicker and more enlivening for future designers.

Legible Font Variants

Text on the page is perhaps the largest indicator of a great website. The font size, contrast, line height, and whitespace between paragraphs will play a role in the legibility of text.

Responsive page fonts should be naturally resizable with a breakoff limit. This means on larger monitors the font should be clearly legible while on smaller devices the fonts should be resized to fit casually into a small screen. But keep in mind that fonts which are too small never add value to the layout.

Let’s take the example of Heavy app for Android. This landing page uses a lot of images and wide horizontal page sections. As you resize the page some fonts will resize smaller but other blocks of text are merely repositioned.

This is a great technique if you want to keep a consistent size among various elements regardless of screen size. Try breaking down floated elements into block level content and keep text streaming down the page. Even try adjusting white space values between blocks of text for greater readability from a distance.

To see fonts that dynamically resize check out the webpage for MightyText. It runs using similar horizontal content blocks, however the paragraphs and headers are dynamically resized as the window gets smaller.

But all the fonts are still easy to read because of line height values. This is also known as leading which dictates how easily a reader can follow along with text.

Note that on a larger screen this value could be somewhat negligible. Smaller screens really don’t have as much room, so letters in paragraphs need plenty of space to create comprehensible blocks of text.

Common Interactivity

Most people have grown familiar with the traditional interactions of modern smartphones. Touch, swipe, tap & hold, and other techniques are common for interacting with mobile UI.

Although responsive website are not native mobile applications they can still replicate similar behavior. It’s a good idea to craft responsive websites that stick to the same interactive functions of a page whether that’s sliding menus, selectable text, or responsive images.

Browser support is perhaps the greatest threat to any poorly-prepared responsive layout. When first coding a prototype be sure to check as many browsers as possible for bugs in the layout. The goal is to create a seamless interface on as many screens as possible.

Ripple is a landing page which uses the traditional mobile hidden nav menu. But instead of sliding in from the side like most examples, this nav drops down from the top. So it toggles like a sliding menu effect which is both easier to use and runs cleaner on the page.

Navigation will usually be a tricky subject on responsive layouts. This is why common interactive patterns are the best choices to avoid confusion.

The homepage for ProjectPulse has an even stranger responsive navigation menu. Once the layout has been resized smaller a 3-bar hamburger icon appears in the lower-right corner. When you tap this icon a menu will fly out from the corner of the page.

It stays fixed in this corner so that it’s easier to find links whenever needed. ProjectPulse is a great example of ingenuity on top of pre-existing ideas. Most people are familiar with hamburger menus so this design changes how the animation works and where the links are located.

Drop the Inessentials

Responsive usability is about speed, efficiency, and clarity. When crafting a large fullwidth layout it can be tough to cram every element in the website down smaller. This is why truly usable responsive websites should completely remove unneeded content.

Think of all the extra areas that mobile users might not care about. This could include sidebars, extra footer columns, social sharing links, or oversized banners in the header section. Granted some of this content may be needed but ultimately it’s a good idea to make the responsive layout as simple as possible.

One odd yet fascinating example can be found on the homepage for Time magazine. When at fullsize in a larger browser window the left column will contain general links to new articles & stock exchanges. The larger right column has all the post headlines with featured images and the typical content you would expect.

When the site is resized smaller these two content areas become toggleable. So a user is able to tap the red tab button and switch between sidebar content or the main posts listing. It’s a rather obscure technique but it demonstrates the versatility of responsive web design.

A simpler yet still impressive demonstration can also be found on the Hopper homepage. When resized down smaller the site will naturally fit text & images into the miniature window. But little page elements will be completely removed like social media links and the bottom footer navigation.

Some items can be reorganized and pushed into the responsive menu, but ultimately much of this content is not needed. Hopper is a startup which seems to be focused on a lean browsing experience. This is a great strategy for any designer who needs to place usability ahead of design aesthetics.

Content Flexibility

Always trust your instincts when designing a responsive layout. Think about your design in a critical manner based on how it looks and how it might behave. Consider how users might see the website from their vantage point.

Flexibility is a huge part of responsivity because all areas on the page need to be flexible. Larger full-size layouts are rarely going to fit down into a smartphone screen without some adjustments.

This is why as the designer you need to consider all of your options before plowing ahead with a design concept.

One great example of flexibility can be found on Storify. As you scroll down the page you’ll notice many block elements which float side-by-side. However once the layout is resized smaller these elements break down into full-width content sections.

When the layout is larger you can save page height by grouping bits of content together. But when the layout shrinks down smaller it requires more finesse and a much lengthier page body. You won’t always find the perfect solution but it’s your job to at least find one that works well in the context of usability.

Try Building Mobile First

One of my favorite books on web design is Mobile First by Luke Wroblewski. It’s a very quick read and basically outlines the concepts behind crafting a layout for mobile devices first.

If you’re stuck thinking of ideas for your design it may be easier to work from smaller to larger. Start with general prototypes for a mobile interface on smartphone devices and scale up to tablets and finally laptop/desktop monitors.

This method allows you to keep the responsive layout simple without sacrificing any key elements. Then as the layout increases you can add extra features into the wider design. Starting with a mobile-first attitude forces you to keep only the most important design elements and reduce the responsive website’s size on screen.

Extra details can always be added or pushed down to the bottom of the layout. But people visiting your site on mobile don’t always want to pinch+zoom or swipe down a lengthy webpage. Make touchscreen items your top priority by focusing on the most important elements and designing them in a way so they work from any device.

When your layout is fitted nicely for mobile then you can always add more dynamic features later. The goal is to craft a perfect experience for the user regardless of screen size & the best way to do so is by starting with the most diminutive screen and working up.

Closing

With these tips it should be much easier for UX designers to craft amazing interfaces for responsive layouts. Web design is not an easy job but it does get easier with practice. The key is to see things from both a designer’s perspective and a user’s perspective. By approaching these design ideas with an open mind you can apply the ones that work for you & even tack on your own ideas.