Web designers have taken on many more roles in just the past few years. It’s now quite common to find designers who also specialize in frontend development, UX design, and even some backend development. One of the newest trends of responsive design is crafting a single base of HTML/CSS code that can fit properly into any browser window.
There is an intricate balance between desktop and mobile web browsers. Now more than ever it’s crucial that web designers find a balance for all users in every major website. Responsive web design is more than just supporting mobile devices – It’s truly about creating flexible layouts with page elements that can shift and rearrange themselves according to the current viewport.
In this post I’ll explore some responsive web design ideas to help get your creative juices flowing and hopefully leave you feeling ready to make some changes to your sites if needed.
Malleable Content Sections
The nature of a responsive website is fluidity. At different viewpoints each responsive layout should break down to restyle page content sections. These sections may relate to fonts, images, headers, sidebars, or anything else which affects horizontal page width.
These different views are known as breakpoints. Responsive breakpoints are created in CSS where you can choose to hide a sidebar after a certain width, or resize other elements on the page. When first sketching a wireframe you should imagine how your site will break down to these individual breakpoints.
Take a look at the news website for The Japan Times. At fullscreen, the website uses three columns with a very wide navigation bar. Each link has lots of padding and the headers are very clearly readable.
When resized much smaller the columns start to break down. Instead of having 3 columns side-by-side they turn into fullwidth page sections stacked on top of each other. The navigation also turns into a vertical sliding drawer menu with a much longer list of links.
The key is to plan out your ideas ahead of time. This way it’ll be much easier coding the final layout when it comes time to build the full site. Nixon Watches is another fantastic company with some brilliant design features on wider monitors. The dropdown menu incorporates many sub-menus along with extra large typography.
When resized smaller the page breaks down into horizontal sections. These are the most traditional methods for restructuring because they’ll fit onto any smartphone device with ease. Keep in mind that the goal is complete usability. The responsive layout should be malleable yet also usable from a design perspective.
Fluid Typography & Digital Media
Every website layout typically revolves around two key components: typography and media.
Page text is the usual bread and butter which you expect on every website. Media is also expected on every site, but in varying quantities. This would consist of photos, slideshows, embedded videos, or page graphics like icons.
In order to merge a single website for all screen sizes you’ll need to have fluid page content. Sometimes you can just remove excess content but this won’t always be a solution. So instead you’ll need to handle images and typography by resizing down small enough to fit into the screen, but large enough for visitors to comprehend.
J Taylor Design uses a grid-style graphic system to display recent work. When scaled down smaller the page breaks each image into a block segment. These are placed one on top of another and stream down the page vertically. Content is then arranged accordingly onto each section.
Another brilliant example can be found on the Websto homepage. There are dozens of little icons, graphics, and even background textures that repeat across the page. As the site is resized smaller the graphics resize with the page.
Repeating tiled backgrounds are scaled to fit the container, icons are scaled together, and the page text itself is squeezed down smaller. It’s a terrific example of keeping one consistent design without sacrificing many page elements in the process.
Also the Xigen Studio website has lots of background media including animated elements. These are all still fully present in the responsive layout and even run perfectly on my old iPhone 4. The embedded video content also scales naturally and will be playable on HTML5-supported mobile browsers.
The best way to handle media is to start with mobile first. Determine how the mobile layout will adapt to fit the content you need, then scale larger. It’ll make your job so much easier and the process will become less stressful.
The main website navigation is without a doubt one of the most important responsive traits. An obvious answer might be to resize link text smaller, but then it could become so small that smartphone users can’t even tap the links.
Most designers choose to go with an option where the links are resized larger but remain out of the way. Take a look at the website for Florian Wacker which only has a few links in the header. As the page gets smaller each link is kept at the same size but organized closer together.
Designers can pull off this effect when the navigation doesn’t require a huge slew of links. But more complicated layouts such as Favorido.pl choose to instead utilize the sliding drawer hamburger menu.
Smartphone users will be familiar with the hamburger menu because it’s used in hundreds of native mobile apps for Android and iOS. This technique has since been adapted for the web and caught fire with designers.
It would be a great choice for anyone who needs an easy solution for responsive users and doesn’t have a great concept in mind. Free plugins like Responsive Nav can do wonders if you learn how to implement the code properly into your layout.
Design with Consistency
When somebody accesses your website it’s generally going to be from a single device. Somebody on their iPhone isn’t likely to switch over to a desktop and resume browsing your site. But when someone grows familiar with your layout it should give off a similar vibe regardless of which breakpoint is viewed.
My absolute favorite example of this can be found on the Apple website. At fullwidth everything is exactly as you would expect. Clean, minimal, and very easy to navigate. What’s interesting is that this design style is fixed even when the site is resized down smaller.
It’s worth mentioning that Apple’s website is not truly responsive because it won’t resize on a desktop. The website doesn’t actually “resize” at all. Instead it recognizes when the user is visiting from a mobile phone and displays a completely separate layout.
This does go against the idea of responsive design where you’d build a single chunk of code that will fit any screen. But Apple’s mobile-focused layout is so representative of the original that I had to include it in this post.
So what lesson can you take away from Apple’s site? That consistency will be recognizable and helps to avoid confusion. Even though mobile responsive websites need to cut out or dramatically reduce content, they should still have the same energy as the full-sized layout.
Handling Form Inputs
Forms are not needed on every website but they are fairly common. The most general form is a simple contact form where visitors can send an email to the webmaster. HTML input fields are designed to be fully supported on touchscreen devices so there isn’t much of an overlap.
But it’s worth considering other more technical inputs like radio buttons, checkboxes, or date pickers. For example, the jQuery Mobile library has a big section of documentation outlining the various form inputs. jQM is used for creating HTML5 mobile web apps, so many of the features could be a little “overkill” for typical websites.
Just be sure to double-check your forms when designing for a responsive website. Visitors who access your site on a mobile device could also want to sign up, log in, or send you a contact message. Proper responsive design techniques will ensure that your forms work perfectly in all browsers with only one set of HTML/CSS code.
I hope these ideas can spur creative solutions for web designers who are looking to improve their responsive layouts. The merger of design trends for desktop and mobile screens has been underway for years, but only recently have designers had the tools necessary to create a seamless connection.
When crafting a new responsive layout try approaching each problem from the perspective of a typical user. This way you can gather insight towards radical solutions that work on both large monitors and minute touchscreen devices.