Whether you search the web looking for products or have a website with products of your own, you may have run 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 viewer’s screen. Without getting too technical, 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 menus are switched to one of those three-lined icons (actually known 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 can be filled out may be removed.
The image on page 5 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
Responsive design simply means that the website checks to see what size display you are using and “responds” with the size needed to fit the page.
These days, computer screens come in all shapes and sizes and a good website design is one that makes the best use of the screen real estate that it 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
As a website owner, you may be a bit overwhelmed and feel this is going to cost a lot of money to make your 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 recommend are:
Blisk Browser—This browser lets you see how your website looks on multiple devices.
Pageable by Pageable.com
Divi Theme by Elegant Themes
Beaver Builder by Fastline Media
Elementor by Elementor LTD.
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.
