A lot of questions come in from people trying to get the text on their mobile site to look just right. Divi makes this really easy for end users because of the appearance controls for varying devices.
Lets get right to the point; a font size of 16 is best all around and here are some standard practices we do on our mobile sites.
Along with the font size of 16 we do not use H1, H2, H3, H4 font sizes. We will use the font size of 16 and make it bold or use a font size of 18-22 for a header text.
Keep in mind that mobile visitors to your site are looking for information quickly and interaction, not the eye candy of your site. So keep it simple with a simple easy to navigate and easy to read mobile site. Your visitors will love you for it.
Under divi customizer you can set font size under mobile styles. Setting this to 16 will help you a lot with this default setting.
The logo for most companies or individuals is the centerpiece of their product or identity. When landing on a mobile site, the logo on most responsive sites ends up being small or squished onto the screen. Divi does ok with the logo on mobile if you get it setup precisely, but there is a simple way to have the logo pop on mobile devices.
First off lets just focus on getting your logo to pop on your landing page. Chances are you can link to your responsive pages from there.
Create a standard section, make the row one column and add an image module.
Within the row settings, make sure to turn on full width under the design area.
Right click the section and tell it to disable on tablet and desktops.
Mobile should be call to action, so a need for a menu / navigation via mobile on your home page is not needed, but just in case you want a navigation menu add this step.
Add a full width section under the section you just created and add the navigation menu module.
Select your menu
Right click the section and tell it to disable on tablet and desktops.
You can add this CSS to your Divi Theme options global CSS.
Once in a while when I make a full site or just the mobile, I like to have a slider just for the mobile site. Usually with rounded corners and the image will be around 300 px x 90 px. I also have used images with just text with a transparent background to have a few impact statements shown. The slider module itself is ok, but I have found the gallery module works best. There are a few steps, but will try and list them all here. No global CSS is requited with makes it nice. Be sure to follow us on facebook and if you want a true mobile web app section for yourself or a client, send us a message.
Images should be around 300px X 90px. Make sure all images are the same size.
Put in your full width row and add the gallery module.
In the row settings make sure to pick the background color to match your site.
Pick your images for the gallery.
In the Gallery module settings use option slider not grid.
In the Gallery module settings under advanced set the automatic animation ON and 3000 as the speed.
Under the gallery module add a module and use the code module.
Divi makes it so easy to deliver a great mobile, interactive experience so why not add some extra flare with bottom action buttons. Why are they so efficient? If you think about how people hold their smartphone: most times using a thumb to touch a button is easy. Bottom navigation on a mobile site really allows the user quick and easy navigation. Responsive sites can be a scroll to the bottom race, but with a static bottom action bar, you keep important call to action points front and center… well front and bottom.
What can you put in your bottom action bar?
Directions
Social Media
Gallery
Buy Now
Contact Us
Tap to Call
These are just a few, but using an action bar to the bottom of you mobile site is a win win for you as a developer and your customer.
Creating a section in Divi just for mobile devices is a great way to go. Below are some images that shows some comparable information and a video below walking people through adding a section just for mobile within Divi.
A mobile site does not have to deliver less content, but the content delivered should be mobile friendly. Part of the friendliness is not having a page load that is large and not having the end user scroll 20 inches down a screen to look for information. Could be just a mobile home page that links to the sites responsive pages. Take a look at the page sizes below.
Page load speed is also very important for the mobile user. Google set a benchmark of 3 seconds load time or less. Anything more than that could result in the visitor leaving the site. Below I added load times for a dedicated mobile view and responsive view. Both are below 3 seconds which is great but page size, requests and load time is quite different.
When people visit a site from their mobile device they are usually looking for just a few things. Phone number, contact us, services, business hours and if it is a restaurant include the food menu to that. Does responsive offer that, kinda yes. Does it deliver it with an interactive experience for the mobile user? Not really. With Divi you can just add a section dedicated to a mobile layout and not do a mdot or any redirect at all. Why not give the end user a tap to call, tap for directions and other info right on the screen of the mobile device? Interaction is key and a truer mobile look, offers that. You can run speed tests and google mobile friendly tests and get verying results, but always make sure that mobile friendliness is near or around 100%.
Recent Comments