Let's talk about your project. Contact Our Team!

Web Design

responsive web design photo by fauxels from Pexels

With more web traffic coming from phones and pads than laptops and desktop computers, designing responsive websites and content to win customers' hearts and minds on any device matters more than ever. Responsive web design, creating sites easy to read and interact with on any screen, has become more than using Cascading Style Sheets (CSS) to fit content to a viewing screen. Instead, we design websites and CSS rules, so your content looks great on every screen.

For example, creating different hero image sizes or images and then using CSS to be sure the best image for each screen is what appears. We extend responsive web design with Mobile First Content Marketing (MFCM). Find more tips on MFCM on our Content Marketing page.


Responsive Websites

responsive web design example image

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. 

Responsive Examples

responsive web design examples mashup image inspired by Faith& Sermon Series by Andrew Nolan for Malley Design on Dribble

Wired

Wired magazine provides a masterclass in responsive design. Large screens see a three column Wired Magazine design featuring Today's Picks  in the left and middle columns with Most Recent in the right column. Smaller screens see Wired's Long Reads in a single column stacked format. Long Read thumbnail images expand to match the hero in the single mobile column. Instead of switching out the larger three column image below we'll leave so small screen readers can see how confusing large images look on small screens.

wired three column large screen view image

Wired Magazine 3 Column design for larger screens.

services-wired-mobile-480-(2).png

Wired Magazine single column for small screens skipping to Long Reads.

We don't know why Wired eliminates Today's Picks, Most Recent, Trending Stories in favor of Longer Reads on our small iPhone, but that scripted choice to start with Long Reads is a great example of responsive web and content design.

Other examples of responsive web design done right include:

  • Dropbox

  • Slack

  • Dribble

Responsive Design 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. 

Mobile First Content

What is Mobile First Content Markting?

Mobile First Content Marketing recognizes the importance of creating content for small screens and how that critical recognition changes the content we create by screen size, as the Wired Magazine example illustrates. As you might expect, there are two methods to create responsive web and content designs.

We still start our responsive website designs with large screen multi-column layouts, always keeping in mind the single-column stack we'll need for small screens and the content, image, text, and style changes required as the screen size shrinks. Others start with small screens and work up. 

Here are our Content Marketing First guidelines.

  • Social Media & Websites
    Social media platforms such as Facebook, Instagram, and LinkedIn are marketing channels designed for smartphones and pads, and those same platforms are potential website and content awareness helpers, but don't over-sell or under-promote your owned media, your websites. 

  • Short & Exciting
    We try to write our content in 500-word segments. However, when an article such as Start with Why exceeds five hundred words, we use accordions or linked pages to break the content up. Nothing puts off mobile visitors more than opening a mobile website to see thousands of words of boring content. Accordion menus like the one you clicked on to read Mobile First Content give readers control over what they read, making your content less boring and your website more personal. 

  • Responsive Hero Images
    Pete LePage explains responsive images on Web.dev (linked in Resources at the bottom of the page), and Rebeka Costa shows examples of inspiring hero images on Justinmind.com (Resources). We recommend keeping hero images simple in color and pattern to look good on all screens.

  • Pictures
    Online pictures can be worth thousands of words, so tell stories with your photos whenever possible. Keep the visitors' eye rule in mind. The Visitors' Eye Rule says your visitors' eyes follow where people on your website look. That's why Valentin Broeksmit is looking left in the Wired example to direct large-screen visitors' eyes toward Today's Picks. We also like the "welcome" image of a person looking directly at the viewer. 

  • Video
    We recommend working with WTE partner Brightcove to host most of your website's videos because using Brightcove or another video host retains control when using YouTube, Vimeo, or other shared channels. 

Google Analytics indicates that most WTE.net viewers, more than 80%, use laptops and desktop computers to view our website. You might think we wouldn't care about Mobile First Content Marketing (MFCM) with so little mobile traffic. However, there are three reasons MFCM matters to our content and should influence how you create your responsive web design and content marketing.

  • Searchers
    Many potential WTE Solutions customers search for content with phones and pads to decide what to read on their laptops or desktop computers.

  • Customers
    Mobile traffic and conversions on many of WTE's customers' websites already exceed fifty percent, so creating Mobile First Content Marketing guidelines helps existing and new customers.

  • Mobile and Social Media Inevitability 
    Tough mudders," where people run under barbed wire, through mud and cold, are designed with smartphones and social media shares in mind. These and other cult-like popular events understand an essential digital marketing truth - today's customers are searching for exciting and shareable experiences, and everything is an app, so the more social, engaging, and shareable your content and responsive website are, the better.

Resources

Responsive Websites

We're sending big thanks to Jay Eckert. Jay's brilliant, insightful, and explanatory articles on Parachute teach valuable lessons during every reading. We reread Jay's Responsive Web Design Best Practices to see how a master explains responsive web design.

Stats
75% create company impressions based on website
85% think your mobile website should be as least as good or better than larger screen site. 
94% trust websites with better designs more. 

Responsive Examples

Responsive examples inspired by Faith& Sermon Series by Andrew Nolan for Malley Design on Dribble.

Wired Magazine
DropBox
Dribble
Slack

 

WTE Magazines

WTE on Flipboard
WTE on Flipboard
WTE Ecosystem Magazine
WTE Ecosystem Magazine
Techno Magazine
Techno Magazine