This is Day 8 of the 10 day Build Your Website Challenge, on building a DIY mobile responsive website. If you missed Day 7, on Designing your Home Page, you can find it here.
The goal is that, by the end of 10 days, you’ll have your DIY mobile responsive website up and running!
In your Divi builder, you’ll be able to see how your page looks on tablets and phones. I have another, similar article about how to make your website mobile responsive here. Or, you can follow the Divi mobile responsiveness tutorial here.
What even is mobile responsiveness, anyway?
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.
How to use Divi for your DIY mobile responsive website:
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.
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:
Make sure to check responsiveness BEFORE copying/ pasting!
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. Learn from my mistakes, friends, and make sure to check for mobile responsiveness before you copy/ paste!
If you’re using premade layouts from Divi, those will already be mobile responsive. The developers who build them make sure to include versions formatted for desktop, tablet, and phone. However, if you’ve edited the sections at all, I’d suggest just double checking the mobile responsiveness when you’re done. Sometimes, settings can be accidentally changed. Or, your content might be longer than the original content and you might have to make adjustments. It’s always good to double check, just in case!
Tips for using Divi for your DIY Mobile Responsive Website:
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/ like.
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.
Okay, that’s it for Day 8 of the DIY Website Challenge. I hope your DIY mobile responsive website came out spectacularly! But, if you didn’t finish today, it’s okay. You can keep working on your mobile responsiveness as you go. (Or, you can hire a developer to do just that part for you – a LOT cheaper than hiring someone to do your whole site!) Tomorrow, we’ll be doing the last few steps- setting up the menu & footer!
