Convert Website to Mobile Friendly Design – Responsive Mobile Website

Here is a quick post for the folks that are looking for solutions on the internet to create a mobile friendly website. I have created mobile websites in the past for my clients but after I redesigned FMR Web Design Boca Raton I did not get a chance to create a mobile website. So today I sat down and surfed the net to see what are the latest technologies and trends being used on the net. My main concerns were:

  1. Easy to Manage
  2. Search Engine Friendly
  3. Easy and Fast Development

So after reading a few posts I came to a conclusion that I will not create a separate mobile website. If you are interested in what made me change my mind, please read this posts:

http://www.seomoz.org/blog/seo-of-responsive-web-design

The points that I was sold on were:

I create links to only one page, which is shown to all desktop, tablet and mobile users.
Very easy to develop, it took me about 30-40 mins to convert my design to the mobile friendly version.
And I don’t need to worry about updating two versions of my webpages which is pretty awesome.
So how I did this? See the code below:

/*-------------Mobile-------------*/

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) 
{
.header p.logo {width: 200px;height: 70px;padding: 0;margin: 0;background: url('/images/fmr2.jpg') no-repeat;}
.header p.logo a,.slideshow,#social {display:none;}
.phone a{color:#fff;font-size:1.4em;}
.header, .main {padding: 0 20px;}
.main, .header {width:auto;}
.main .left,.main .right {width:auto;float:none;}
.mainnav {clear:both;float:none;padding-bottom:50px;width:auto;}
.mainnav a:link {font-size:1.6em;}
.mainnav ul {position: inherit;width:auto;}
.title {float:none;}
}

/*-------------Mobile-------------*/

I added the above code to my existing website CSS and got myself a different version to show the mobile users. It basically checks for the device width and applies the css rules; hide a few elements, change widths, margins and paddings. Pretty Simple, right!? So you would create something similar for your website and that's it!

Benefits of a Mobile Friendly Website:

The biggest benefit of converting your website design to mobile/tablet design is that people that land on your website will be able to easily access and read through your website. Your regular website might have some large images and multiple column design that is hard to read on a mobile. So by converting your website your visitors will not see those images and layout spread over multiple columns.
Another reason is that Google takes into account that how long a user stayed on the website. If a user lands on your website and leaves it immediately because they cannot read or access the information they were looking for, this will raise a red flag that this website does not support mobile users. Google’ algorithm for ranking websites has changed drastically, it’s main focus in 2013 is on the “user”, so create your websites for the user, not for the search engines which is a big change compared to Google’s old algorithm. So convert your design so its easy to access for mobile users.
In case you need help with converting your existing website to a mobile friendly website, please contact me.

Leave a Reply

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