By Jim Clanin
Responsive web design has been around for a few years, and it’s come a long way. Yesterday’s innovations become today’s standards as industry leaders continue to make improvements in responsive web design, but there’s still a long way to go.
Let’s look at what responsive web design is capable of today, what upcoming advancements in standardized properties will make possible, and what still remains to be improved upon. We’ll cover each topic briefly, giving an overview, rather than a comprehensive list.
Images
As high-density screens (those with pixel ratios higher 2) become more common, the way we handle images in responsive design becomes more important. Even normal-sized images can look “pixely” on high density screens, and larger images can negatively impact load speeds, especially on mobile devices that don’t need a high pixel image.
There are a few experimental techniques to deal with this, but they’re far from being standard. Another solution to the image problem is to use alternative formats, like the progressive JPEG, which renders progressively, rather than top-to-bottom, which improves UI but not performance. For now, though, we’re still waiting on industry innovators to come up with a solution that can be standardized.
Complex Content
Even as we improve upon images and layout in responsive design, more complex content remains a sticking point for some web design companies. Here are a few complex elements and how to design them responsively.
Forms
Longer forms are more difficult to adapt for the shorter format of a smaller device, and they’re harder for users to fill out. Make it easy for users to enter information, require them to enter as little as possible, and give them feedback before they submit the form. Checkboxes, drop-down menus, and radio buttons should be used in forms whenever it’s possible. The HTML5 autocomplete attribute is another way to ease the user’s way through your form.
Tables
Tables can also become messy in a mobile format, since they’re usually horizontally oriented and tend to contain a lot of data. One way to make tables easier in a responsive format would be to hide certain columns and allow the user to check which columns they want to see. Scrollable tables, with a fixed column, are another way to neatly present tables on smaller devices. Finally, the reflow method splits columns into list-like items under headers.
Embedded Content
Third-party content like Youtube videos, social media feeds, interactive Google maps, and SlideShare presentations are common for many websites. Unfortunately, many of those third-parties require the web design company to use iframes, which can be difficult to use in responsive design because they require a fixed height and width in your coding. A few potential workarounds are being developed, though a perfect solution hasn’t yet been developed.
Navigation
Websites with complex navigation will require more creativity, but even simple websites require some inventiveness when it comes to creating responsive navigation. Converting the navigation into a drop-down menu has been the go-to solution, but it can get messy with multiple levels, and can be difficult to use.
Two preferable solutions are toggle and off-canvas navigation, which uses a simple “menu” icon. When the user clicks on it, the main screen swipes to the below or to the side, revealing the menu links. There’s one thing that responsive web designers can’t seem to agree on, though: menu icons. (Below are a few common ones- which one do you recognize from experience?) Hopefully, as more websites incorporate responsive web design, the industry will come to an agreement on which one to use as a standard.
Content
As more users access the web from mobile devices, we have to consider that longer blocks of content aren’t practical or useful in responsive web design. Truncating content for mobile devices while leaving longer sections for desktop users requires us to create flexible, prioritized, adaptive content. This seems simple enough when shortening a slogan or tagline, but it can get complicated when applying that to an entire website. HMTL5 gives us a good starting point in creating meta data, a way to prioritize content and assemble it based on the device being used.
What Next?
Although we’ve covered a lot here, we’ve barely begun to scratch the surface of responsive web design. Even though innovative responsive web designers have come up with creative solutions, many of them aren’t perfect and there remain a lot of unsolved issues. Here are DoubleDome, we’re watching industry innovators to make sure we deliver the most current solutions for responsive web design.
Have you ever run into issues using a responsive website on your mobile device? What do you wish were different about responsive web design?
