I just finished optimizing my website for iPhones. It wasn’t bad before, but it wasn’t good. I use CSS3 in my website, utilizing Float pretty heavily. Mobile Safari does not handle Float very well, and even if it did, the columns would be too small to be of any use.
On my site, I use <Section> and <Aside> to create the columns. I also have a <Header>, which includes a <Nav> section for the navigation list of links. I used CSS to place everything where I wanted it. This produces a great looking web page on a desktop.
However, it is not a good setup on the small screen of an iPhone. I again turned to CSS to format the page. The links needed to be bigger, with a larger area to click on. I toyed with the idea of making the header links a vertical list, but I felt that it put the content too far down. I also did not want those links below the content, because I want the user to be able to see them without scrolling down.
The <Aside> section was not going to look good next to the content on a small screen. I placed it under the content and centered it. I also added a little bit of space between the buttons in order to make it easier to click on the desired button.
I really like how it looks on the iPhone. I believe that it will look the same on other mobile devices, but I do not have any to test on. If you have a mobile device and notice that DJWellerWebDesign.com is not formatted correctly, please leave a comment below.
The great thing about CSS3 is that I can use the same style sheet for both versions. If an iPhone is being used, the appropriate styles will override the base styles. If I decide to change the colors or add links, I only need to do that in one place, and it will take effect on both the desktop and iPhone versions.