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 :)
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:
and the mobile one has: 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 :)