When I think of responsive web design I think of Transformers: Websites in Disguise. With one set of code you can build a website layout that runs flexibly from desktop to mobile. But instead of fighting off Decepticons we’re fighting an even worse antagonist known as bad design.
Responsive web design is still a fairly new concept which has grown in popularity because it fills a void. Back when CRTs were crushing our desks and cryptic dial-up tones connected us to cyberspace it was a pleasure just to access the Internet. Design was important but didn’t have a prodigious overzealous support group.
Nowadays there are dozens of monitor resolutions including tablets and smartphones. Web designers have adjusted to this new environment by creating responsive websites using layouts that rearrange to fit any screen size. I’ve organized this guide with helpful tips, codes, plugins, and design examples to better explain responsive web design. This article should provide a large swath of information beneficial to anyone new or well-versed in responsive techniques. You’ll also find plenty of great ideas to inspire that next creative project.
How To Build Responsively
I’ll be focusing primarily on design and won’t go into much detail about the development process. However I want to provide a quick overview for those who don’t know much about responsive design or the terminology. Responsive web design(or RWD) might be compared to liquid/fluid layouts but with more functionality.
CSS includes a new at-rule written like @media. This is often used to separate CSS stylesheets for different mediums like screen and print. But it can also be used to create media queries which only become active once certain criteria have been met. So for example you can write blocks of CSS that only execute once a browser window is less than 700px wide.
In regards to responsive design this allows developers to dynamically manage sections of the webpage. If the navigation is too wide and breaks into two lines at 660px you can resize the nav links to be smaller at that exact point. This point is called a breakpoint and most responsive websites have at least two or three of them.
Anything that can be styled with CSS can be updated with a media query. This is the foundation of responsive design and it allows web developers to create a single layout that naturally adapts to every screen.
As we delve further into the sea of responsive trends you’ll have plenty of those rewarding “ah-ha!” moments. I want to first explore some good and bad examples to show what makes a great responsive interface while also demonstrating what to avoid. Then we’ll get into specific UI trends followed by a panoply of helpful resources.
Trends & Best Practices
With such a large topic it’s difficult to break everything down into a small checklist. Ideally the best responsive websites focus on the user experience relative to content. This doesn’t mean you should completely wipe a page or sacrifice important bits of content – that’s simply disingenuous.
The best responsive websites I’ve seen really cater to a good user experience on smaller screens. If you feel a site cannot live up to this achievement consider building a separate mobile layout instead of a single responsive design. You’ll notice that responsive design isn’t meant to replace mobile websites but instead provide an alternative. Apple uses a separate mobile layout for smartphones with a semi-flexible layout for desktops and laptops.
Visitors using a smartphone do not have much control over the interaction. It’s all touch-based and this means a good responsive website should be accessible and readable even on a tiny display. This often means adjusting or removing extra content like sidebars and overly-large photo slideshows.
As a designer you’ll find yourself thrust into a balancing act of maintaining enough pertinent content to keep the user interested but still removing or rearranging enough content to streamline the browsing experience. Mobile phone users expect a somewhat downscaled experience – just make sure it’s an experience that still works.
One of my favorite examples is the website for Comedy Central. The fullsize layout is beautiful with vibrant contrast, lots of content, easy navigation, and plenty of rhythm. As the window becomes smaller navigation links transition into a hidden sliding menu while adjusting the page content accordingly.
I like Comedy Central as an example because their site requires a lot of content. It’s a big cable network and for such a professional company their site is still fun and effective. Portraying the energy of a website while still keeping it responsive and functional is a tough part of the creative process – but it’s the best way to describe high-quality responsive design.
Each responsive website is meant to please you. Actually not just you, but everyone! This is tough because everyone is online through separate devices of varying screen widths. Unfortunately you can’t please all of the people all of the time, but you can sure as hell try!
The Japan Times is a large online magazine with news published every day. As you can imagine it would be difficult to remove content when it’s practically overflowing from the server. The fullscreen layout uses 3 columns which gradually drop down beneath one another on smaller screens. Visitors still have access to every news post although it might require a bit of scrolling.
Also notice how the navigation turns into a sliding menu. The mobile sliding navigation actually has more links than the desktop navigation. This design style is much more beneficial to mobile users who are limited to fingertip interactions and don’t want to spend 5 minutes flicking the screen.
But not every site you design is going to require buckets of content. When putting together a simpler website it’s better to latch onto that simplicity and see where it takes you. Smaller screens have different requirements for a good experience – larger text, more whitespace, natural hierarchy, clean navigation and greater touch compatibility.
The website for Academy of Realist Art has a very specific goal of conveying information to each visitor. People on the site are usually looking for details about the program or related info. The white background makes for a crisp contrast against darker text and photos. On tablets and smartphones this contrast is even more important to reduce strain on the eyeballs.
Each website has a different set of traits and it’s crucial to play with these traits. Figure out the goal of each website and keep this as the primary focus. Your responsive design should cater towards this goal with the best possible user experience.
In contrast to the more simplistic layouts Paid to Exist uses textures, input fields, bright icons and plenty of page copy. It’s important to note that the responsive homepage doesn’t sacrifice much in the way of content. Icons are moved around and some elements are shortened but overall it’s structured in a very systematic way.
The best responsive websites build individual concepts for individual screens. This usually happens during the wireframing stage where you can plan how elements will rearrange to still be accessible. Desktops and laptops have more leeway to include bright graphics and flashy effects. Smaller screens need more direct focus and accessibility.
Play to the strengths of each screen resolution and you’ll at least please some of the people all of the time.
Great responsive design is created with a straightforward, usable interface. Bad responsive design is often created by tunnel vision focusing on the complete opposite of those concepts like unnecessary graphics, animations, or just treating the website like a full-sized layout. Each of the following examples demonstrates a poor quality of responsive design that just frosts my weenie on the wrong side of the skillet.
Risotteria Melotti is a restaurant page that uses a custom scrollbar and lots of dynamic animation. Sometimes this can be good and other times, specifically this time, it can be annoying. Mobile users with browsers that support CSS3/jQuery can still see all of these animations but they’re not as impressive.
The navigation is also annoying because it uses a fullscreen display, but the links are not sized to be fullscreen. So the text is difficult to tap and the links seem more flashy than usable. Overindulging with dynamic content is a great way to overcomplicate a layout. Responsive design is already so complicated that it really doesn’t need fancy gimmicks – save that for the desktop monitors.
The personal site for Lorenzo Bocchi is actually quite well designed. My problem with the smaller responsive layout is that it’s not uniform at all. When opening the menu it’ll switch the close button over to the other side. It’s a fun little game of Where’s Waldo just to open and close the navigation. Also clicking between portfolio items is difficult because the navigation is completely removed from those inner pages – so you need to go back home just to browse further.
The one word I’d use to describe this type of layout is nonuniform. Things are not where you expect them to be and the interface does not behave in the way you’d expect it to. Great responsive design is consistent and almost visceral in that you just instinctively know how to use the interface. Bad responsive design is confusing, unintuitive, and leaves you delirious searching for a glass of wine(or whiskey).
My last example is Fringe Development which admittedly has a pretty nice design. My problem is the strange breakpoints that change up the layout and page structure. The navigation is originally vertical but changes to horizontal at a certain point. Makes sense for smaller screens, but eventually it turns into a hidden menu which only takes up half the page when opened. If the screen is already small why not make those links bigger and easier to click?
I also find the portfolio page to be confusing on both mobile and desktop monitors. In my opinion this would be an example of design taking precedence over content. The aesthetics are very pleasing but I find the layout to be incongruent and slightly difficult to maneuver on a smartphone.
The gist here is to avoid surprises – especially annoying ones. It may seem dull but the best responsive websites are cool, collected, predictable, and great conversationalists at parties. They get along with everyone. Content is very important but how users interact with the content is sometimes even more important.
With that said let’s move onto some more specific RWD trends. The field of web design is always evolving but core fundamental ideas remain rigid. Understanding why these ideas work can help you expand upon them to craft beautiful responsive layouts.
People can’t surf the seven Internet seas without some type of navigation. This topic includes so many different options because every website is different. Some designs require 5 or 6 pages while others need 50 or more. The style of responsive navigation typically reflects the requisite of detailed content.
Let’s start with a common choice using the hamburger sliding menu. South East Water uses this effect once the layout resizes beyond a certain point. Their navigation doesn’t require too many links so the hidden menu isn’t overflowing with pages. Since the menu is hidden and slides out from off the page this navigation is also called a sliding drawer.
While some people think sliding drawer menus aren’t useful there is another group of people who feel the complete opposite. We’re in a dawning age of mobile UI design and there are only so many options at the moment. If a site can truly benefit from the sliding drawer navigation and it works on all devices then I’d say this is your #1 best choice.
If we’re talking about hidden menus there is another choice aside from horizontal sliding panes. The layout for Tilde uses a top navigation with links placed side-by-side. After a certain width the links become hidden and will reappear in a vertical list after tapping the menu button. It’s an alternative to sliding drawers and typically works best with fewer links.
Some designers will shift the navigation to vertical without the use of a toggle button. This would create a top-down vertical navigation displayed at the top of every page. The links are easy to tap but they can also get in the way. I see this technique used a lot and it’s one of the more popular solutions.
In the realm of menu adjustments you could go the route of Sweet Hat Club and simply reorganize the navigation. Their site uses a wide horizontal menu that squeezes smaller as the viewport decreases. Some of the links get removed on very small screens but this technique doesn’t require you to change the menu in any way.
Websites that use only 5 or 6 links can typically get away with this responsive technique. Simply plan a method to fit all those links into a rectangular area that’s still tappable on a smartphone screen. Your own creative ingenuity might prove quite surprising.
Although perhaps not the most interesting choice, it can work if the website footer is relatively flexible. It’s another trend that I don’t find too often but it does cater towards the user experience. Certainly not for every website but worth storing in the old responsive toolbelt.
Horizontal to Vertical
As you might expect just by the screen structure, monitors tend to be more horizontal while smartphones are more vertical. Obviously there is landscape mode for tablets and smartphones but the layout itself just resizes to fit a more horizontal composition.
A beautiful example can be found in the navigation of Dorigati. For larger resolutions the menu is full-width and gradually squeezes inward. After a certain point the horizontal header switches into a vertical sidebar with the logo and navigation elements completely relocated.
This might seem like it breaks my initial suggestion of consistency. But in this case I have no problem locating the menu after the responsive breakpoint. It’s still easy to maneuver and once it turns vertical the page is consistent with this new layout.
When speaking generally this horizontal/vertical switch doesn’t always pertain to a certain piece of the layout. It’s crucial to think about all the different experiences and plan for them. The smallest devices you’ll have to deal with are smartphones in portrait view. If your layout runs smooth in this tiny environment then it should work great in larger environments too.
Structuring a responsive layout will be different every time. The common denominator always revolves around the focus of a website. Which pieces of content are more like appetizers rather than part of the main course? This might include sidebar widgets or internal content like image rotators or article comments.
The layout for StopPress casts a wide net of interesting news stories. It uses 3 sidebars with one for the logo/nav and two others for extra stuff. Once the layout is resized smaller the logo & navigation will move up to the top for more space. Then one-by-one the sidebars get picked off like unsuspecting teens in a prototypical horror film.
Using CSS3 media queries you can force page elements to be hidden from view with the display property. All of the HTML is still visible within the source code but it won’t display to the viewer beyond a certain breakpoint. For content-heavy websites this is often a good solution to achieve direct focus onto the really important stuff.
Momentum is a design studio which uses many of the same techniques I’ve previously mentioned. Their homepage features a large image which gets hidden on mobile devices since it doesn’t pertain directly to the content. Also the navigation is moved from the header down into the footer with much bigger links.
Like all of the ideas mentioned in this post, content structure will behave differently for each website. A content-heavy magazine like Polygon has to make a lot more changes compared to a smaller event website like dConstruct. The best way to come up with ideas is to put yourself in the shoes of a typical user. Imagine how you would expect the website to behave and think about which content would be the most important.
Generic forms of digital media hold a reserved table at the content awards ceremony. While a website could be created using only textual content, we don’t live in the dark times anymore. We have DSL and fiber-optics that support large data transfers of image and video content.
When it comes to responsive design you don’t always need to remove these elements. It all depends on the significance and the likelihood that media can benefit the content. A great responsive website handles digital media in the right way.
Golden Isles uses a large image rotator on the homepage which is removed beyond a certain threshold. There’s also an interactive map which gets hidden in place of thumbnails. Visitors on a tablet might still get the full desktop effect, but smartphone users are given a much more compact experience.
The dynamic content has been removed because it serves no purpose on a tiny screen the size of an ice cream sandwich. But the content is still digestible and translates well into the smaller layout.
The homepage for United Pixel Workers is an interesting one that uses a grid-style image display. The fullscreen display features a gallery of products like hats and t-shirts. As the browser window shrinks the grid layout becomes smaller with fewer columns. Most of the thumbnails retain their size but drop onto a new row.
Thumbnailing and grid design is perfect for responsive layouts. Large fullwidth images can resize and still look good if the width-to-height ratio is natural compared with other content.
Landing pages make up the majority of single page designs although there are many other categories like personal sites, events, or informative pages. All of these ideas work in single page layouts because there isn’t always a need for multiple pages. This type of layout might include a small navigation to help users transition between page sections but you can wave goodbye to HTTP requests and excessive load times.
In fact single-page designs should almost always be completely responsive because they’re meant to be viewed in one sitting. Without the worry of multi-page navigation users can maintain awkward eye contact directly with their glowing display. For example the homepage for Rest is just a product pitch. It has lots of copy with large text and some graphics to demonstrate the item.
Scannr is very similar but instead of marketing a physical product the page is marketing a digital product. Landing pages get the most out of responsive traits because a conversion might come from anywhere. Even if the visitor doesn’t buy your product they might sign up for the newsletter. Create a user experience that caters to every resolution because you never know who’s accessing your website.
Take a look at the ZZPager website that uses dynamic scrolling as part of its layout. The site actually pitches a service to freelancers who need a website of the same style. The dynamic scrolling feature automatically pans down as you click each arrow. There’s no need for a full navigation but this provides an intermediary instead of constant swiping.
Single page designs have an easier transition from fullscreen to mobile. Wireframing is the best method for planning each individual section of the page and how content should transition based on device width. Just be sure to follow the same rules of consistency and managing a usable interface in conjunction with readable content.
Here are a couple more options when considering your responsive designs:
A mobile website is similar to a regular website and can be accessed with the help of different browsers, the only difference being it is created for small-screen devices. Mobile sites are optimized for on-the-go users, contain limited (or rather, necessary) content and are lighter and faster than responsive websites. m.yahoo.com, for example, is nearly 3 times lighter (Webpage Size Checker) and 4 times faster (GoMoMeter) than bostonglobe.com.
Native Mobile Apps
Native apps are apps designed for mobile users, usually downloaded from a marketplace such as Google Play. There is a different native app for different platforms, requiring a new set of coding for each platform.
As you may know, Facebook turned its back on the build-once-and-deploy-anywhere method (HTML5) and switched its iPhone app to native. Result: the social media giant finally got that long-sought nod from the users.
These three technologies, responsive, mobile, and native, will help you gain a mobile presence for your business but each of them has its own advantages and disadvantages. Getting to know each of them deeply is a good idea for making an informed choice.
Responsive Web Design vs. Mobile Sites
When comparing these two, you really need to keep in mind as to what the purpose of the site is going to be. If it is a website aimed at providing its users a mobile experience which involves quick decisions and buying and selling, then a separate mobile site scores better on the charts. However, if you need to constantly add and update it with new trends, then a single responsive design site is a better option. This is because, when it comes to easy updating, mobile sites can be a pain because the site would need to be updated twice (desktop version and mobile version).
Also, it depends on what your budget is when you are planning to create a site. A mobile site requires low development charges compared to responsive design sites which need sophisticated coding and heavy technicalities. Other advantages that a separate mobile site holds over responsive design sites include DIY options and affordable web development. When it comes to optimization and SEO, and adding conversion and redirect codes, responsive design websites rule the roost.
Mobile Sites vs. Native Mobile Apps
Similar criteria as to what the aim of your site is, is needed when trying to compare mobile sites and native mobile apps. If your site is related to marketing and needs a wider reach, greater compatibility with browsers and devices and constant updating, than a mobile site will work better for you. However, if your site needs to interact with the users on a personal basis with a requirement of accessing the personal phone data, then a native app is a better idea.
Mobile sites are also a good option if you want your site to be easily accessible and shareable, and you want people to find it very easily. This is because mobile sites are easy to search and can be easily found through any browser. If your company is creating and promoting games, or your services involve reporting and calculations, then a native app works for you better. The area in which native apps are ahead include their ability to work even when there is no internet connection while the mobile sites cannot function in such a scenario. Native apps lag behind when it comes to the budget as they require a high development cost for creating a different set of various devices whereas mobile sites require a relatively low budget.
Responsive Web Design vs. Native Mobile Apps
Looking at the pros of responsive design compared to native apps is a good idea when comparing these two, as you have read about the pros of a native web app above. One advantage that responsive sites hold over the native apps is that there is no need for it to be downloaded from app stores and thus, doesn’t wait for its approval. Also, this makes the job of the user easier as now he or she doesn’t need to update the information again and again. All you need to do is update it once on your main website and the work is done.
The next advantage that a responsive website holds over native apps is the fact that there is cross-platform compatibility and content updates are driven by a Content Management System. The areas where a responsive site lags behind are similar to the mobile sites which include inability to work without an internet connection and a relatively low quality of user experience compared to native apps. One point that needs to be noted here is that both the options need a strong budget.
The above comparison clearly shows that there are pros and cons to each of the three choices that you have to create a mobile presence for your site. It depends on you and the nature of your business as to what would be the best fit for your situation. It’s better to research well and understand your own business for best results.
Frameworks & Plugins
A big piece of modern web development is the open source community. Free code sharing websites have become a central hub for swapping ideas much like Wall Street. But unlike most day traders there is no greed or Scrooge McDuck-style vaults. Developers want to share free plugins to help others and to improve the code within a collaborative environment.
This collection of free plugins and frameworks encompass a wide variety of responsive techniques. You’ll find sliding panels, hamburger menus, modal windows, slideshows, and other similar features. Best of all these are free to use in any project as many times as needed.
Free Code Snippets
Aside from pre-built code libraries you can also find lots of code snippets written by adventurous developers. Cloud-based webapps have become a playground for precocious young enthusiastic coders who wish to test out new ideas. Most public code repos are free for anyone to fork and edit on their own, or copy into a separate project.
Below I’ve put together a series of free code samples related to responsive layouts, images, and navigation. These codes are not fully supported by the author and do not include custom options like a plugin. But these snippets are easy to edit and copy/paste into projects to learn how the codes operate on a live website.
Responsive Design Tutorials
While many developers are happy using pre-built solutions they don’t really teach how everything works. Thankfully there are some great tutorials online which cover the development process for building responsive page elements.
What responsive design article would be complete without a dedicated inspiration gallery? Responsive interfaces can be useful whether you’re just dipping a toe into the responsive swimming pool or have already been immersed and done a few cannonballs. There’s always more to learn and it may seem intimidating at first – but once you get into the pool it’s a great temperature and there’s so much to explore.
I hope these layouts can offer a glimpse into the detailed and sometimes hectic world of responsive design. You learn a lot through practice but also through careful study and attention to detail. Pay attention to the many unique traits of these layouts and how you might apply similar faculties into your own design work.