Posts Tagged ‘layout’

Modern CSS Layouts: The Essential Characteristics

Saturday November 7th, 2009

Source: Modern CSS Layouts: The Essential Characteristics – Smashing Magazine.


“Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we’re finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs.

But all of this change can be stressful, too. How do you keep up with all of the new techniques and make sure your Web pages look great on the increasing number of browsers and devices out there? In part 1 of this article, you’ll learn the five essential characteristics of successful modern CSS websites. In part 2 of this article, you’ll learn about the techniques and tools that you need to achieve these characteristics.

We won’t talk about design trends and styles that characterize modern CSS-based layouts. These styles are always changing. Instead, we’ll focus on the broad underlying concepts that you need to know to create the most successful CSS layouts using the latest techniques. For instance, separating content and presentation is still a fundamental concept of CSS Web pages. But other characteristics of modern CSS Web pages are new or more important than ever. A modern CSS-based website is: progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich.

* Progressively enhanced,
* Adaptive to diverse users,
* Modular,
* Efficient,
* Typographically rich.


(Read the entire original article)


How to Spot Quality within Web Design: Examples & Tips

Monday April 13th, 2009

Source: Function Web Design & Development [ Blog ] » How to Spot Quality within Web Design: Examples & Tips.

Quality in Web Design

“Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. Well, I think that there’s quite a few ways to spot quality within web designs. Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style…”

(Read the entire original post)


Perfect multi-column CSS liquid layouts – iPhone compatible

Monday April 6th, 2009

Source: Perfect multi-column CSS liquid layouts – iPhone compatible.

3 columns 3 columns 2 columns left 2 columns right
2 columns half Entire page Multi-stacked columns

“This series of website layouts use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They’re also ‘stackable’ so you can use multiple column types on the one page. This makes the number of possible layouts endless!…”

(Read the entire original post)


Bookmarks for April 3rd, 2009 – Part 1

These are my links for April 3rd, 2009:


Bookmarks for March 29th, 2009

Sunday March 29th, 2009

These are my links for March 29th, 2009:


CSS Resources and tutorials for Web Designers

Wednesday January 28th, 2009

Every web designer has to deal with CSS, day after day. Here are some links and resources found on the web, that should help you to improve your CSS skills.

1 – Flexible CSS Layouts

Keep your most important content near the top of your page at all times

Keeping your content in order of priority with flexible CSS layouts: This article shows you how to use CSS floats to achieve any column layout, while keeping your most important content highest on the page.

2 – CSS Sticky Footer

New CSS Sticky Footer

CSS Sticky Footer Layout: A CSS Sticky Footer method that actually sticks to the bottom of the page.

3 – CSS Image Maps

CSS Image Map

CSS Image Maps: A sample image map that’s built entirely using CSS and XHTML, without any Javascript.

4 – CSS Drop Shadows

CSS Drop Shadow

CSS Drop Shadows: A technique to build flexible CSS drop shadows that can be applied to arbitrary block elements, that can expand as the content of the block changes shape, compatible with most modern browsers and with better results for standards-compliant browsers.

5 – Creating Custom Corners And Borders

Custom Corners Borders

CSS Design: Creating Custom Corners & Borders: How to apply customized borders and corners to liquid CSS layouts

Custom Corners And Borders 2

CSS Design: Creating Custom Corners & Borders Part II: The technique to use patterned or gradient backgrounds

5 – Link Display for Print

Link Display For Print

Improving Link Display for Print: A technique to collect all of the URIs referenced (hrefs and citations) in a specific container within the page (after all, we probably don’t want to grab the navigation, etc.), place the links (minding the duplicates) into an ordered list which can be dropped into an id-ed container of our choosing, and supply each reference with the corresponding footnote number as a superscript.

6 – Customized input elements

Customized Inputs

Fun with forms – customized input elements: How to apply customized backgrounds to HTML forms, while preserving structurally clean markup and accessibility.

7 – Custom bullets

Custom Bullets

CSS tricks for custom bullets: Using the background property for styling links, bulleted lists, and more.

8 – Styled images with caption

Image Caption

Styled images with caption: How do you balance the need for easy update by web editors with the desire to make a site as visually appealing as possible by combining CSS and DOM scripting.

9 – CSS Production Notes

Production Notes

A Message To You, Rudy – CSS Production Notes: A technique that places your page production notes in one convenient place within an XHTML document and uses nothing more than meaningful markup and CSS.

10 – CSS Based Navigation

CSS Based Navigation

CSS Based Navigation: An example of a nice CSS based navigation bar.

11 – CSS Tabs

CSS Tabs

Free CSS Navigation Menu Designs: Some example of simple CSS navigation menus.

12 – CSS Dock Menu

CSS Dock Menu

CSS Dock Menu: A Mac-like CSS dock menu made with Jquery Javascript library, Fisheye component from Interface and some icons

13 – Tree lists

Tree List

Turning Lists into Trees: A technique to display a multi-level unordered list in the form of a tree with lines connecting nodes.


Men are from Mars. Women are from Venus. Computers are from hell.



Wir suchen nach einem motivierter und dynamischer Webentwickler (Ruby on Rails Kenntnisse erforderlich, dazu PHP/.Net Kenntnisse wären ein Bonus)! Bewerben Sie sich jetzt! (Büro in Gerlingen)


Do you need more information or a quote? Fill the following form and we'll answer you within 24 hours!