I have updated this site with a few techniques that I have been reading about in the web dev community. Some of them are pretty obvious and others are simply code tweeks. I have took the attitude of using advanced CSS techniques that will only get seen in modern browsers, also known as “too hell with Internet Exporer”. Links to the tutorials I used have been included where appropriate.
Site tweeks include
- Made use of CSS3 sudo selctor :last-child
- Added trasparency to the content areas with CSS3 rgba
- Drop shadows with CSS3
- No more DD roundies for non ie users. Round corners are now handled with CSS3 border-radius
- Pages now validate, it took a while to disect all the crap that was in wordpress but I got there
- I added some new fonts. I started experimenting with typekit but after coming across the issue related to the flash of unstyled text I decided to simply use @font-face instead.
- text-shadow has been added to some headers
- Moved a lot of unnecessay markup and made some of the existing markup more semantic. There is still a few bits to go on this one.
- Moved the dependancy of JavaScript for the twitter update which now uses PHP
- Additional backgroud images
This is very much a work in progress so I will be adding more things over the next few days and weeks. My blog is my playground and to answer the question “what does it look like in ie”, well I dont know cause I havent tested yet, but I bet its not as good as it looks in FF or Safari.
- Share at Del.icio.us
- Share at Digg
- Share at Stumbleupon
- Share at Facebook
- Share at Google
- Share at Tecnorati
- Share at Furl
The links provided allow you to bookmark this page into your favourite social media website. For users with JavaScript disabled copy and paste the URL from the address bar into your chosen social bookmarking site.
February 19th, 2010 at 9:15 am
Good work Charlie.
Interesting comments with regard to TypeKit. I’ve not seen that happen elsewhere.
It would be good to see a post on TypeKit set up and a walk through with the positives and negatives from your point of view.
February 19th, 2010 at 9:40 am
Hi poomoo,
In a nut shell the text is rendered before the typekit JS kicks in.
Typekit relies on JS and the tags they provide write additional JS into the head of the document, these tags contain information related to your fonts and what CSS selectors the font should be applied to. All of this script writting + the call to the typekit server to get your details causes a delay.
There is a good article on 24Ways which talks about The Flash of Unstyled Text, and possible solutions.
March 10th, 2010 at 3:00 pm
The FOUC or FOUT whatever you prefer isn’t much of an issue for me. Visually i don’t mind as long as the designer has matched the base font as closely as possible to the typekit font. I notice typekit are planning on introducing CSS classes to the body element to indicate whether Typekit fonts have loaded or not.
March 11th, 2010 at 9:26 pm
I know what you are getting at Colin, but like SIFR there will always be slight differences between the default font and the one you are loading in. I can’t help thinking if you can find a font that’s close enough to the one you want from Typekit then why not just use it instead of all the extra hassle.