Annie
Table of Contents
Details
- Date Completed:05 November 2006
- Days/hours spent:10 days
- About the company:Annie Woodcock
- Software used:Photoshop CS2, TextMate
- Tag:CSS, Framework, Javascript, MySQL, PHP, XHTML
Currently working on…
Lots of freelance and e-commerce projects.
Latest Work
Search Portfolio
I developed and designed this website using my Dust framework, for fashion student Annie Woodcock.
1. Introduction
I began by thinking about the aspirations of a fashion student and the impression Annie wanted to give to anyone visiting the site.
She wanted something creative, bold and arty. Now this can mean many a thing so it was important to try to get the interpretation right. This meant that I would need to convert what Annie wanted into real web terms.
2. Design
I came up with the goals of making her site look:
Modern
Since her website needed to have aspirations of a fashion it was important keep a sense of clothing or fancy wallpaper in mind. I experimented with a couple of different wallpaper patterns and created some Photoshop patterns. I'd decided to choose two different styles, an old wallpaper classical design and the other a modern (with a slight classical pattern) design.
Artistic
The bright design would have three shades of red, curves and swirls.
Three shades of grey blue, almost medieval-style wallpaper and shapes for the classical design.
Strong (bold)
Since Annie did not have much content it was vital to create a design that would make it look was busy and active! By this stage I was leaning more towards the bright red design which made the website look lively. The grey-blue design might be suited to a designer that follows the medieval era (corsets and such).
The bright curves and swirls design (design A)
The classical design (design B)
Fonts
I wanted to keep the classical look between the two designs as they both had wallpaper-like backgrounds and most people would associate these with San-Serif fonts. Fonts like porcelain.
The porcelain font
Web designers are limited to a small number of fonts, especially for San-Serif range such as Times New Roman, Times, and Georgia. And the most obvious choice was Georgia as this is a better-looking font for on-screen purposes.
Annie decided to go with the bright red design, as she believed it would portrait her work and personality more effectively.
Making the Annie logo transparent (PNG 24bit) and adding a red glow to make it stand out.
Thinking about adding detail, headers for each page.
Using part of the porcelain font to make the swirls at the top of page.
Adding an attention-grabbing work panel on the home page (using PNG 24bit to really make stand out with the drop shadow).
3. Development
Using Dust
After many long weekends and lots of analysing, my Dust framework was really starting to come together. Adding new components and ideas on a daily basis but in a easy and intelligent way (of course).
I couldn't wait to give my framework a try and see how it'd stand up to a real life situation. So when Annie wanted a website done I sprung at the opportunity to use it! Most developers should know that a web application is never really tested until it has a purpose (creating a fashion website).
What is Dust?
Dust is a PHP framework designed and developed from the MVC methodology (thank you RubyonRails and CodeIgniter). It will available to download near the end of 2007.
My development work before had all the functions, HTML within functions (using echo to display them) inside one file! What madness when I look back it now… The MVC methodology is very effective way of separating the three most commonly aspects of websites:
- Database queries (model)
- HTML (view)
- Preload processing (controller)
It makes a lot of sense and I never really thought about it. Separating these aspects not only helps build, maintain and update the website and allows more control too.
I decided to experiment with this methodology in terms of what a web designer needs (as its not all about the developers now). I came up with some important aspects that would be necessary:
- Menu (different menus for each controller, also switching from one to another)
- Template (having one template file with the view content parsed in as a variable and many other features)
This would be become CMMTV (Controller, Model, Menu, Template, View). Why add menu and template files separately you say?
The advantages after much experimentation:
Menu
Navigation is one of the most critical parts to a website and to have to the ability to specify this navigation outside of the view or template files, gives one better control and flexibility.
Template
The reason behind creating template files is looking at how CMS work in general. Each might have template files with the header tags, footer tags and the content being parsed into the middle of it. This is a good way to change the HTML/look of a website, as the content is separate from the markup.
What the MVC methodology has taught me is not to stick to one standard but to try to expand and improve the functionality of a system before production. People demand a lot from websites nowadays and things keep changing all the time. Therefore, the ability to come back to website five or six months down the line and know how to change something around is fundamental. So any component that gives improved maintenance is definitely doing.
The Dust framework System folder structure.
The Dust framework Application folder structure.
The Dust framework Public folder structure.
4. Custom CMS
Introduction
By using Dust it was easy enough to create a custom built content management system. Using a pre-built one would be complex and I'd have to train Annie as well as myself! The CMS consisted of two pages, Portfolio and Category.
The look of the CMS portfolio page. The category page looks the same to give consistency and secure-feeling (for using it).
The look of the edit portfolio page.
Therefore, I thought it would simpler to built one customised for Annie's needs. She wanted to add portfolios to her Portfolio page. Therefore she'd need a database table storing all this information. She also needed to categorise all these portfolios, and thus another database table to store the categories.
Using my Dust framework all forms were dynamically created according to the table fields.
echo $this->form->auto_db( array('table' => 'category', 'exclude' => array('updated', 'query') );
This would generate a form from the category table and exclude the updated and query fields.
To save space both portfolio and category pages used javascript to reveal the form for adding a category or portfolio.
Tiny MCE, FCK Editor, blah blah blah...
I had a look at implementing a HTML-based WYSIWYG so that would be easy for Annie to make things bold or italic or to even add a list! After a lot of contemplation, I realised that sometimes adding more technology won't improve a user's experience but might hinder it instead. I thought "What's the most she'll need?" Simple paragraphs and if she wanted more that could be implemented at a later stage. So I created a simple regular expression to find two line breaks in a row (using PHP preg_replace() function to find and replace the line breaks preg_replace('/[
|
]/', '</p><p>', $string) I know its not a fancy expression but it works) and apply end and beginning paragraph tags when the portfolio entry was read. Nice and simple!
MySQL tables
I don't like using IDs to link database tables together, as numbers are lost when one deletes a row in the table (because of auto_increment feature). All the rows had title primary keys and were dependent on the title. To access these a second field called query was created to find a specific row. The 'query' was a parsed version of the title field with all characters, expect letters, numbers, underscores and hyphens removed (regular expression [^a-zA-Z0-9_-]+).
What if Annie changed the title? Well using the URI reference (edit-portfolio/red-jacket) to find the row and change the title and query fields (and whatever relevant fields).
Images
I created an image class that resizes the images to the specific thumbnail size of 80x90 and the large ones were restricted to 400px height. So that people with 1024x768 would be able to view the image without scrolling.
I discovered that images would need to be resized to the 80x90 thumbnail, wouldn't always work because of their dimensions. As a result I setup the function for resizing, to find out if both width and heights parameters were set. If so, then this would mean the image had to cropped. So I scaled the image proportionally according to whether the width or height was larger. I found that getting that scaled image and then cropping it to 80x90, producing better results.
Flashing
Another clever method learnt from RubyonRails. One would be able to flash the current or next page, to let the user know of a successful, unsuccessful or in progress transaction. I used this same method across the admin section, to let Annie know if things have been successful.
What happens if Annie tries to submit an empty portfolio form.
5. XHTML & CSS
XHTML and CSS is hand coded, and valid.
New CSS methodology
Well not really new, but new to most web designers and to myself. Using the CMMTV philosophy to improve how CSS was controlled and used.
Most web designers have one or two files for storing all their CSS. Now wait a minute, that's like what I was doing with my PHP code… I used to have one file at first, with everything in it. Then I learnt to spilt the files into structure and typography, but I found that most of the CSS ended up going into typography. With these latter methods, I found it very difficult to go back and update a bit of CSS because the code was everywhere.
Maybe the CMMTV methodology can be applied to CSS?
Using @import I was able separate CSS that was only confound to a specific element.
For example, the image thumbnails on the portfolio pages were spilt into components. This way I could easily shift this code to another website without having the CSS scattered across one file. The same was applied to forms, lists, typography (only deals with font sizes, line heights, so actual typography!), and the skin (deals with the look of the website). These were imported into a single CSS file (screen.css) and using the
method to attach it to the HTML file instead of using @import within <style> tags, as these I found to be too clumsy and they don't work in IE 5.0 either.
How to take advantage of the @import function in CSS.
Font sizes
I recently brought myself a PC laptop (hell has really frozen over!) and I started to experiment at home with different font sizes and the differences between the headers (i.e. h1, h2, h3) in relation with paragraphs, lists and such.
I found a really good combination:
H1 = 1.7emH2 = 1.5emH3 = 1.3emH4 = 1.1emH5 = 1.0emH6 = 1.0em(withfont-style: normal;)
Now to control the overall font sizes I used in screen file (screen.css):
html { font-size: 85%; }
This reduced the font size naturally, as I found when using points or pixels, users couldn't increase/decrease the font size in Internet Explorer.
Internet Explorer Only
I came across a slight problem where Firefox was saying that parts of our CSS were deprecated. This was because I used the PNG transparency fix for IE and this behaviour function that allowed the JavaScript to be applied to PNG's would cause a warnings from Firefox. To stop these warning firing off in Firefox, I used Dust's Network class to find out if the user was using Internet Explorer.
<?php
if ($this->network->user_browser('name') == 'Internet Explorer') : ?>
<link rel="stylesheet" type="text/css" media="screen" href="<?=CSS_PATH?>ie.css" />
<?php endif; ?>
This was an elegant situation and also helped when I had IE specific CSS fixes.
6. JavaScript
Portfolio images
I decided to use Prototype and script.aculo.us JavaScript libraries along side with lightbox (v2.0). I was going to use jQuery and Thickbox combo, but I found lightbox to be slightly slicker when opening up an image. And first impression was all-important for for the client.
The size difference is about 60KB (110KB for lightbox, prototype and script.aculo.us effects scripts); however I thought most people viewing her website (universities) would be have high-end computers with connections beyond 10MBits.
7. Page specific data
My Dust framework also allows for page specific CSS, Meta tags, or JavaScripts.
$this->javascript->scriptaclous( array('lightbox') );
This would add the scripaclous effects, prototype and lightbox JavaScript and CSS files.
Therefore, a user viewing the site would only load the JavaScripts while viewing the portfolio page. This helped, as the other pages would not load the 110KB JavaScript libraries and making everyone in concern happy!