I’m making a new website. It will be blog style, but made from scratch rather than using existing templates or software (like WordPress) mainly for the sake of experimentation.
My question is, what should I do to make the site optimized for mobile devices? I’d like to optimize it with a style that’s made to fit on smaller screens, but without creating a separate page and redirecting based on the device the user is viewing on. Basically, I want to create one page of content, two stylesheets, and a surefire way of the making the appropriate stylesheet apply based on what type of device the user is viewing on.
What’s the best method of doing this?
Are you just looking for a way to detect the browser and apply the correct CSS? If that’s all, try using CSS Media Types. You could set one of your style sheets to
screenand another tohandheld:This leaves it up to the device/browser to determine which type it wants to use, as opposed to trying to force users into a certain style based on some kind of browser detection from the server.
Another benefit of this approach is if you use CSS to define a lot of your image resources (instead of
imgtags). Thehandheldstyle sheet can use fewer of those resources, so the mobile browser never even knows or cares about them.