Ask HN: make website mobile | Hacker News Reader

Ask HN: make website mobile

5 pointsschoash8 comments

What is the fastest way to make a website mobile compatible. Are there some neat libraries out there to do the heavy lifting for me?

View on HN

Well, the quickest (in terms of initial dev time), would be to just use media queries or any of the tons of grid layout libs like (http://foundation.zurb.com/) or bootstrap. This also works great for small sites, or sites where you don't really care too much about optimizing for mobile - you just want something that looks decent and works with minimal extra effort. But in the long term if the site is rather large, (in my experience) it'd be better to consider building a different app for your mobile version. This lets you filter and modify what you send over http responses for mobile (so the images are smaller, certain sql queries don't get run, etc).

This really depends on how fast you can write CSS but if you use CSS3 media queries, you can style up a mobile version of your website pretty quickly.

Media queries, if not known about already, allow you to selectively apply CSS rules based on certain properties, like device width.

I tend to just make two stylesheets, one main one and one mobile one. The main one has an attribute:

    media="screen and (min-device-width: 640px)"

and the mobile one has:

    media="screen and (max-device-width: 640px)"

Everything in the main stylesheet will be applied to devices with a width higher than 640px, the mobile one applied to every device with a width lower than.

I find styling up a mobile website quite quick, since you naturally have less on there, but I guess that really depends on your website. I usually have an 'omissions' rule, where I apply 'display: none' to a bunch of elements that I don't want to show.

The core of my experience is mainly working backwards from a fully-featured site, which can get quite hairy from site to site depending on the developers. Standards and guidelines like no-presentation-stuff-in-html and avoidance of inline styles really do come in to play here.

If you need any help, I could have a look at your site and help you work out the best way forward. Shoot me an email at me@jameswdunne.com and I'll help out. All pro bono of course :)

thanks for the offer, will get back to you, if I am in trouble.

From Responsive Design[1] to jQuery Mobile[2] you really have a lot of options. Depending on your wants/needs you will find that each has its own benefits and downfalls.

There was also a good discussion recently about Responsive Design[3]

[1] - http://en.wikipedia.org/wiki/Responsive_web_design

[2] - http://jquerymobile.com/

[3] - http://news.ycombinator.com/item?id=4570193

Start with bootstrap. http://twitter.github.com/bootstrap/

It's responsive. Meaning it will resize for mobile browsers.

The base is some non grid layout which I have to adapt to be mobile friendlier. No option for using bootstrap I am afraid.

Yeah http://www.initializr.com/ is responsive and will work great on mobile.

Here's one from Google: http://www.howtogomo.com/

Reply on news.ycombinator.com