News for hackers. Stuff that matters.

Ask HN: make website mobile

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?
( 8 comments | 5 points | on HN )
Re:Ask HN: make website mobile by jfaucett on Saturday October 06, 2012 @06:44PM (#4621999)
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).
Re:Ask HN: make website mobile by jwdunne on Saturday October 06, 2012 @06:36PM (#4621971)
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 [email protected] and I'll help out. All pro bono of course :)

Re:Ask HN: make website mobile by schoash on Sunday October 07, 2012 @04:15PM (#4624312)
thanks for the offer, will get back to you, if I am in trouble.
Re:Ask HN: make website mobile by projectmeshnet on Saturday October 06, 2012 @06:25PM (#4621948)
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

Re:Ask HN: make website mobile by ovechtrick on Saturday October 06, 2012 @06:23PM (#4621942)
Start with bootstrap. http://twitter.github.com/bootstrap/

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

Re:Ask HN: make website mobile by schoash on Sunday October 07, 2012 @04:16PM (#4624314)
The base is some non grid layout which I have to adapt to be mobile friendlier. No option for using bootstrap I am afraid.
Re:Ask HN: make website mobile by asselinpaul on Saturday October 06, 2012 @06:51PM (#4622018)
Yeah http://www.initializr.com/ is responsive and will work great on mobile.
Re:Ask HN: make website mobile by dcpdx on Saturday October 06, 2012 @08:23PM (#4622202)
Here's one from Google: http://www.howtogomo.com/