Mobile responsive means that a website changes its shape and layout to fit different sizes of screens. So, a website looks a certain way on a desktop computer, because that screen is larger and more horizontal. But, when you view that same website on a tablet or phone, the dimensions of the screen will be different.
Remember in the 80s when we used to watch featured films at home on our VHS players? And at the beginning it would say that the formatting had been changed to fit your screen? It’s the same thing, just your desktop is the movie theater and then your phone and tablet are your home TV.
So yeah, this is a HUGE thing. Most websites are viewed on mobile, and that percentage is only growing larger. If your site doesn’t look good on phones and tablets, you’re going to lose customers/ clients, for sure. As a web developer, this is a huge part of my job. I often get clients asking me to make their website mobile responsive for them.
Are you panicking? Don’t. If your site is build with WordPress and Divi, this step will be relatively easy for you. Divi has the different screen sizes built in to their visual builder. So you can just click a button and see what your site would look like on a different screen.
(Not using Divi? Skip down to learn how to use Google Web Dev tools to see what your site looks like on different devices. If you can press 3 buttons on your keyboard, you can do it.)
Pssst… If you’re doing my 10 day DIY website challenge, this part happens on day 8, when we tackle making your website mobile responsive.
How to use Divi to make your website mobile responsive:
This is one of my favorite things about the Divi theme. You can check how your site looks on desktop, tablets, and phones right in the visual builder. What I usually do is build the desktop version and then check each section on tablet and phone and make the adjustments as I go. Just edit in the visual builder the same way you would normally. Divi makes it super easy to build a mobile responsive website!
Desktop version:
Tablet version:
Phone version:
Note: If you’re going to copy/ paste different modules or sections of your page as you’re building, then it makes sense to check those tablet and phone versions first, before copying them. Otherwise, you’ll have to do the same mobile edits to multiple versions of the same thing. I usually build a section, then check it on mobile first. Then, copy/ paste it to reuse and change in other sections of the website. If you’re cloning a whole page, you definitely want to make sure you check phone and tablet views first! Otherwise, you’ll end up making the same edits two times.
Tips for using Divi for Mobile Responsiveness:
Change the row sizes: I usually change the row sizes (the green handles) on the phone version. They are set automatically to 80%. However, I like to change it to 90% to take advantage of more of the space on the small screen. To do that, open the row settings and click the design tab. Go to ‘sizing,’ and then ‘width.’ Click the little phone to open the mobile settings. Make sure you’re editing on phone screen sizes only, and change it from ‘auto’ (or whatever it’s set to) to 90%. And voila, you should see the content take up more of the space on the phone screen. I usually do this to all of the rows on the whole website, for consistency.
Disable sections you don’t want: If you don’t like how a section looks on one of the screen sizes, don’t panic! It’s possible to have two completely different versions of a section (or three, even), for different screen sizes. Divi lets you disable sections (or rows or modules) specifically on desktop, tablet, or phone. So, if you have a section that you can’t make work on a smaller screen, you can just disable it for that screen size. If you still want that content, though, sometimes it’s just easier to recreate that whole section directly in the smaller screen size. I often do this with the tablet size because if you have an odd number of items in a row, it could come out unbalanced on the tablet. To do that, click on the three dots for any section, row, or module. Go down to ‘disable’ and select which screen sizes you want to disable. You can always enable things later, too! The screen sizes that are green are currently enabled, and the ones that show as red are currently disabled.
How to use Google Developer Tools to check your site for mobile responsiveness:
1. Make sure you’re using Chrome as a browser. Google DevTools only work in Chrome.
2. Go to the page you want to check. Open that page on two different tabs.
3. Use one of the tabs to edit and one of the tabs to check the mobile responsiveness.
4. On the tab where you’re checking the responsiveness, open Google Dev Tools:
Mac: Option + Command + I (the letter i)
PC: Control + Shift + I (the letter i)
5. With DevTools open, there will be a grey bar at the top of the page. You can drag the size of the web page to see how it looks on different sized screens. And, you can also change the percentage at the top. The numbers mean the zoom percentages. So, 50% means 50% of the actual size. This is also a really good way to take screenshots if you’re trying to fit more of the web page into the screenshot.
6. If you click the ‘dimensions: responsive’ tab at the top, other options will drop down, so you can see how the site looks on different devices.
7. I usually go back and forth between the two tabs. Once I make edits on one tab, then toggle over to the DevTools, hit refresh (!!) to see the changes, and then keep editing from there. I try to work my way down the page and go in sections, doing one section at a time to stay organized.
How to make a mobile responsive WordPress Menu:
Again, if you’re using Divi, this is super easy! It’s already done for you. The theme will automatically switch from the menu you built for the desktop version to a mobile version. A mobile menu is often called a ‘hamburger’ menu, because it’s just 3 stacked horizontal lines, so it looks like a hamburger. Once someone clicks on that hamburger menu, the full menu will drop down so they can choose the link they want to visit. It’s quite a clever system!
