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.
Tips for designing a good responsive website
Choosing the best company for RWD
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.
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.
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.
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.
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.
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.
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?
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.
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.