Optimized Web Site For IPhone

 

 

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.

DJ Weller Web Design About Page

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.

iphonewebsite

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.

Advertisements

About DJ

My name is DJ, and I am starting my third career. My first was a ten year career in theatre, where I worked with some big names and in four states. My second career was working on computers, fixing them and programming them. Now I am starting a career as a writer.
This entry was posted in Web Design and tagged , , , , , . Bookmark the permalink.

Tell me what you think

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s