The design called for centerally aligned list item links, and there could be 3, 4, 5 or more links. Initially I was stumped as to how to create this effect. I had considered a left margin to create the illusion of centre aligning for each possible number, but I knew there was a better way. I’m always aiming for a solution that works in the older browsers too, and this includes IE6. I don’t know why I do it to myself, especially as it apparently only has less than a 5% market share nowadays.

The Example

I’ll cut to the chase; here is the HTML and CSS.

http://prandall.com/experimental/centre-ul/

So How Does It Work?

On the UL, I am centre aligning the text, effectively making all the content aligning this way. That’s the real key to it, second only to display:inline on the LI, because a float will push everything to the left.

Below is all the CSS you need


ul{text-align:center;}
li{display:inline;}


Simples!

It is inevitable then that these new and shiny capabilities will catch a web designer’s eye (especially after years of browser constraints) but are we turning our eagerness to use the latest styling techniques into a world of monotonous and similar designs?

A Screenshot Showing Some Modern Design Trends

It’s worth saying that there are some great sites being produced at the minute. Something I hope to write about in a future post.

I’m a Magpie Designer Too!

This post isn’t without a sense of irony, i’m all too well aware of as this site features many of the effects i’m talking about. I’m clearly a magpie designer too!

In a years time things will probably calm down when “the next thing” arrives, whatever it is.

After a long period of inactivity, due to a new job, and other things the site has sat a little dorment. I thought it was time for a change, and after many, many revisions I decided to finally design something. So, after a few hours of work this weekend – here it is.

I’m hoping to tidy a few things up over the next week, and I will follow that up with a more indepth blog on the designs that didn’t make it.

If you do notice something weird, feel free to post a comment. It hasn’t been browser tested, but bear in mind that things may look a little funky for the next few days.

My experiment uses a top left, top right, bottom left and bottom right png gradient on the HTML element, with a repeating png overlay on the BODY.

As I firmly believe that you should make your design look at least acceptable in Internet Explorer 6, I have used Modernizr, a JavaScript library that allows you to take advantage of emerging web technologies.

It’s the first time I have used it and I can see the huge potential of it. This system uses feature detection to add classes to the HTML document, allowing you to progressively enhance your websites.

In this example, I have been using multiplebgs, which allowed me to use the CSS3 technology only on sites that supported it. That allowed me to use a fallback JPG image for browsers that don’t.

Here is the CSS code:


html.multiplebgs{
background-color: #141414;

background-position: top left, top right,
bottom left, bottom right;
}
body{background: url('fallback-bg.jpg') repeat; height:100%; width:100%;}
.multiplebgs body{background: url('body-bg.png');}


See the Example

http://prandall.com/experimental/css3-backgrounds/

If you have used multiple backgrounds before i’d love you to leave a comment and link to an example.

A couple of recent designs have left me wondering whether we should be ’showing our workings’ and display the grid at all, whether subtlety like Jina Bolton’s Sushi & Robots or something more elaborate, like Analog (note: press Alt+G).

Once visible, the precision of the grid acts as evidence of design credibility, and its purity of form has a mystical draw.

A Brief History of Grids, Lucienne Roberts http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=620

Having a visible grid is certainly not new; Here you can see the Vormgevers exhibition poster in 1968 by Wim Crouwel.

I’m certainly not going to say if the grid should be visible or not, but I’d love to hear your thoughts or opinions on the topic, or just to add a link to a site where you have seen a visible grid used well.

Inspiration

Mercedes Benz Typographic Animation
Flickr Pool of Vintage Type
Use Of Effective Typography In Logo Design
Typography Mania #13 by Abduzeedo
Vibrant Wall Typography/Graffiti from Ripo Visuals
The Best Custom Letters of 2009

Web Typography

Typechart: Preview and compare web typography. Retrieve the CSS
Revised Font Stacks
Fontspring: Hundreds of web-ready fonts at your fingertips

Fonts

Today Sans H EF Extra Light
Thirteen Ways of Looking at a Typeface by Michael Bierut
Haäfe & Haph presents a selection of custom ampersands

I am hoping to give Typography Links a dedicated website soon, where you will be able to subscribe via RSS and submit your own links. Details in the coming weeks.

Layout and Composition

30 Websites with Lovely Layouts and Typography
The Typography of Neglect
Typography: Readability and Legibility

Website Design

50 Alluring Typography and Grid-Focused Websites

General Design

Beautiful Typographic Business Cards
Typographic Illustration of Obama
15 Great Examples of Artworks based on Typography

Inspiration

Vintage and Retro Typographic Showcase
Typography Mania #13 by Abduzeedo
70+ Design and Typography Inspirations
21 Fresh Inspiring Typography Designs

Designers

Rob Clarke Typography
The Portfolio of Malou Verlomme

Typography Websites

CMYKern.com
typographykicksass.com

Fonts

20 Fonts Ideal for Big and Powerful Headings
Free Font – Sketchetica

Products

Helvetica Cookie Cutters

To keep on top of the latest typography, fonts and lettering on the web, make sure you

follow @typographylinks

Layout and Composition

Typograph – Scale & Rhythm
On Font Pairing In Logo Design
Rules for Good Typography
On The Track of Good Type

Designs, Wallpapers and Posters

21 Big, Bold Typography Website Design
40+ Awesome Typography Wallpapers
Type and Cities – Designers’ typographic posters of New York
TypographicPosters.com

Inspiration

A Treasury of Wood Type Online
Typography & Lettering Flickr Pool
Typeface: The Film
The Beauty of Ampersands
Incredible Typography by Eika Dopludo
21 Fresh Inspiring Typography Designs

Helvetica

40 Excellent Logos Created With Helvetica
The Simplicity of Helvetica

If you have links you would like to share, please leave a comment.

I have some very exclusive Dribbble invites – 2 to be exact.

If you haven’t heard of it before, Dribbble is a site which allows you to upload 400×300px previews of your design work. I have been hugely impressed with it so far, and invites are very elusive.

If you would like the opportunity of winning a Dribbble invite, please leave a comment (with an email address and website/twitter account) below, and later on I will choose the lucky two and contact them directly.

Merry Christmas everybody! After a short delay due to a holiday, the December wallpaper is now live. The wallpaper is based on a present, complete with wrapping paper, ribbon and tag.

The tiling pattern is actually based on the Koch Snowflake. It’s mathematical basis allows it to be tiled in a number of ways, which can be seen on this Wolfram Alpha page.

I’m really excited with the possibilities 2010 brings, so expect more wallpapers, blogs and other goodies still in the pipeline.

Thanks for reading, I appreciate all the comments and tweets and wish you all a Merry Christmas.

Close Up

I hope you like the wallpaper. If you have any feedback or messages, please do leave a comment below.

Download the Wallpaper

• 1920×1200
• 1680×1050
• 1440×900
• 1280×1024
• 1024×768