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 “tiller.tillerstaging.com” was the desktop site, then ”m.tiller.tillerstaging.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:
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.
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.
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.
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.
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.
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.
The importance of responsive web design
Responsive web design is a web design standard, so all modern websites should already be employing these methods to deliver optimal user experiences. It’s what enables us to enjoy seamless web experiences on our various devices without sacrificing design or usability. It’s also a critical factor for search engine optimization (SEO), as Google penalizes non-responsive websites.