1

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?

Shandar
  • 17
  • 7
  • You can use [either method](http://ux.stackexchange.com/questions/13273/responsive-web-design-vs-separate-website-for-mobile). I recommend one set of files and a [responsive design](https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design), but your decision depends on the specifics of your project. – showdev Feb 19 '15 at 20:15

4 Answers4

1

I recommend that you use one file set with a responsive design. there are different ways to do this.

1) You can use bootstrap for that.

2) What I sometime do is that i use the css @media. Take for that a look at this link.

Vinc199789
  • 1,046
  • 1
  • 10
  • 31
1

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.

Akhil Namboothiri
  • 184
  • 2
  • 13
0

Both you can make one file launch another, or have one big monster file.

How to detect Safari, Chrome, IE, Firefox and Opera browser?

But I think this might be more of what your looking for.

Community
  • 1
  • 1
Jonathan Walling
  • 1
  • 1
0

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.

user6545390
  • 11
  • 1