How to Create Beautiful and Elegant HTML Lists Using CSS

February 24th • 21 Comments • Under: Design Suggetions • Tags: code, css, design, development

HTML list have become one of the most used HTML elements for marking-up various semantic content structures — navigation, comments and even image galleries.

This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents.

Before we start, it is necessary to understand the importance of using specific HTML tags <ul> and <ol>, instead of simple numbering (like 1., 2. or •, ») for building lists. By applying content a semantic structure, we emphasize the relationships between different content elements. In case of lists we are able to imply that there is a certain relationship between all of the list members, which is possibly described by the paragraph introducing the list. It also helps screen reader users for whom the total number of items is announced before the rest of the list. Read more »

Web Design Critique: Consistency and Homogeneity of the Blog Layout

February 19th • 9 Comments • Under: Design Suggetions, Web Critique • Tags: critique, suggestion, web design

Blogherald.com is a blog featuring news from all around the blogosphere since 2003, and is run by a dozen of contributors and writers. It was founded by Duncan Riley from Australia and is now owned by Splashpress Media. The Blog Herald has gone through multiple design and layout variations, including the latest one made by Brian Gardner.

Web design and design in general should never be judged from the aesthetic viewpoint or by how much one likes/dislikes a particular color scheme, typeface or the layout of different content elements. The purpose of design is to make the content organized and accessible to the widest target audience possible. Design should be the information highway without traffic jams and clearly marked road labels which don’t require any Design Positioning System (DPS) in order to navigate. Read more »

Take-away photo and image positioning CSS styles for blogs — idea for a plugin

January 28th • 5 Comments • Under: Design Suggetions, WordPress • Tags: css, WordPress

After reading Kim’s comment regarding the Morning Racer theme, I had an idea of how to achieve a consistent image and photo placement in a WordPress blog even if you decide to change the theme.

The solution would be a plugin which would provide a “standard” set of CSS classes for styling different image (and other element) positioning.

The great thing is that you could use these CSS classnames with any theme you like as long as you have the plugin enabled. It would be also possible to specify a prefared classname prefix (for example, kd-wide, mo-withborder-a or pa-image-a) so that the plugin’s CSS doesn’t mess with the theme’s CSS. It could also contain CSS styles for lists (like the “flat” and “spaced” ones used on this blog), “important” messages, etc.

A kind of a portable image positioning thing. And you wouldn’t have to learn new CSS classnames or image layout ideas offered by different theme authors.

What do you think? Maybe you have a suggestion of other items (apart from images and lists) that you would like to have special styling.

Standards Watch: Design Observer

December 4th • No Comments • Under: Design Suggetions

I am an avid reader of Design Observer (DO) blog — writings about design & culture. They feature essays, ideas and critique about the issues of design in its broadest sense.

Although the content and the authors are fantastic, the website still uses HTML tables for layout, fixed 10px font size and images (without alt atributes) for section headers.

In order to thank the authors for their amazing writing, I have rebuilt the layout following the best practice of web design, and using well marked-up HTML and CSS. This way DO would be friendly to all user, mobiles and search engines.

View the result: Design Observer with beautiful HTML and standards.

This layout could be easily turned into a WordPress theme which would give the authors greater control over the content and functionality of the website.

New WordPress Theme: Sans–serif Racer

November 14th • 24 Comments • Under: Design Suggetions • Tags: design, WordPress

While tweaking the Times Racer theme which is currently used in this blog, I was fascinated by how the sans-serif typeface and the aligned positioning of different elements made it look really harmonic and solid.

After hours of PHP, HTML and CSS trickery, the new theme was named Sans-serif Racer and ready for the release. It features unique border elements, light background shading and, similarly to Agneka Simple, one base color which can be easily adjusted. Read more »