Read
3-Click Rule
What is the 3-click rule and what is its origin? Learn more about this myth and the studies that challenge the 3-click rule.
Glossary Design, SEO
Responsive Web Design
What is responsive web design?
Responsive web design is a method that uses coding strategies to optimize a website’s layout for viewing on various devices (desktop, tablet, and mobile).
Responsive web design
Today, 50% of internet traffic comes from mobile. Web users expect the mobile browsing experience to be just as good (if not better) than the browsing experience on desktop. Responsive web design makes this possible.
Prior to responsive web design, which first entered the web in 2010, a website was created to be viewed on desktop, and if a mobile version was needed, it was created as an entirely different website with a unique URL. For example, if “tillerdigital.com” was the desktop site, then ”m.tillerdigital.com” would have been the mobile site.
Responsive web design effectively eliminated the need for mobile-only websites by allowing developers to code a website in such a way that the layout would automatically adjust to the screen size a user was viewing it on.
Components of responsive web design
Developers create responsive web design using six key components:
Viewport
The viewport is the viewing area of a screen. So a mobile device has a smaller viewport than a tablet or laptop. Developers use a snippet of code called a meta viewport tag to direct the browser to adjust layout dimensions and scaling based on the detected width of the screen. Without a meta viewport tag, a web page could appear too big or too small for the screen you are viewing it on.
Flexible layout
A flexible layout is a layout that is coded with CSS, where grids are defined with percentages rather than pixels. As the viewport size (screen size) changes, the flexible layout enables content spacing to adjust automatically to the width of the screen. For example, as you slowly shrink a browser window, you may notice that three columns of text collapse into two. Or, a large banner image that’s visible on desktop turns into a small image next to a headline on mobile. Flexible layouts preserve content hierarchy and visual aesthetics to ensure a consistently high-quality experience on all devices.
Without a flexible layout, a user would have to use a horizontal scroll to see a full page of content on a mobile device.
Media queries
A media query is a snippet of code used to apply a specific design style to a specific viewport size. So, if a device has a viewport size of X, then X layout is applied. Media queries can be used to adjust the application of dimension, orientation, aspect ratio, hovering, resolution, and more.
Typography
Each size of device has unique text requirements. If text content appeared the same on desktop as on mobile, we would have to squint or zoom in to read it. Content should always be easily scannable and digestible, so large text blocks should be avoided. Responsive web design optimizes font size and the breakdown of written content depending on the device, eliminating the need for horizontal scroll or zoom.
Flexible images
A flexible image is one that scales with the layout. This is accomplished by setting the maximum width of an image at 100% of the viewport width. So as the viewport width increases or decreases, the image adjusts, but never exceeds the width of the screen.
Breakpoints
A breakpoint is a set point where page layout automatically adjusts for a new viewport size (e.g. common desktop, tablet, or mobile viewport sizes). You can experiment with this by shrinking your browser window on desktop and observing the point where two text columns collapse into one. The point at which content snaps to a new layout is a breakpoint.
How responsive web design works
Desktop
On a full-screen desktop layout, there’s significant room on the screen to show design elements. You can display a large element to catch the user’s eye, and include other elements (copy, illustrations, etc.) to continue to draw the user through the experience.
Tablet
A tablet screen has less physical space. With responsive design, the design elements dynamically stack on top of each other, still keeping the hierarchical priority of the elements we see in a desktop layout. They also retain their general relative size on the screen.
Mobile
On a mobile device, each individual design element stacks in a single column, which allows the user to scroll and experience the content in the same natural order as it is presented on tablet and desktop.
The benefits of responsive design
Standard practice
Responsive web design is now a design standard. It’s fully supported by all web browsers so all modern websites should be responsive.
Design thinking
We now have a better understanding of how humans interact with and consume content. A design thinking methodology delivers a natural, intuitive experience on each device.
Optimized user experience
Responsively designed sites make it easy for your users to access content without awkward scrolling or hunting around for the information they need.
Search engine optimization
Search engine algorithms will now penalize websites that are not responsive or mobile-friendly. Your site needs to be seamless across screens and devices for ranking purposes.
Simple management
With responsive web design, you only have to manage one site. There’s no longer a site for each device. Anytime you change content in the CMS it will update for all users on all devices.
The risks of non-responsive web design
People now routinely move from their mobile phones to tablets to desktops and back. A website that can’t offer a high-quality experience on all devices is going to frustrate users and ultimately drive away prospects.
Negative SEO impact
Google penalizes non-responsive websites, automatically putting your business at a critical disadvantage for search.
Negative user impact
More than 50% of B2B search queries are made on mobile. In other words, if users can’t engage with your business on their smartphones, you’ll miss out on half of the opportunities.
Loss of revenue
If users can’t find your website or they have a poor experience and bounce, you’re ultimately losing out on potential revenue for your business.
Did you know?
47.96% of internet traffic now comes from mobile devices. Globally, mobile traffic will increase seven-fold between now and 2022. This means mobile-first design will become increasingly critical.