facebooktwitteryoutube
Blogging Career Online marketing Social Media Technology Web Hosting WordPress
in WordPress - 26 Jun, 2015
by Quamarul Islam Manna - no comments
A beginner’s guide to Mobile-Friendly web design

Suppose you are visiting a website from your mobile device acheter de la viagra. The website you have just entered is showing you a page where you are not able to read anything because everything is coming as smaller to you. Now you have to use zoom view and scroll left to right and top to bottom to see the content. What’s your feeling? Good or bad?

featured-mobile-friendly-01

Nobody wants to zoom and scroll to view website content like this way. It’s tedious. So a new form to design websites has been stated. This is Mobile-Friendly design that helps you to display your site nicely on desktop, notebook, tablet and all types and sizes of mobile screen.

Mobile-Friendly design is a way that’s not only helping you to engage mobile users but also help you to get better rankings on Google and other search engines. Millions of smart phone users are only visit Mobile-Friendly websites regularly using their devices. So it’s time to make your own website Mobile-Friendly.

Table of Contents:

What is Mobile-Friendly design?

Mobile-Friendly web design refers to the way to design a website that is looking beautiful and easy from mobile phones as well as desktop. This process can give a user a better experience on reading, navigation of your website. A Mobile-Friendly website automatically migrates to fit the device (Smart Phones, Tablets, Desktops or others) you are viewing it on.

Why Mobile-Friendly design is important?

  • To get regular visitors: Do you use Google Analytics or any other analytic program to track your visitors? If so, then you should know that most of your visitors are viewing your site from their mobile devices. If you site is not Mobile-Friendly, then you will lose these visitors. Because, when a visitor from mobile cannot navigate your site easily, he will not come again to visit you.
  • To follow Google’s policy: Google has made a change into their new policy where you must have to design your website Mobile-Friendly. If you don’t do this, you may lose your Google ranking in search results.
  • To decrease your cost: If you plan to build to different websites for desktops and mobiles, it will be more costly for you. You should agree with the line that, single site costs lower that two. Sites differently designed for desktop and mobile can get traffic. But they will not be counted along. They are coming from different websites and they are different.

How to design Mobile-Friendly sites?

There are too many ways to design your website Mobile-Friendly. But only basic ways will be shown here for the beginner’s.

  • Using HTML/CSS: If you have basic knowledge on HTML and CSS then you can try this method. In this method, you have to include the following <meta> tag into your webpage.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Now go to your CSS file and search for the width of your body. Set the body as –

body{

– – – -;

– – – -;

– – – -;

width: 100%;

}

[N.B: It will not make your page 100% Mobile-Friendly. It will only give you a better view of you site without zooming.]

  • WordPress Plugin: If you use WordPress, there are a few great plugins for you to make you site Mobile-Friendly just by one click! Let me write down few names –
  1. JetPack
  2. WPtouch
  3. WordPress Mobile Pack

How to test Mobile-Friendly Design?

You have got the basic knowledge and I think you have already done things for your site. Now it’s time to test your site if it’s Mobile-Friendly or not. This is a beginner’s guide so I’m going to show the easiest way here.

Step – 1: Go to Google’s official Mobile-Friendly test tool at Mobile-Friendly Test.

google-mobile-friendly-test-link

Step – 2: Enter you webpage URL at analyzing text box.

Analyze-1

Step – 3: Click on the Analyze button.

Analyze-2

Step – 4: Get the result.

Mobile-Friendly-Result

I’ve already declared that, this guide is only for the beginner’s. It’s not useful to the advance learners. If you want to get the advance guide, please subscribe to newsletter.

Quamarul Islam Manna is a freelance writer, blogger and web designer.

Leave a Reply