Danny Turley - Designing and Developing for the Web and iPhone

Time for a Change

On 2nd September, Future of Web Design (FOWD) Tour came to the Odyssey in Belfast. Their was a great lineup of speakers with Andy Clarke,Drew McLellan, and some of our very own from Belfast with the Webstandardistas and Lee Munroe. I was particularly looking forward to listening to Andy Clarke, as I had just finished reading his book, CSS Artistry. Andy’s talk felt more like a workshop as he walked us though an example of a site’s redesign he did, and their were two things that I really stood out for. 1) Designing the website in the browser. 2) Using CSS Frameworks.

HTML 5 & CSS3

With the emergence of HTML 5 and CSS3, with browsers such as Safari 4, Google Chrome and Firefox 3.5 supporting HTML 5 as well as CSS3, I thought with a redesign of my site I could experiment and learn about the latest HTML installment. A great post that help me get started from Smashing Magazine was Coding A HTML 5 Layout From Scratch. I recently worked on Web Application for the iPhone, Performa Sports, with this project I built the Web App with CSS3, so I had fun experimenting and implementing the webkit-transform and webkit-transition, so I wanted to take that knowledge and apply it to my own site.

CSS Frameworks

Andy Clarke spoke of using parts of the CSS framework that suit you, that you do not have to use the framework entirely, and that this will rapidly speed up your development time. A great tip that I picked up from Andy was that when designing the website in the browser, to create a vertical grid image and add it to the stylesheet, and this will provide you with a visual way of lining your columns and content up correctly. He went on to further talk about adding a horizontal grid image, to keep typography within the baseline of the overall look and feel of the design. There are a lot of CSS frameworks out there such as:

1. http://baselinecss.com/
2. http://www.blueprintcss.org/
3. http://elements.projectdesigns.org/
4. http://960.gs/

In the end I choose the Baseline CSS Framework, with the added benefit that the framework was built with HTML 5 and CSS3, and when you download the files it comes with a handy .PSD file with grid and baseline structure in place for you already.

Microformats

Drew McLellan covered Microformats in his presentation at FOWD Tour, to be honest I never really understood Microformats and failed to see the benefits until now. Although we can’t physically see the impact of Microformats to the design of your site, it allows other applications to take your Microformatted data and use it. Drew recommended a really good Microformat plugin for WordPress called Micro Anywhere, which is really easy to implement.