What is responsive web design?

What is responsive web design?

Responsive Web Design (RWD) is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.In short, responsive web design makes your web page look good on all types of devices and screen sizes, ranging from a mobile phone to a giant LCD screen.Content, design and performance are necessary across all the devices to ensure consumer satisfaction.

A site designed with responsive web design adapts the layout to the viewing environment by using fluid content and flexible images. Responsive web design has gained importance off late due to high amount of web traffic coming in from mobile and tablet devices.

Features/Benefits

  • Compatibility with all types of devices and screen sizes.
  • Better consumer experience on various devices.
  • Increased web traffic due to visitors from other devices which eventually leads to increased site popularity.
  • Single website design for all kinds of devices which reduces efforts on the part of the designer.

Tips for designing a good responsive website

  • Minimize content wherever required to fit into smaller sized devices. Consider the mobile site as an independent standalone website different from its desktop version, and publish concise, to the point content accordingly for better mobile experience.
  • Prioritize and hide contents behind trappable areas to make the website experience better and pleasant to see.
  • Use appropriate Scalable Vector Graphics (SVG’s) – images that are infinitely scalable unlike regular image files(JPEG and PNG), to make sure your icons remain sharp and high quality irrespective of the device it is being used in.
  • Design larger buttons and clickable areas so as to compensate the difference between being clicked by both a mouse cursor as well as a human finger.
  • Use responsive images to be used in various devices rather than using the same image across all screen sizes. This can drastically increase surfing speed and enhance user experience.
  • Optimize font sizes and spacing so that they are legible on smaller screen devices. Use appropriate font styles to increase legibility. Decorative or curvy fonts are often difficult to read on smaller screens.

Choosing the best company for RWD

  • Check out company’s own website on different devices. It would give you a fair amount of idea on their expertise and experience in responsive web designing.
  • Go through their portfolio and browse through the websites they have designed on different devices.
  • Check for client reviews and customer satisfaction.
  • Choose a company promising long term technical support and web hosting services for the website.

Start With a Mobile First Approach

You should build the mobile site first, and then scale up and build the tablet and desktop designs of the website. One of the major concerns for all three (mobile, tablet and desktop) is the logo and/or text. If the text is easy to read on the mobile device, then you should not have any issues with the desktop or tablet.

Make Proper Planning of Content

Content planning is always the top priority for designing responsive website. Building a responsive web design is the perfect time to make the website content more readable and accessible, regardless of what device it is being viewed on. You should map out the order that the content of website should appear on each page at the smallest browser width.

Build the Layout of Your Site First

I recommend you to build the entire layout of the interface before doing coding. In this way, you will have the website-look that your client wants. While building a mobile site layout, one important consideration is to make the buttons large enough for a fingertip. Another consideration is to keep the website design simple and functional. I’ve seen many designers to add too much to a mobile interface, but it is not required as it can cause many design and usability problems.

Say ‘NO’ to Navigation Menus

As responsive websites target smaller screens (smartphones or tablets), it is always recommended to hide the main navigation menu. In its place, you can choose combining an icon and text for indicating the user about the menu. You can either include a simple drop-down menu which slides down or an overlay technique where the menu expands and covers the entire screen. If your website contains only 2-3 navigational menus, you can include these in a simple menu on the screen. If there are more than 3 elements, you can consider creating a single icon that opens into a drop down menu.

Try to Use Many Software Programs

For building a complex web design, you should use custom programs and code for each site individually. Using a template with WordPress will not be enough for building complex web design. For example, if your layout is fairly straightforward you can use a template such as ‘Moboom’, but for a complex layout you should use programs such as a standalone program such as GoMobi for the mobile layout and Adobe Dreamweaver for the desktop.

Breakpoints

A common designing idea is that breakpoints should be based on common screen sizes (tablet, mobile, and desktop). However, by developing for specific device resolutions, we are not fully accepting the potential of responsive design, which is centered on flexibility, fluidity, and adaptability. It is a good idea to take a device agnostic approach and set breakpoints according to the content of site. You should explore your design so as to find the points where it naturally breaks down.

Create Optimized Images

For building responsive design layouts, you should create optimized images for each layout. In this way, you can reduce bandwidth and scaling issues. Try to use GIF, JPEG, and PNG-8 file formats. You should never use PNG, as it can bloat your files sizes by 5 to 10 times.

You should try to use exact measurements with images (i.e. 500x350px at 100ppi) and set image dimensions to match. It will eliminate scaling and will also preserve the quality and resolution of website images. If your images scale this could cause resolution and color depth and problems.

The Need for Speed

Slow loading time is one of the drawbacks of responsive web design. A recent study shows that the 48% of responsive websites load anywhere from 4-8 seconds. This length of loading time was acceptable in 1997, but in 2015, 64% of smartphone users expect a website to load in under 4 seconds.

One of the main reasons behind a slow website is non-optimized images. You should quickly scale down hefty images with efficient tools like TinyPNG and Adaptive Images. In addition to this, you should get rid of excessive elements, not only for to enhance user experience, but also for site’s speed. Too many elements weigh down website and make your website unpleasant to look at. For this matter, you can use program for compression like GZIP.

Make it Readable

Do not make the readers pinch-to-zoom or squint to read, therefore, make the text size large enough to read from a smaller screen. A text size of 16 px, 1 em, or 12 pt is recommended. For designing headlines, you can use a tool like fit text to create responsive text.

Design for Screen Orientation

According to statistics, landscape orientation is used by 59% people whereas portrait orientation is used by 41% people. You should design your website to look good on both of these orientations, but pay more attention to landscape orientation. You should make sure that your images are not stretched in this orientation.

Wrapping Up

Responsive design of website makes it easier for all the users to view your site no matter what device they use. Creating enticing responsive web designs requires an extensive amount of efforts and time. If you use above ten easy-to-follow techniques for creating responsive web designs, I am sure you can easily make a perfect responsive website. If you know some other best practices that websites should follow, you can share with us in the comment box.

Content Priority

This first consideration is less a design thing than a planning thing, but it’s super important for the designer. At Spark box, we religiously map out the order that the content should appear on each page when at the smallest browser width. We call this the Content Priority. It’s helpful for the designer as it allows us to make informed decisions and helps us know where content should go if we decide to have content side by side on desktop width for example.

Think About How Things Respond

Okay, captain obvious, thanks for the tip! Seriously though, if you’re designing at desktop width and in a creative zone (or in a hurry), it’s easy to overlook how groupings of content collapse down at smaller viewport widths. Hopefully you know where the content should go at these smaller widths (Content Priority FTW).

The other day, I designed a module to a website that had text on the left and an image on the right. Both these elements were contained inside a white box, and the photo was cropped on the top, left, and bottom. Even though the photo had a white background, a shadow bled off the top and created an issue when, at smaller viewports, it appeared below the text. There was an abrupt transition below the text to the image when my plan was to have the white bleed into the photo. Completely missed it until we got into dev, which leads us to the next point…

Where does it break?

Inevitably, there are going to be things that you either don’t anticipate or don’t know how to handle when content is displayed in smaller viewports. That’s okay. In fact, I’ve found it’s often better to leave as much of this as possible for the browser because A) things appear very different when viewed and interacted with in the browser and B) it allows our frontend developers to make some design decisions and come up with something maybe I wouldn’t have thought of.

For us, a lot of design of the sites we build happens in the browser, by seeing when the design breaks down and addressing those elements when that happens. Often, we’re asked about what breakpoints to use, but with new devices being released so frequently, it makes sense to create breakpoints when needed as the design requires it. It’s like Stephen Hay said, “it doesn’t matter how many pixels it is or how many ems it is. Where it breaks, that’s your breakpoint. Hence the name ‘breakpoint’.”

Reuse of Styles

This is one I often struggle with. As a designer who’s not building production code, it’s easy to crank along in Photoshop or Sketch and create tons of variations on styles. For example, I tend to create many different shades of gray to achieve just the look that’s right. Well, this drives devs crazy because in actuality, we could probably use just a few to achieve a great design with far less budget impact.

Source Order

This is one I often struggle with. As a designer who’s not building production code, it’s easy to crank along in Photoshop or Sketch and create tons of variations on styles. For example, I tend to create maThis is one I often struggle with. As a designer who’s not building production code, it’s easy to crank along in Photoshop or Sketch and create tons of variations on styles. For example, I tend to create many different shades of gray to achieve just the look that’s right. Well, this drives devs crazy because in actuality, we could probably use just a few to achieve a great design with far less budget impact.ny different shades of gray to achieve just the look that’s right. Well, this drives devs crazy because in actuality, we could probably use just a few to achieve a great design with far less budget impact.

Performance

This is a hot topic now in responsive web design. One of the “knocks” on responsive web design is that it performs poorly and drives up load time. We believe that it’s not an issue of responsive web design, but the lack of making effort to address the true problems when building a site. Designers love to load the page with beautiful, full-width photos and videos, which can be great. Just make sure to keep performance in mind and keep the lines of communication open with the rest of the team.

Navigation

We spend a lot of time working on site navigation. There’s a lot to consider here: What kind of trigger will be used to open the nav at small viewport widths? The hamburger icon? Something else? If it’s a multi-level navigation, designing expandable menus for mobile devices is an art form in itself. Make sure to know how users want to navigate and where you or your client want to drive traffic as that could–and should–play an important part in how the navigation is designed. For example, is the desire for the user to drill down into the menu as deep as possible, or is there a desire for the user to hit a “parent” level page that has content or products that will help the user navigate?

JavaScript fallbacks

We all love beautiful transitions and animations that make websites a joy to experience. I believe these are important, and often necessary, polish items that can give context to the user when the navigation opens or content is revealed. However, keep in mind that you should implement fallbacks for those users with java script turned off. I’ve seen a few examples of this where main navigation wouldn’t work with java script off, which is obviously a bad thing.

Typography

There’s much attention that needs to be paid to typography as the view port width changes. Type sizes, line lengths, paragraph spacing, and margins all may need to be adjusted. Headlines re flow and may need to be re-evaluated at various widths. Spacing between content sections may need to be emphasized more at smaller widths. It makes most sense to tweak this in browser as you can test typography on actual devices.