Responsive Website Design
Ever notice website content that looks great on your desktop but is lousy on your phone? For example, the multi-column desktop layout with big images may not display well on smaller screens. And Google could post a more significant problem because they like fast-loading, mobile-friendly websites. Slow-loading pages will increase your bounce rates and conversion. When people spend seconds on your pages, Google notices and is less likely to send new traffic your way.
Responsive web design scales your content so it adapts to different screen sizes. For example, your multi-column desktop layout needs to become a single smartphone-friendly column. Responsive design improves user experience (UX) on many devices, including desktop computers, laptops, pads, and phones.
Adaptive versus Responsive
A long time ago, in a land now far away, so call it more than ten years, we designed "adaptive" websites. We used code to read what kind of browser was requesting our sites, and we'd send a static version designed to fit. Adaptive web design was possible when there was a limited number of screen sizes and resolutions. Likely but not optimal because managing multiple static sites in our frenzied content marketing time is impossible. The Cloud-to=Cloud backups we set up for some customers create complete copies every few minutes.
Responsive web design uses cascading style sheets and HTML so you can use one content management system (CMS) to seamlessly and instantly adapt images, copy, and graphics to your viewer's screen size.
Responsive is Beyond Crucial
Here are a few numbers to illustrate why responsive web design is so important.
-
Business & Brand Credibility
75% of your customers judge your business and brands based on your website's design, and you never get a second chance to make a good company, brand, and product impression on phones, pads, laptops, or desktop computers.
-
Mobile Should Be Better
85% of your customers think your mobile website should be at least as good or better than what they see on their laptops or desktop computers.
-
Trustworthy
94% of your customers say they trust websites with good designs more.
-
Mobile Only
25% of your and potential North American customers only use their phones to access the Internet, and we're betting that number will pick up a few points every year for the next ten years.
If your website isn't fast, secure, and responsive, customers won't convert, Google will punish you, and you won't get the G. I. Joe with Kung Fu grip for your son this holiday season. We design responsive websites with a few easy-to-steal tricks once you've learned the basics.
Responsive Web Design Basics - HTML & CSS
Cascading Style Sheets (CSS) and Hyper Text Markup Language (HTML) is responsive web design's left and right hand. HTML "tags" provide your web page's structure and content. This paragraph started with an
This section started with a headline tag we made bold by using the strong tag. We could use CSS to define our headline three tag as bold but using CSS would make that change universal (to some degree), so we added boldness manually.
As this example suggests, CSS controls how your content appears. With CSS, it's easy to adjust colors, fonts, design blocks, and just about any design element, you want to specify or change. CSS files, linked in the unseen portion of web pages called the HEAD, can be seen using "view source" or developer tools.
Since style and designs may need to vary by webpage and viewing screens, most websites link more than a single CSS file to take advantage of another powerful CSS tool - media queries. Media queries, arguably the most essential responsive design CSS feature, create different settings based on screen sizes. For example, media queries use "breakpoints" to set how a design looks on phones, pads, laptops, and desktop computers based on each screen's maximum width.
Breakpoints use screen widths to trigger new styles. Media queries adapt your website's appearance while controlling interactive elements, but media queries aren't the only way to scale your content based on viewing screen sizes.
With a media query, you set breakpoints where you will adjust the style settings for the same layout across the desktop site, tablet version, and mobile screens alike. These breakpoints specify where new rules are applied. Using media queries, you can adapt the appearance of your site and control interactive elements specific to screen resolutions.
Other Responsive Design Options
Fluid layouts, grids, and flexbox are other flexible grid layout options that help reduce the number of media queries because these alternatives are also responsive to screen sizes.
-
Fluid Layout
Fluid layouts use flexible values that adjust based on factors such as viewport widths. Instead of set measurements such as 600px fluid layouts, use VH, VW, and % of a parent element. Laying out elements with percentage values instead of static values allows more flexibility for mobile screens. Fluid values work best when combined with other responsive design elements.
-
Grids
Grids are the columns and rows you'd expect, but when combined with media queries, it's possible to adjust the grid layout and design with a few lines of code. Grids powered by media queries are more manageable than trying to adapt or scale content exclusively with CSS.
-
Flexbox
Flexbox wraps components in containers using the "display: flex" CSS attribute. These flexible containers dynamically adjust based on available space - a handy tool when designing mobile websites. The three items in a Flexbox container will expand or contract to fit the space.
Component-Driven Design: Fonts and Images
Creating flexible designs needs adjustable components. Your website's voice expressed in copy is why visitors become customers. What and how you share your company, brand, and product stories matters, as we outlined in our content marketing page.
Hard to convert visitors into customers if they can't read your shared stories. That's why we recommend 16px as the smallest font size, and your text should adapt to screen sizes and user requirements expressed in their accessibility options. Accessibility is increasingly important as millions of baby boomers retire, and accessibility lawsuits invade our increasingly digital world. That's why WTE partners with and highly recommends AccessiBe, an easy way to ensure your website meets accessibility requirements in your state. In addition, using relative unit sizes for your fonts creates consistent readability across screen sizes.
EM and REM are the way to express relative font sizes. Relativity, in this instance, explains how "children" are comparable to a "parental" setting. If 1EM is the "parent" and 3EM is the "child" setting for your H1 headline, then the font size for your headline will be three times as big as the parent set. REM's relativity is set based on HTML instead of establishing a parent. Both EM and REM are responsive.
Want to keep Google happy? The answer to that question should always be a firm YES, so your images, graphics, and videos need to adjust based on screen size. Large images that look great on laptop and desktop computers can lack detail or look confusing on smaller screens.
Images displayed on small screens don't need high resolution to look good. So why carry the longer page load times such resolution requires? We use a combination of CSS, PICTURE, IMG, and SRCSET HTML tags to swap larger laptop and desktop images for smaller mobile photos, graphics, and videos. Looking at this page with a small screen shows three people looking at smartphones as the "hero" image (the top and usually the most prominent image on a page is called the hero) instead of the six you'll see on larger screens.
Use Google's Page Speed Insights tool to check your website's responsiveness, mobile friendliness, and page load speeds.