Back in 2008, smartphones were a small market and it was commonplace for sites to be designed for a fixed width – say, 900px or 960px – with the page centered if the browser window was larger. Many designers said fluid width was better, but since user screens typically varied between 1024×768 and 1920×1080, fluid width allowed longer line length than is optimal for ease of reading, and so many sites (including Stack Exchange) use fixed width.
Now that mobile devices are common, what is the the best approach to support both desktop and mobile browsers?
- Establish a separate mobile site (e.g: mobile.example.com)
- Serve a different CSS to mobile devices; if so how? Server-side browser sniffing, or a @media rule?
- Use Javascript or something to adapt the website dynamically to the client? Should all websites be expected to be responsive?
- Some kind of fluid layout
- Something else?
1
I think the answer depends on the nature of the project you have. I had the same question yesterday and for my project the best answer was to create a different mobile website. It was however very close to add responsive css to it.
My reasons for doing another website:
1) My design was not built to be responsive. To turn it into responsive would take a while.
2) The website design was considerably different then the mobile design. It would have been a challenge to make the change, I would have to load things just for the mobile version (and hide them on the full page website) and the other way around.
3) my mobile website is a lot simpler then the full website, if I use responsive design then on the mobile website a lot more code would be loaded that would be just hidden. This will make the pages work a lot slower then on a dedicated website.
In short, I was concerned about turning the design into a responsive one and about the speed of the application on mobile devices.
To create the mobile website will not be so hard, I can reuse the same models/controllers and just change the views.
However, if my design was built to be responsive from the start then i would have probably chosen to make it responsive.
2
I agree with Mihai that you should try to create a separate mobile website instead of using responsive design. It will be fast to upload and more user friendly. I created my all mobile websites using a mobile website creator at http://www.mobilemarketingpub.com and all are working fine. I simply added a re-direct code to main website index page and a jquery file to root directory. Hope it helps!