Creating a Mobile Friendly Website

Is your website mobile friendly?

Being competitive in todays market requires your website to be mobile friendly. Many times you will hear the term responsive, mobile and responsive are interchangable terms when it comes to websites. You can test your website by going to to Googles Mobile Testing website: https://search.google.com/test/mobile-friendly. This simple test allows you to have feedback from Google on what they see on your website. If you do have errors, save the feedback that Google listed so that you can start to correct the issues.

One common issue for a website is a piece of missing code that is positioned in the head of your website:
< meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to render your website to the width of the device that is opening it up. Another common problem in Wordpress or other preformatted website creators is the theme is not mobile capable. In this case you have a few options. One is to pick a new theme. Second is to make the website mobile capable through changing the styling, which sometimes can be as easy as adjusting the css page, of the website. Third option is ignore the issue, not recommended.

If your website is not a Wordpress or other out of the box website and needs to be mobile friendly then it will need to be examined to see if the current website is formatted in a way to make it able to be mobile friendly. Older wesbites may be coded with such complicated tables and spans that create such a mess if modified it may be time to just reformat the whole website. Sometimes creating a new website and moving over the content to the new website will be the faster and better option. Typically the new website will have advances in code procedures and allow the website to perform better. One thing to look for is code in the css pages in your files, typically named style.css, like this:
@media screen and (max-width:730px) {
    #mobile{margin:auto; width:90%; height:auto; text-align:center; }
}
What this is telling the browser to do is look at the screen size, in this case screens equal to or smaller than 730px wide. Change the css formatting for the assigned id's and classes. If you have some of these things in your code than you have some responsive formatting. Maybe you just need more added to become more responsive.

Last updated: 20 March 2020