

Ask HN: make website mobile - schoash

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?
======
jfaucett
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).

------
jwdunne
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 :)

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

------
projectmeshnet
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>

------
ovechtrick
Start with bootstrap. <http://twitter.github.com/bootstrap/>

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

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

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

------
dcpdx
Here's one from Google: <http://www.howtogomo.com/>

