About Home Page Page

This is the home page, mother page, landing page, etc for the site. This will probably be the first page that most people visit and link to, consequently the highest PageRanked page.

Keywords: CSS RolloverMobile CSSiPhonemediaviewport<meta>

The Code

This page has no Javascript and no complex PHP. The file extension is PHP more for conformance than for functionality. The twitchy wooden boards effect is an easy CSS trick. If you want to see how that's done check out the About Page for my About Me page.

The Design

I am a sucker for Orange (the color, not the fruit). So the copious amounts of the same (the color, not the fruit) on this page. But I must admit that I have lifted most of the design idea from another site. I am not going to reveal from where for avoiding comparisons (and the fact that the original looks way better). But, if you do find that site, let me know.

This is the first page of the website that I decided to optimize for mobile viewing. Since, this is the first page of the website, that decision was a no-brainer. Also, once you get the basics in place, making the page work with mobile devices doesn't require much ingenuity. One of the basic elements that it does require is the Viewport Meta tag. This tag is read by mobile browsers to determine what part of the page to display initially and the zoom-in range.

<meta name="viewport" 
    content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> 

The content attribute holds most of the required parameters. The device-width value is a useful attribute to dynamically set the viewport to width of the mobile device. The scale values determine the zoom-in levels. The concept of viewport is covered nicely in Apple's Docmentation on Viewports.

Apart from the viewport, its was also necessary to tweak the style-sheet of the page to cater to smaller screens. This is done using a separate stylesheet added to the page as follows:

<link rel="stylesheet" href="stylesheets/homepage1.css" type="text/css" media="Screen" />
<link rel="stylesheet" href="stylesheets/mobile/homepage1.css" type="text/css" 
    media="handheld, only screen and (max-width: 480px), 
            only screen and (max-device-width: 480px)" />

The media='Screen' attribute indicates that the stylesheet is targetted for Desktop and media='handheld' indicates mobile devices. But the problem is that most modern mobile browsers won't fall for this and will still end up using the Screen stylesheet. To target them, we need to determine the stylesheet depending on teh screen size. The width is specified as 480px because that is the landscape mode width non-Retina display iPhones. But most Android and retina display iPhones will work with this resolution just fine. Targetting for mobile devices is explained in a no-nonsense way at SeaBreezeComputer.com's Mobile CSS tips. But an even more useful and generic guide is Perishable Press' 5-minute CSS makeover.

External Links

About Page