OpenCart – Mobile Ready Web Text

In my web design experience it is now more than ever critical that you design your Opencart store to be MOBILE READY. In today’s day and age it seems that everyone is always on their mobile phone and more people are surfing the web from mobile devices.  This obviously creates a need for your website to show up in good form on your users mobile device as well as the web. Surprisingly, if you start off with this mentality and create your website from the beginning with this in mind then you will find that there isn’t a ton of work to do to abide by the mobile browsing rules. This article will be a lot about what “not” to do as well. Opencart out of the box is just fine on mobile phones but we are going to take it and make it even better. What do I mean by this?  Example: have you ever had to take your fingers and expand the view on a mobile web page just to be able to read the text or see the images? We’re going to try and cut down on that completely by making your website what is called “responsive”.

For sake of simplicity I am going to show you an example of how you can use CSS to make the elements on your web page responsive so that they always appear in good standing on a users mobile phone.  For this demo we are going to focus on text/font for your web page.

Making Web Text Responsive

The problem with pixels

Oliver Reichenstein stated a long time ago: “The Web is 95% Typography”, but it’s taken a good few years for people to get on board with the idea. Content and users; they are our priorities as web designers, and typographic design helps us meet those priorities.

Browsers display body copy at a default size. On desktops this is generally 16px, mobile browsers vary. Users can change this default, depending on what they prefer. Preventing the user from tailoring their own reading experience, ultimately making the content less accessible.

Lesson one is in handing power back to the user. Don’t prevent users from setting their own type size, but make sure you begin on a level playing field. Set your base font to 100% of the browser default:

demystifying-ems-font-size-100

Use EM’s

An em is a unit of measurement. Just like pixels, ems can determine the size of elements on a web page. Unlike pixels, which are absolute, ems are relative to their parent’s font size, which is where a lot of confusion lies.

1em is equal to the inherited font size. If the font size of a <div> is set to 16px, 1em within that <div> is equivalent to 16px. If the font size of that <div> changes to 20px, 1em within that <div> is equivalent to 20px.

Ems get their name from printing. Precisely when the term was first used is unclear, but as the uppercase M (pronounced emm) most closely represents the square printing block on which printing letters were placed, it came to lend its name to the measurement. Whatever the point size of the font in question, the block of the uppercase M would define the Em.

Conversion from a pixel

demystifying-ems-equation

Be careful with cascading and EM’s as well. Make sure to define your EM’s early on and don’t go crazy. Here are some basic web tags that you should set, converted from Pixels to EM’s.

demystifying-ems-modular-scale-ems demystifying-ems-modular-scale-pixelsdemystifying-ems-modular-scale-ems

Now when a user goes to your website on a mobile phone they are a LOT more likely to see a font the size it is supposed to be rather than having to zoom in with their fingers.

Looking for quality OpenCart Web Hosting? Look no further than Arvixe Web Hosting!

 

Tags: , , , , , , , , , , , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *


4 − = 1

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>