How I made mobile version of website >> Convert website to mobile version in 3 steps

X

Convert website to mobile version in 3 steps


0

If you will try to open any non-mobile friendly website in your mobile, the mobile browser by default opens it exactly as your laptop or computer does e.g. for this website it would show the navigation bar on left, the right ads bar on right and content in middle. The browser does its best not to change the layout of the website. The problem is content is compressed and reader has to pinch to zoom in / out.

Before talking how you can convert website to mobile version, few assumptions and facts.

  1. Do not expect it to be your mobile app. Mobile apps are programs made for different purpose. This tutorial simply makes your blog / website content readily readable to viewers
  2. For simplicity, I am only detailing minimum things to get it working. You are free to experiment for more advanced features.
  3. You need to know basics of CSS, to alter your website design conditionally (details later)
  4. Each website layout is different, understand the idea for converting website to mobile version and apply accordingly.
How to convert website to mobile
  1. Add "viewport" meta tag to your website
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> With "viewport" meta tag, mobile browser tries to fit the content exactly to screen width and re-flows the text accordingly. So add the viewport metatag to all pages of your website or website template. In Google terms Using the meta viewport value width=device-width instructs the page to match the screen's width in device independent pixels. This allows the page to re-flow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

    Some browsers will keep the page's width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute initial-scale=1 instructs browsers to establish a 1:1 relationship between CSS pixels and device independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.
  2. Modify your CSS with "@media" query
    Adding the viewport meta-tag may result differently for each website and its effect on my website can be seen in below image as the browser tries to fit the content to max width of the device and content becomes more prominent. Since the layout of each website is different a universal CSS is beyond the scope of this article but the idea is to control the layout conditionally for different screen size e.g. to bring content to the top and everything else either hidden or shown below it. The required CSS which suited me was @media(min-width:200px){....CSS Layout for mobile layout....}
    @media(min-width:700px){....CSS Layout for desktop / non-mobile layout....}
    Remember to keep CSS media queries in that particular order (200 before 700)! This conditionally defines a particular layout for screen size of 200px to 700px and another layout for screen size of 700px and more.

    To keep things simple, in my layout for mobile device, I shifted both navigation and ads column below the content and gave the content column full 100% width for best viewing (Content column floated left, other columns floated right and it worked !)
  3. Final Touchup - Header and Advertisements
    Most website have a header with website logo on top, linking to home page. They may additionally have a leaderboard advertisement adjacent to website logo. Accepted standard is to remove complete header and place a text link on top, I avoided it ! I conditionally reduced the logo height and completely removed the top advertisement for better user experience and saving on mobile data usage. My modified CSS became@media(min-width:200px)
    {#header img{height:30px;} #topad{display:none;} .. more CSS layout for mobile ..}
    The biggest problem in mobile version of website are the advertisement !
    With Google Adsense you can switch to Responsive Adsense Code but other Ad service like CHITIKA etc still do not support it completely ! Relevant CSS for Google Responsive Ads as below<style>
    .responsive-logo-ads { width: 234px; height: 60px; }
    @media(min-width: 590px) { .responsive-top { display:none; } }
    @media(min-width: 600px) { .responsive-top { width: 468px; height: 60px; } }
    @media(min-width: 800px) { .responsive-top { width: 728px; height: 90px; } }
    </style>
    In theory this works, practically it doesn't. I found out later thatIf you place your responsive ad code within a parent container that doesn't have an explicit width set, for example, within a floating element, then our ad code won't be able to calculate the required size for the responsive ad unit. In this case, you'll need to modify your code and use CSS media queries to set the size of the parent container.So remember to enclose Adsense ads in a "div" and define its width properly. This is easily said and may not be possible every time !
For me, hiding the Navigation menu on left / right and showing only when clicked / dragged is not preferable for 3 reasons
  1. Some navigation menu gets really long (Sorry I do not want to hide these options either)
  2. Navigation menu at bottom, requires few more scroll, compared to one extra click for opening a navigation tab (To me, 1st option wins)
  3. Hiding navigation menu would require Javascript or more complex CSS.
Designing has never been my cup of tea and for sure this tutorial to convert website to mobile version is not comprehensive, but it works for me perfectly and hopefully helps you to make mobile version of your website too.  Convert website to mobile version in 3 steps  

Rishi Kashyap | 5 years ago | EDIT



    YOU MAY ALSO LIKE