Building a Mobile-Friendly Site

Watch This Lesson

Lesson Overview

In this lesson, we’ll learn How to Build a Responsive, Mobile-Friendly Site as well as:

1. What are the benefits of mobile-friendliness?
2. Mobile site vs mobile app vs responsive web design?
3. What responsive design tools are in your browser?
4. How does Divi enable responsive web design?

Lesson Transcription

Welcome! I’m Leighton, your webmaster. Today, we’re going to make our website mobile-friendly! How important is mobile? Well, have you ever visited a website on your smartphone? More importantly, when you do browse the Web on your phone, have you ever come across a website that clearly wasn’t made for the small screen? Perhaps you had to zoom in just to read… things were difficult to tap on… You tapped the wrong thing then had to keep tapping the back button! These pain points cause frustration, and frustrated visitors rarely become customers. And speaking of customers, about half of all online shopping is done on mobile devices, so yes, it is wise and economical to support mobile. In business terms, when you are trying to sell a mobile site to a potential client, you could say… it’ll pay for itself! Sell benefits! Not facts! I repeat, sell benefits, not facts! 

So you want a mobile-friendly site, but how do you go about building one? Well, it needs to be optimized for that small screen. For example… would a hiker wear flip flops on a trail? I sure hope not! Those are perfect for the beach, but for hiking, you take the shoes that have been “optimized” for that activity! The ones that are most “friendly” to your feet.  In a similar way, to “optimize” your website, you want to make sure it’s “friendly” to all sorts of devices. Desktops. Tablets. Smartphones. Each needing a design tailored to the appropriate screen size. We accomplish that with what’s called “responsive web design.” Before we dive into our website, let’s define a few key terms:

• Native Mobile App: Often confused with a mobile site, native mobile apps are the apps you download in the App Store or Play Store. We are NOT referring to those in this course. Those are created with separate tools and coding languages that are, in my opinion, more difficult to learn than building a website.
• Mobile-Friendly Site: This is the buzzword Google uses. A mobile-friendly website is one that is friendly to the mobile devices. Mobile-friendliness can be achieved by having a separate mobile site or by using responsive web design.
• Mobile Site: A separate website specifically designed for the smaller screens. It is typically accessed with a separate URL, sometimes by adding “m.” before the domain name, like m.facebook.com. We’re seeing less of these lately with the rise of responsive web design. With a separate mobile site, you have to update content on both your desktop site and mobile site, which can be an extra hassle.
• Responsive Web Design: This is where your website is designed to respond to any screen size. You don’t have a separate mobile site. You only have 1 website to upkeep. Google’s own developer resource says, “Google recommends Responsive Web Design because it’s the easiest design pattern to implement and maintain.” This is the gold-standard technique you will use to build mobile-friendly websites.

With all that clear in our mind, let’s start designing a mobile-friendly site!

DEMONSTRATE RESPONSIVE WEB DESIGN

DEMONSTRATE DIVI’S MOBILE TOOLS

RECAP: What have we learned? 1) Mobile-friendliness is required for a successful website. 2) Responsive web design ensures websites are optimized for all screen sizes. 3) Divi’s built-in tools let you fine-tune your designs to fit all standard screen sizes.

By now, you’ve seen how to design web pages, but how do you know what to build? You start with a blank slate… where do you go from there? That’s what we’ll consider in the next lesson.

I’m Leighton, and now you know… how to build a mobile-friendly website!

Lesson Homework

Check out your website on your smartphone. Optimize it to your liking within Divi. Play around with Chrome’s Developer Tools to see how responsive design works on various websites.