Reputation: 17

Mobile friendly website

I am a web developer and do not have any experience with developing mobile friendly websites.

When we are developing a mobile friendly website, do we need to create separate files for mobile version? Or can we use same files that we created for desktop version?

Upvotes: 1

Answers (4)

user6545390

Reputation: 11

This is how I did it. It could fit only my design. My pages look like a blog page. The DIV floating left is the main content. Then I follow it with small DIV boxes for ads. The main DIV is 40em wide. And has side margins 4em each. That totals 48em = 768 device pixels.

So, I added the following meta instruction to every page:

    <meta content="width=768" name="viewport">

That nicely gets the page on the smartphone, except the text is too small. The ads slide down to the bottom. Next, I went to my CSS file. There, I format my regular text with 'para' class:

.para {font-size:1.2em;line-height:140%;font-family:arial,helvetica,sans-serif;color:#333}
@media only screen and (max-width: 768px) {.para{font-size:2em;}}

The upper line is for PCs and the @media one is for phones. Notice that I increased the text size to 2em for the screen just 768px wide.

This all passes Google Mobile Friendly test. You can view-source my web site: Read source-code of this and test it here.

NOTE: I keep changing my work. This site might be gone in few days.

Good luck.

Upvotes: 0

Akhil Namboothiri

Reputation: 184

If you are going to develop a big site like flipkart, ebay or facebook, then its better you do separate mobile version, because such type of websites will take more time to load in mobiles. You need to display only relevant content in mobiles.

If its a simple website, better use Bootstrap.

Upvotes: 1