Best font size for your mobile devices

New story

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.

 

Making a Slider for Mobile Devices

Divi Mobile Slider

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.

  1. Images should be around 300px X 90px. Make sure all images are the same size.
  2. Put in your full width row and add the gallery module.
  3. In the row settings make sure to pick the background color to match your site.
  4. Pick your images for the gallery.
  5. In the Gallery module settings use option slider not grid.
  6. In the Gallery module settings under advanced set the automatic animation ON and 3000 as the speed.
  7. Under the gallery module add a module and use the code module.
  8. Place this code in the code module.

<style>.et-pb-arrow-prev {
display: none !important;
}
.et-pb-arrow-next {
display: none !important;
}
.et-pb-controllers {
display: none !important;
}
.et_post_gallery {
pointer-events: none !important;
}
.mfp-bottom-bar {
display: none !important;
}
</style>

The above code makes it a true slider by hiding the arrows, description, pagination and making it NON-clickable.

One last helpful thing is hide the row on tablets and desktops, so it only shows on mobile.

Hope this will be helpful to some of ya’s. Enjoy.

Add Bottom Action Buttons to your Mobile Site

Updated info from previous post

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.

New Mobile Section Pack in Elegant Marketplace Here.

New Mobile Section Pack in Elegant Marketplace Here.

Add a Section just for Mobile

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%.

Adding a section just for mobile devices.