Pre-req Checklist:
-
Bought domain from SWITCH. It has great pricing, by the way.
-
Connected the domain to Hostmonster.
-
Got to work.
Because I assumed that the viewer would reach this page through a promotion, I gave them a choice of either reading this development blog or browsing our created apps.
I took a snapshot of the Alernalytics article, as it contained UI snapshots and had a representative length, and sized it down to around 300×300 pixels. This blog snapshot served as an icon to visually represent the development blog. On the offhand note, the blog also “sort of kind of” conforms to the Golden ratio’s Fibonacci Spiral
For a visual representing our created apps, nothing appeared more signifying than the iPhone Simulator icon. It’s sleek looking and conveys all there is to know. Heck, I pay $100 a year to put my apps on the App Store, I think borrowing an icon is a fair trade. If Apple ever has a problem with that, I’ll gladly change the icon. Both icons were positioned through CSS and had title text underneath them in case the choice wasn’t obvious enough.
I also added some animations and effects when the icons were moused over. I used -webkit-transform: translate(0px,-5px); to move the icons upwards, and -webkit-transition: opacity 0.5s linear; to change the opacities.
Redirecting the user to the main site seemed unwieldy and rough, so I fished around for a lightbox effect that I encountered a long time ago. Found out that it was called GreyBox. Implemented the popup window and it worked fine.
Nothing’s finished without a good background. At first, I used the Apparent Etch texture. On certain displays, the image produced visible white lines because of the brushed metal effect. In Illustrator, I drew up an overhead lamp to produce a darkroom effect.
The spotlights emphasized the icons perfectly and shone through the opacity effects. There’re some tips for creating a landing page! My landing page is at ApparentEt.ch. Catchy, I know, eh?
If you want analytics for your website, I recommend SeeVolution. It provides viewer source, creates heat maps, and more!
If you have questions or want us to write about a particular topic (preferably iPhone development related), just tell us in the comments.
