What is Mobile Friendly Design Anyway?
Whether you search the web looking for products or have a website with products of your own you may have ran across a few of the following terms. Mobile Friendly Design; a Mobile Friendly Website; Responsive Website, Fluid Design etc.
Simply put a “Mobile Friendly Website” is one that has been designed to best fit mobile devices such as smart phones and tablets while a Responsive Website is one that “responds” to the size of the viewers screen.
Without getting too technical here I’ll explain a little bit about two of these common web design elements.
Mobile Friendly Design
When you visit a website you are using a piece of software or an application called a web browser or “browser”. Your browser (app) receives information from the web page on how to display the information to you.
The web page can be designed in such a way that checks and says “hey, this person is using a smart phone, use the code that makes the page mobile friendly and ignore the code that is used for computers and larger screens.
In most cases this is the exact same page and website but it has hidden code to know what to display for you.
A mobile friendly page is generally formatted so that the page is much narrower and all information is stacked so that you can just scroll down for more information. Also the menu’s are switched to one of those three-lined icons (actually know as a hamburger button. REALLY!)
In a mobile friendly designed page some elements may not even be displayed at all for mobile users. Certain videos, images or even forms that you fill out maybe removed.
The following image is what my blog page actually looks like on a mobile device. You can see that my logo is stacked on top of my search followed by the menu and the content of the site.
As we discussed earlier you can see the menu title “Main Menu” with the “Hamburger button” to the far right. Also you should notice that the Images are made to “shrink” down to fit the width of the page.
Responsive Design
This is another common type of website design, it simply means that the website checks to see what size display you are using and “responds” with the size needed to fit the page.
As you are pretty well aware of computer screens these days come in all shapes and sizes and a good website design is one that makes the best use of the screen real estate that is has available to it.
This is generally done by using percentages for element (images, tables and such) widths instead of hard set numbers.
Of course this can be a little tricky since you have to consider using images that are large enough to resize well but also not so big in file size that is slows down page load times.
Resources
If you are a website owner you are probably thinking wow this is going to cost me a lot to make my website do this. Well truthfully it doesn’t have to. If you are using a newer website theme it may already be mobile AND Responsive friendly.
A few resources I can recommend for you are:
- Blisk Browser – This browser lets you see how your website looks on multiple devices.
- Divi Theme by Elegant Themes
- WP Touch WordPress Plugin – simply add this plugin to your site and activate and you have a mobile theme that’s served up to mobile devices. They do have a pro version of this plugin that allows more customization and themes.
Want To More?
Have questions or comments? feel free to post it in the comments section or use the contact page on this site.
