As you can see by the previous posts that I have been focusing on the iPhone, which due to a little free time has allowed me to try somethings I have always wanted to do. I decided to make an iPhone version of the
2009 Alex Mills Design preview page. In my research for a script to tell the iPhone to use a different CSS file, I came across this
tutorial. Unknown to me was the fact that the Safari browser on the phone runs a little script every time it gets rotated, with a result of either 0 (vertical), -90 (left) or 90 (right). The tutorial covers writing the javascript that intercepts the angle result from the browser, which then tells the CSS to display a certain div. So I built a vertical, left side and right side 'view' in Keynote, imaged them using skitch and built them into a neat little site using Coda.
The image below is was is displayed when the iPhone is held vertically, with instructions on how to see the other views.
Rotate the phone left and the view will change to one with links to Donald's blog and to mine. Plus another little instruction on how to return to the normal view.
Rotate the phone to the left and the view will once again change to one almost identical to the previous, except with only one link to the current website and a different rotate instruction.
Yeah I could have just put the links on one view and while this setup wont be suitable for every page, it gives you complete control over how the page works in the browser. Also the fact that it's designed for one browser on one phone* makes testing simple, though you will need an iPhone or iPod touch due to the way the CSS hides everything, making desktop testing impossible.
Check it out and let me know what you think, its just a little weekend project but I'm happy with how it turned out. Just head to
www.alexmillsdesign.com with your iPhone or iPod touch and it automatically send you to the iPhone version.
*Though the webkit browser is used in a number of other mobiles including android, the detection script is only looking for iPhone and iPod in the UserAgent.
As you can see by the previous posts that I have been focusing on the iPhone, which due to a little free time has allowed me to try somethings I have always wanted to do. I decided to make an iPhone version of the 2009 Alex Mills Design preview page. In my research for a script to tell the iPhone to use a different CSS file, I came across this tutorial. Unknown to me was the fact that the Safari browser on the phone runs a little script every time it gets rotated, with a result of either 0 (vertical), -90 (left) or 90 (right). The tutorial covers writing the javascript that intercepts the angle result from the browser, which then tells the CSS to display a certain div. So I built a vertical, left side and right side 'view' in Keynote, imaged them using skitch and built them into a neat little site using Coda.
Rotate the phone to the left and the view will once again change to one almost identical to the previous, except with only one link to the current website and a different rotate instruction.
Yeah I could have just put the links on one view and while this setup wont be suitable for every page, it gives you complete control over how the page works in the browser. Also the fact that it's designed for one browser on one phone* makes testing simple, though you will need an iPhone or iPod touch due to the way the CSS hides everything, making desktop testing impossible.
With 2009 here and no equivalent design website ready, something had to be done to indicate that 2009 will offer significantly different services and style. My first true XHTML/CSS page, giving you the option to view this blog to keep track, Donalds or continue onto the current website. One unique thing about this page is that it was designed and built completely in Keynote 09, using Skitch to extract the images into Coda for engineering.
2 major updates to Keynote that allowed me to do this easily was the new measurement system (my major feedback request...they listened), resulting in accurate real world measurement and common placement guides. An example below. The second is that a 1px stroke on a shape is a 1px stroke, no shadowy crap like in iWork 08. I will post an overview later on, as you know I design my websites, interfaces and icons in Apple Keynote, using in-app graphics and photoshop. Nothing can touch the layout system in this app.
I decided to launch my website about a month ago and I was going to use my 20Gb of MobileMe space but the lack of multiple emails, decent performance etc I decided to pay for a dedicated host and domain name. My man Lloyd refereed me to his host, whom is just starting up, the ball got rolling and now www.alexmillsdesign.com is now live. Well the preview is up for now but hopefully the full site will be live by the end of the weekend, you will be able to see my portfolio of design and photography works as well as freely download the software I have developed so stay tuned!
