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.
Recent Comments