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.