Michael Dick

Creative interface designer and front-end developer.
November 30, 2008

Introducing CSSiPhone, inspiration for the iPhone.

CSSiPhone

Creative web design on the mobile phone is here, thanks to the iPhone innovating the market. It can be very tough searching the web for inspiration when you need some when designing for the iPhone. It's a new market, you're not sure what users are expecting when it comes to standards (Example: where should the nav go?).

The Problem

If you have tried Googling for iPhone inspiration, you know you won't get far. I tried it. The best site I found was a blog post listing 20 of the best optimized sites — it was pretty old. If you're like me, you end up browsing the web where you find yourself never knowing if a site has a mobile alternative or not. If the site has one, you either have to use your phone to find it, or take a stab at what the sub-domain is: m, iphone, i, mobile, ect..

Browsing to find mobile sites on your iPhone ended up being the best solution, which still takes more time than it's worth. Browsing for inspriation shouldn't be like this!

Back when I was living in Washington DC working from the nclud studio, I was starting to get really interested in iPhone design [iDesign], I was really needing some inspiration; I love to be inspired.

The Idea

This is when I realized that absence of a gallery for iPhone optimized sites. I saw an opportunity to help others so they did not have to go through all the research I had to go through. I immediately bought the domain and sat on it until a few weeks ago when I started to gather a long list of optimized sites.

The Product

CSSiphone.com is dedicated to helping you find your iPhone inspiration.

Comments

  • Engraved by James Fleeting on 12/01/2008

    Very nice man. I know you've been working on it for a little bit now so glad to see it live. Although I'm a G1 user myself, it is still nice to see such great looking sites for mobile phones. Just shows a mobile version doesn't have to lack design.

    Next up, you need to fix your m.m1k3.net. :)
  • Engraved by Martin Ringlein on 12/01/2008

    Awesome work man! Genius idea that will prove extremely useful!
  • Engraved by antoine butler on 12/01/2008

    nice job, congrats.

    I will be using for sure, while I plan to create an iPhone version of a redesign I'm working on.

    Thanks for the inspiration, now time to track down some tips.
  • Engraved by Jeff on 12/01/2008

    Very nice, good work!
  • Engraved by Michael Dick on 12/01/2008

    James, the great thing is, just because the site is aimed at the "iPhone" doesn't mean you can't take inspiration from it even if you're working within the constraints of the G1. The bottom line is, it's all the mobile web!

    Antoine, be sure to submit your design when it's live!

    Martin, Jeff, and Antoine: thanks for the comments! Very appreciated!
  • Engraved by Andrew Cornett on 12/01/2008

    Awesome idea, great going dude!
  • Engraved by Michael Dick on 12/01/2008

    Andrew, thanks for the comment...hoping the idea takes off!
  • Engraved by James Fleeting on 12/01/2008

    @Michael Very true, and there are some great looking mobile sites you are showcasing. It really is amazing what designers can do with limited space and graphics. Looking forward to your future plans for it.
  • Engraved by Michael Dick on 12/01/2008

    James...the constraints the mobile web gives us is an exciting challenge. I hope that CSSiPhone can help designers figure out how to work around the constraints.
  • Engraved by David Birchmier on 12/02/2008

    Great website! For the future, adding tutorials & tips for iphone design would be a great resource!
  • Engraved by Michael Dick on 12/02/2008

    David, that's the next thing I want to do, but I am waiting to see how things turn out first.

    Appreciate the feedback!
  • Engraved by Simon on 12/03/2008

    Now that's complete will you be working on pure edit again?
  • Engraved by Wagner Brahm on 12/03/2008

    Realy very nice site, but... You need to fix the feeds!

    Bye.
  • Engraved by OverDrive on 12/03/2008

    I have always wanted to know how to make a mobile alternative for one of the projects I am working on but have had issues finding a good place to start and or how to do it.

    Any suggestions?
  • Engraved by OverDrive on 12/03/2008

    I have always wanted to know how to make a mobile alternative for one of the projects I am working on but have had issues finding a good place to start and or how to do it.

    Any suggestions?
  • Engraved by Noe Ruiz on 12/04/2008

    Wonderful idea! I found myself spending a lot of time searching for iPhone opt sites. Very pleased to see a css gallery type site specifically for mobile sites. Can't wait to see future updates! @OverDrive , I found this to be very useful. http://css-tricks.com/video-screencasts/38-basics-tips-on-designing-for-the-iphone/
  • Engraved by Michael Dick on 12/04/2008

    The RSS feed is error free and online! Sorry for the mishap, you can find the feed at:

    http://feeds.feedburner.com/CSSiPhone

    Noe, thanks for the comment and support helping OverDrive find some help! Thanks!
  • Engraved by OverDrive on 12/04/2008

    Thanks a lot, ill check it out and hopefully I will have myself a mobile alternative or my website soon!
  • Engraved by Raj on 12/12/2008

    Great work! I am doing my bit for it by promoting it on http://www.iphonekicks.com :-)
  • Engraved by Michael Dick on 12/12/2008

    Raj, thanks!! Also, thanks for the comment!
  • Engraved by dfgdfg on 12/30/2008

    fghfghfg
  • Engraved by Jesse Knight on 02/12/2009

    Thank you Michael; this will be useful.
    Do you take requests? I've been looking for a way to display photos - I'd like it to feel like the iPhone photo browser, but I've only found a few lousy JS imitations.
    So far the best solution I've come up with is making a really long page and just letting the user scroll to the right. Click-stops would be nice though.
  • Engraved by Michael Dick on 02/21/2009

    Jesse, if you need help it's best to reach me via my email form on my contact page.
  • Engraved by david praznik on 03/22/2009

    nice work :)
  • Engraved by Michael Dick on 03/22/2009

    David, thanks man!
  • Engraved by Nick on 09/25/2009

    Very useful, thanks!
  • Engraved by Chris on 10/10/2009

    Great work Michael. I posted about the site a while back (http://tinyurl.com/yl5y2rn).

    @ Jessie: check out Jaipho/Pipho, it seems like it would work for what you are looking for: http://tinyurl.com/yhly9yu
  • Engraved by Michael Dick on 10/12/2009

    Chris, I remember seeing your site in my stats...thanks for the support!

Give your word