Hari's Corner

Humour, comics, tech, law, software, reviews, essays, articles and HOWTOs intermingled with random philosophy now and then

Simple technique to make your site mobile-friendly

Filed under: Tutorials and HOWTOs by Hari
Posted on Fri, Apr 13, 2012 at 16:44 IST (last updated: Sun, Apr 29, 2012 @ 07:34 IST)

If you have a complex CSS website and simply want a non-CSS version of your website to display readable text by default when you're viewing from a mobile device, or at least a device with a small screen, here's a simple, optionally two-step formula to make that site very friendly to read via a mobile browser (most likely a smartphone browser). I don't guarantee that this trick might work with older mobile browsers but it does work on Android and mobile browsers that support CSS media queries.

Here's the technique I've used to make this site mobile-friendly (by which I mean, non-CSS version): in the style sheet, simply wrap around the entire style with the following: 

@media only screen and (min-device-width:1024px;) {
// style here for devices above 1024px width
}

Now your site will be completely free of styling on devices with screens less than 1024px wide.

Secondly you can optionally add this in the <head> section of your pages to make sure that the website doesn't zoom out on small devices, thus rendering the text unreadable by default:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

This renders your site free of CSS and styles and also ensures that the text is normal sized on small screens. Unless you use complicated HTML that involves nested tables and features that use desktop-specific functionality, you wouldn't need to touch a line of the HTML code. And the best part is that the overhead is very light and you don't need a separate mobile-friendly version of the site. The technique above works best on websites using tableless design using a lot of <div> tags for alignment and placement. On mobile devices, these elements are simply placed one below the other in the order in which they are coded in the HTML.

Hope this article benefits those looking for a simple solution to make a website "mobile friendly" without going through a lot of customizations.

More useful information can be found in this Stack Overflow article and this one.

No comments yet

There are no comments for this article yet.

Comments closed

The blog owner has closed further commenting on this entry.