Modern CSS Layouts: The Essential Characteristics

Advertisement

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.

Progressive Enhancement

Progressive enhancement means creating a solid page with appropriate markup for content and adding advanced styling (and perhaps scripting) to the page for browsers that can handle it. It results in web pages that are usable by all browsers but that do not look identical in all browsers. Users of newer, more advanced browsers get to see more cool visual effects and nice usability enhancements.

The idea of allowing a design to look different in different browsers is not new. CSS gurus have been preaching1 this for years because font availability and rendering, color tone, pixel calculations and other technical factors have always varied between browsers and platforms. Most Web designers avoid “pixel perfection” and have accepted the idea of their designs looking slightly different in different browsers. But progressive enhancement, which has grown in popularity over the past few years, takes it a step further. Designs that are progressively enhanced may look more than slightly different in different browsers; they might look very different.

For example, the tweetCC website2 has a number of CSS 3 properties that add attractive visual touches, like drop-shadows behind text, multiple columns of text and different-colored background “images” (without there having to be actually different images). These effects are seen to various extents in different browsers, with old browsers like IE 6 looking the “plainest.” However, even in IE 6, the text is perfectly readable, and the design is perfectly usable.

Screenshot3
tweetCC in Safari.

Screenshot4
tweetCC in IE 6.

In CSS 3-capable browsers like Safari (top), the tweetCC5 website shows a number of visual effects that you can’t see in IE 6 (bottom).

These significant differences between browsers are perfectly okay, not only because that is the built-in nature of the Web, but because progressive enhancement brings the following benefits:

  • More robust pages
    Rather than use the graceful degradation method to create a fully functional page and then work backwards to make it function in less-capable browsers, you focus first on creating a solid “base” page that works everywhere.
  • Happier users
    You start building the page making sure the basic functionality and styling is the same for everyone. People with old browsers, mobile devices and assistive technology are happy because the pages are clean and reliable and work well. People with the latest and greatest browsers are happy because they get a rich, polished experience.
  • Reduced development time
    You don’t have to spend hours trying to get everything to look perfect and identical in all browsers. Nor do you have to spend much time reverse-engineering your pages to work in older browsers after you have completed the fully functional and styled versions (as is the case with the graceful degradation method).
  • Reduced maintenance time
    If a new browser or new technology comes out, you can add new features to what you already have, without altering and possibly breaking your existing features. You have only one base version of the page or code to update, rather than multiple versions (which is the case with graceful degradation).
  • More fun
    It’s just plain fun to be able to use cool and creative new techniques on your Web pages, and not have to wait years for old browsers to die off.

Learn more about progressive enhancement:

Adaptive to Diverse Users

Modern CSS-based Web pages have to accommodate the diverse range of browsers, devices, screen resolutions, font sizes, assistive technologies and other factors that users bring to the table. This concept is also not new but is growing in importance as Web users become increasingly diverse. For instance, a few years ago, you could count on almost all of your users having one of three screen resolutions9. Now, users could be viewing your pages on 10-inch netbooks, 30-inch widescreen monitors or anything in between, not to mention tiny mobile devices.

Screenshot10
In his article “Smart columns with CSS and jQuery”11 Soh Tanaka describes his techniques that adapts the layout depending on the current browser window size.

Creating Web designs that work for all users in all scenarios will never possible. But the more users you can please, the better: for them, for your clients and for you. Successful CSS layouts now have to be more flexible and adaptable than ever before to the increasing variety of ways in which users browse the Web.

Consider factors such as these when creating CSS layouts:

  • Browser
    Is the design attractive and usable with the most current and popular browsers? Is it at least usable with old browsers?
  • Platform
    Does the design work on PC, Mac and Linux machines?
  • Device
    Does the design adapt to low-resolution mobile devices? How does it look on mobile devices that have full resolution (e.g. iPhones)?
  • Screen resolution
    Does the design stay together at multiple viewport (i.e. window) widths? Is it attractive and easy to read at different widths? If the design does adapt to different viewport widths, does it correct for extremely narrow or wide viewports (e.g. by using the min-width and max-width properties)?
  • Font sizes
    Does the design accommodate different default font sizes? Does the design hold together when the font size is changed on the fly? Is it attractive and easy to read at different font sizes?
  • Color
    Does the design make sense and is the content readable in black and white? Would it work if you are color blind or have poor vision or cannot detect color contrast?
  • JavaScript presence
    Does the page work without JavaScript?
  • Image presence
    Does the content make sense and is it readable without images (either background or foreground)?
  • Assistive technology/disability
    Does the page work well in screen readers? Does the page work well without a mouse?

This is not a comprehensive list; and even so, you would not be able to accommodate every one of these variations in your design. But the more you can account for, the more user-friendly, robust and successful your website will be.

See these resources on user diversity and Web page adaptability:

Modular

Modern websites are no longer collections of static pages. Pieces of content and design components are reused throughout a website and even shared between websites, as content management systems (CMS), RSS aggregation and user-generated content increase in popularity. Modern design components have to be able to adapt to all of the different places they will be used and the different types and amount of content they will contain.

Screenshot17
Object Oriented CSS18 is Nicole Sulivan’s attempt to create a framework that would allow developers to write fast, maintainable, standards-based, modular front end code.

Modular CSS, in a broad sense, is CSS that can be broken down into chunks that work independently to create design components that can themselves be reused independently. This might mean separating your style into multiple sheets, such as layout.css, type.css, and color.css. Or it might mean creating a collection of universal CSS classes for form layout that you can apply to any form on your website, rather than have to style each form individually. CMS’, frameworks, layout grids and other tools all help you create more modular Web pages.

Modular CSS offers these benefits (depending on which techniques and tools you use):

  • Smaller file sizes
    When all of the content across your website is styled with only a handful of CSS classes, rather than an array of CSS IDs that only work on particular pieces of content on particular pages, your style sheets will have many fewer redundant lines of code.
  • Reduced development time
    Using frameworks, standard classes and other modular CSS tools keeps you from having to re-invent the wheel every time you start a new website. By using your own or other developers’ tried and true CSS classes, you spend less time testing and tweaking in different browsers.
  • Reduced maintenance time
    When your style sheets include broad, reusable classes that work anywhere on your website, you don’t have to come up with new styles when you add new content. Also, when your CSS is lean and well organized, you spend less time tracking down problems in your style sheets when browser bugs pop up.
  • Easier maintenance for others
    In addition to making maintenance less time-consuming for you, well-organized CSS and smartly named classes also make maintenance easier for developers who weren’t involved in the initial development of the style sheets. They’ll be able to find what they need and use it more easily. CMS’ and frameworks also allow people who are not as familiar with your website to update it easily, without screwing anything up.
  • More design flexibility
    Frameworks and layout grids make it easy, for instance, to switch between different types of layout on different pages or to plug in different types of content19 on a single page.
  • More consistent design
    By reusing the same classes and avoiding location-specific styling, you ensure that all elements of the same type look the same throughout the website. CMS’ and frameworks provide even more insurance against design inconsistency.

Learn more about modular CSS techniques:

Efficient

Modern CSS-based websites should be efficient in two ways:

  • Efficient for you to develop,
  • Efficient for the server and browser to display to users.

As Web developers, we can all agree that efficiency on the development side is a good thing. If you can save time while still producing high-quality work, then why wouldn’t you adopt more efficient CSS development practices? But creating pages that perform efficiently for users is sometimes not given enough attention. Even though connection speeds are getting faster and faster, page load times are still very important to users. In fact, as connection speeds increase, users might expect all pages to load very quickly, so making sure your website can keep up is important. Shaving just a couple of seconds off the loading time can make a big difference.

We’ve already discussed how modular CSS reduces development and maintenance time and makes your workflow a lot faster and more efficient. A myriad of tools are out there to help you write CSS quickly, which we’ll cover in part 2 of this article. You can also streamline your CSS development process by using many of the new effects offered by CSS 3, which cut down on your time spent creating graphics and coding usability enhancements.

Some CSS 3 techniques also improve performance and speed. For instance, traditional rounded-corner techniques require multiple images and DIVs for just one box. Using CSS 3 to create rounded corners requires no images, thus reducing the number of HTTP calls to the server and making the page load faster. No images also reduces the number of bytes the user has to download and speeds up page loading. CSS 3 rounded-corners also do not require multiple nested DIVs, which reduces page file size and speeds up page loading again. Simply switching to CSS 3 for rounded corners can give your website a tremendous performance boost, especially if you have many boxes with rounded corners on each page.

Writing clean CSS that takes advantage of shorthand properties, grouped selectors and other efficient syntax is of course just as important as ever for improving performance. Many of the more advanced tricks for making CSS-based pages load faster are also not new but are increasing in usage and importance. For instance, the CSS Sprites23 technique, whereby a single file holds many small images that are each revealed using the CSS background-position property, was first described by Dave Shea in 200424 but has been improved and added to a great deal since then. Many large enterprise websites now rely heavily on the technique to minimize HTTP requests. And it can improve efficiency for those of us working on smaller websites, too. CSS compression techniques are also increasingly common, and many automated tools make compressing and optimizing your CSS a breeze, as you’ll also learn in part 2 of this article.

Learn more about CSS efficiency:

Rich Typography

Rich typography may seem out of place with the four concepts we have just covered. But we’re not talking about any particular style of typography or fonts, but rather the broader concept of creating readable yet unique-looking text by applying tried and true typographic principles using the newest technologies. Typography is one of the most rapidly evolving areas of Web design right now. And boy, does it need to evolve! While Web designers have had few limits on what they could do graphically with their designs, their limits with typography have been glaring and frustrating.

Until recently, Web designers were limited to working with the fonts on their end users’ machines. Image replacement tricks and clever technologies such as sIFR30 have opened new possibilities in the past few years, but none of these is terribly easy to work with. In the past year, we’ve finally made great strides in what is possible for type on the Web because of the growing support for CSS 3’s @font-face property, as well as new easy-to-use technologies and services like Cufón31 and Typekit4032.

The @font-face rule allows you to link to a font on your server, called a “Web font,” just as you link to images. So you are no longer limited to working with the fonts that most people have installed on their machines. You can now take advantage of the beautiful, unique fonts that you have been dying to use.

@font-face in action: Teehanlax.com33

Screenshot34

Craigmod35

Screenshot36

Nicewebtype37

Screenshot38

The three screenshots above are all examples of what @font-face can do.

The main problem with @font-face, aside from the ever-present issue of browser compatibility39, is that most font licenses—even those of free fonts—do not allow you to serve the fonts over the Web. That’s where @font-face services such as Typekit4032, Fontdeck41 and Kernest42 are stepping in. They work with type foundries to license select fonts for Web design on a “rental” basis. These subscription-based services let you rent fonts for your website, giving you a much wider range of fonts to work with, while avoiding licensing issues.

Screenshot43
For A Beautiful Web44 uses the Typekit font embedding service45 for the website name, introductory text and headings.

Screenshot46
Ruler of the Interwebs47 uses the Kernest font embedding service48 for the website name and headings.

We still have a long way to go, but the new possibilities make typography more important to Web design than ever before. To make your design truly stand out, use these modern typographic techniques, which we’ll cover in even greater detail in Part 2.

See these resources on current CSS typography techniques:

Summary

We’ve looked at five characteristics of modern CSS websites:

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

In part 2 of this article, coming soon, we’ll go over the techniques and tools that will help you implement these important characteristics on your CSS-based Web pages.

(al)

Footnotes

  1. 1 http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  2. 2 http://tweetcc.com/
  3. 3 http://tweetcc.com/
  4. 4 http://tweetcc.com/
  5. 5 http://tweetcc.com/
  6. 6 http://www.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/
  7. 7 http://en.wikipedia.org/wiki/Progressive_enhancement
  8. 8 http://www.hesketh.com/publications/articles/progressive-enhancement-paving-the-way-for/
  9. 9 http://www.thecounter.com/stats/2006/January/res.php
  10. 10 http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/
  11. 11 http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/
  12. 12 http://marketshare.hitslink.com/
  13. 13 http://www.baekdal.com/reports/actual-browser-sizes/
  14. 14 http://www.smashingmagazine.com/2007/11/23/screen-resolutions-and-better-user-experience/
  15. 15 http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
  16. 16 http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
  17. 17 http://wiki.github.com/stubbornella/oocss
  18. 18 http://wiki.github.com/stubbornella/oocss
  19. 19 http://24ways.org/2008/making-modular-layout-systems
  20. 20 http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/
  21. 21 http://24ways.org/2008/making-modular-layout-systems
  22. 22 http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/
  23. 23 http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  24. 24 http://www.alistapart.com/articles/sprites/
  25. 25 http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
  26. 26 http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/
  27. 27 http://developer.yahoo.com/performance/rules.html
  28. 28 http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  29. 29 http://www.smashingmagazine.com/2009/06/25/35-css-lifesavers-for-efficient-web-design/
  30. 30 http://wiki.novemberborn.net/sifr3/
  31. 31 http://cufon.shoqolate.com/generate/
  32. 32 http://blog.typekit.com/
  33. 33 http://www.teehanlax.com/labs/projects/fontface/
  34. 34 http://www.teehanlax.com/labs/projects/fontface/
  35. 35 http://www.teehanlax.com/labs/projects/fontface/
  36. 36 http://craigmod.com/journal/font-face/
  37. 37 http://nicewebtype.com/fonts/museo-and-sans/
  38. 38 http://nicewebtype.com/fonts/museo-and-sans/
  39. 39 http://a.deveria.com/caniuse/#feat=fontface
  40. 40 http://blog.typekit.com/
  41. 41 http://fontdeck.com/
  42. 42 http://www.kernest.com/
  43. 43 http://forabeautifulweb.com/
  44. 44 http://forabeautifulweb.com/
  45. 45 http://blog.typekit.com/
  46. 46 http://ruleroftheinterwebs.blogspot.com/
  47. 47 http://ruleroftheinterwebs.blogspot.com/
  48. 48 http://www.kernest.com/
  49. 49 http://www.webfonts.info/wiki/index.php?title=Main_Page
  50. 50 http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  51. 51 http://opentype.info/blog/2009/07/29/why-webfont-services-are-the-future-of-fonts-on-the-web/
  52. 52 http://paulirish.com/2009/the-direction-forward-with-web-fonts/
  53. 53 http://zomigi.com/blog/roundup-of-font-embedding-and-replacement-techniques/

↑ Back to topShare on Twitter

Zoe Mickley Gillenwater is a freelance graphic and web designer, developer and consultant. She is the author of the book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS and the video training title Web Accessibility Principles for lynda.com, and is working on the upcoming book Stunning CSS3: A Project-based Guide to the Latest in CSS. Zoe is currently a member of the Web Standards Project (WaSP) Adobe Task Force and was previously a moderator of the popular css-discuss mailing list. Find out more about Zoe on her blog and portfolio site or follow her on Twitter.

Advertising
  1. 1

    “Now is an exciting time to be creating CSS-based websites.” … Really?

    2
  2. 2

    Could there be a future post going over css3 and html5 in specific?You know… New tags, new attributes, etc?

    0
  3. 3

    I hope so Andrew.

    0
  4. 4
  5. 5

    Thanks for posting this… The smart columns with CSS and Jquery is something I’ve been needing for a while.

    0
  6. 6

    Great article. I can use this. Dugg

    0
  7. 7

    Comment Zombie #2

    October 26, 2009 9:23 am

    Dugg too!! OMG!

    0
  8. 8

    Comment Zombie #3

    October 26, 2009 9:30 am

    OMG this article rocks.

    0
  9. 9

    Catherine Azzarello

    October 26, 2009 9:34 am

    I agree, Zoe–and have been using CSS3 techniques, including rounded corners, dropped shadows, sprites, @font-face, Cufon and Typekit.

    But I’ve been more of a ‘graceful degradation’ designer than ‘progressive enhancement’ one. Does that equate to the glass being half empty or full? ;-)

    0
  10. 10

    Comment Zombie #4

    October 26, 2009 9:43 am

    @CatherineAzzarello you do understand that “sprites” are not a CSS3 trick right? Neither is @font-face or javascript solutions like Cufon or Typekit

    0
  11. 11

    I’m just going to mention IE. I feel safe in doing this as I don’t have a cat.

    0
  12. 12

    Just thought I’d mention that one of the biggest problems with the @font-face is that in some browsers they display no text at all until the font file is loaded.

    It’s a wonderful new feature, but be sure that your site’s server has a very fast connection before attempting to use it.

    0
  13. 13

    @Marco Any competent browser developer should have font faces cached so you don’t have to wait for them to download except for the first page load. At least, it makes a lot of sense for me.

    0
  14. 14

    Great article! More like this, please!

    0
  15. 15

    Great…CSS3 and HTML5 = exciting times! Nice article pointing out some good ideas ;-)

    0
  16. 16

    Nice, great post! Can’t wait till part II

    0
  17. 17

    Enjoyed the article. I have a problem when it comes down to selling Progressive Enhancement to clients and explaining that a site will not look consistent across all browsers. Most clients I’ve worked with still see the web as not much different from print and expect a degree of consitency.

    0
  18. 18

    A very helpful article.

    0
  19. 19

    Kartlos Tchavelachvili

    October 26, 2009 2:55 pm

    “progressive enhancement” designing is 100% sure better & clever than “graceful degradation” design method.

    0
  20. 20

    The most exciting thing for me is typography, it has progressed so far in such a short amount of time. Every time I fire up Photoshop all I can think about is how to make some awesome typography.

    I hope it’s not just me.

    0
  21. 21

    Great post. Really useful material you wrote about!

    0
  22. 22

    I’m impressed, an article that isn’t a “top 10 blah-blah”. Keep it up!
    Not much new for me, but great to see it all collected into one article. I’m forcing my colleagues to read this.

    0
  23. 23

    This is a really insightful article!

    Designing for the future (that for many of us is already – or partly already – here) is one of the most exciting things when developing a new website. I’m certainly using these in my designs/developments & loving it.

    Designers need to point their developers to this article, and vice versa

    Totally agree on the merits of Progressive Enhancement too vs Graceful Degradation. For more, see this article:

    http://www.alistapart.com/articles/understandingprogressiveenhancement/

    0
  24. 24

    Nice article. I’ve been using CSS Sprites and a modular grid approach with sections that can be repeated for some time and it definitely makes a difference in load times and ease of development.

    0
  25. 25

    Excellent! I’ve never heard of CSS sprites, pretty useful stuff. Will use it for my websites :)

    0
  26. 26

    Fully agree with @Eyestein. Fed up with regurgitating top-10 lists I found this article to be both well written and to the point. Perhaps I should have know better seeing as this is Smashing Magazine ;-) Nonetheless, a tip of the hat to you Zoe for putting it together. Looking forward to part deux.

    0
  27. 27

    good article, very useful

    0
  28. 28

    This is all nice and good, but doesn’t that result in an awfully bulky testing procedure? You need at least 2 computers (mac, win/linux), >5 browsers with different installations/versions per browser and a couple of screens. I only test my websites in the newest releases of the 5 most spreaded browsers. I simulate small screens by reducing the window size of the browser. That’s it. If my website isn’t working in IE6… who cares :P
    I think it’s like building a car: you don’t have to test a sportscar on a gravel road and an ATV on a race track ;)

    0
  29. 29

    que buen articulo, muy apropiado para mi que soy webmaster , thanks you

    0
  30. 30

    @ptarmigan: testing a design shouldn’t be the problem, since you can install any OS on one computer with VM. Although, I admit, I don’t always check all the browsers I always check a Gecko based browser, a Webkit based browser AND Internet Explorer 6, 7 & 8 at least on Windows. In some cases (depends on site) I also check it on MacOS Safari and Linux Firefox.

    The biggest problem is making them all look the same!

    PS. my website doesn’t even work in IE8 :'( Blame M$ for not supporting HTML5 and CSS3 ;)

    0
  31. 31

    the Craigmond text link leads to Teehanlax.com ; )

    0
  32. 32

    I’mma chune in to Sash’s song “Mysterious times” for this one. :’3

    0
  33. 33

    HTML5 and CSS3 are really incredible, but most of us “webworker” have to support the Internet Explorer 6 too. And this Browserversion will be supported until 2014, that’s the main barrier for HTML5 and CSS3 and “modern Webdesign”.

    0
  34. 34

    Away some article

    1
  35. 35

    Mithun Sreedharan

    October 27, 2009 1:51 am

    Great stuff!

    0
  36. 36

    A Website Designer

    October 27, 2009 4:04 am

    Another great article from Smashing Magazine. The first line says it all “Now is an exciting time to be creating CSS layouts” The main bug bear I have is still needing to support IE6, which I am going to need to do today on a website, it just is unecessary additional work required for know problems like the has layout. I am looking forward to the future when we no longer need to support IE6 and as browsers become more versatile and compatable.

    0
  37. 37

    Great article. Glad to see that I’ve been using at least some of the techniques there already!

    Also appreciate one of the better breakdowns of “progressive enhancement” vs “graceful degradation” as descriptive terms. I’ve often thought this was excessive semantics, as the end result of either method is the same – full advantage of powerful browsers without losing functionality on older software. I’m glad to see the distinction between the two laid out as relates to methodology rather than end result.

    0
  38. 38

    I think that the most thing is need to come is the embbed typography. It’s necessary to define an standard to any browser can show.

    Regards from Nacho López.

    0
  39. 39

    Hey great content, very useful with some equally as useful links.
    Matthew Carleton

    0
  40. 40

    João Carvalhinho

    October 27, 2009 8:43 am

    Nice article… been reading some of this on books, but this is a very nice revision…
    The problem is always the client. I’ve just finished a CSS progressive site that works charms with newest browsers, up until my client said:

    “Funny…the site in my eeepc (Xp+IE6) is al borked!”

    Some of the links are also somwhat borked in IE6 :)… not awfull but borked at the eyes of any client.

    0
  41. 41

    Ruler of the Interwebs

    October 27, 2009 8:58 am

    Hey, thanks for featuring my blog in here! I saw a spike in pageviews and ended up a this article. A very good article, at that.

    I found kernest a while ago, and have so far been very happy with the server. I don’t see a noticeable lag with or without the custom fonts, and I think it helps make the otherwise bland design into something more classy. The interface on the site is great and it implements a cool system of “projects” that you apply your chosen font to.

    The only gripe I have is in the selection. Most of the fonts are geared towards functionality and readability and are flashy and stylish. I ended up sticking with a basic font for the text because there wasn’t really a good offering of basic text fonts on the server. However, I imagine as it becomes more popular that more fonts will be released for use

    0
  42. 42

    Extremely well summarized, Zoe! As Eystein noted, I’ve seen all this before and I practice most of it (I do not and probably will not use @font-face unless I encounter a perfect storm of reasons for doing so), but it’s great to finally see an article like this laying out the rationale for doing these things right.

    Yes, it really is an exciting time to be creating CSS layouts.

    0
  43. 43

    I’m personally hoping that with all these advancements, we’ll see an influx of clean and validated coding. I can’t tell you how many fellow CSS developers I meet who don’t care for either of those.

    0
  44. 44

    I’ve been using Kernest on my forthcoming redesign and am quite happy with it.

    I wrote about it a while back. My take: It’s a little confusing for developers starting out, but the experience is very nice for end users. And those are the ones that matter most.

    0
  45. 45

    You forgot to mention Typotheque’s Web Font service, which gives you both web and print fonts. Check their FAQ. Way cooler than Kernest, and more useful than Typekit.

    0
  46. 46

    unfortunately progressive enhancment sometimes is used as an excuse for unskilled/lazy web developers so they can say to client “hey, your browser dosen’t support it”. but then there are workarounds most of the time and in many cases you just need to code page different way to get effect done across most of the browsers, even without hacks/conditional statements. Of course it takes more time and skill and sometimes client is not willing to pay for it, but hey at least they should be aware of the choices instead of simply being told “IE6 your browser sucks”

    0
  47. 47

    Nice article going over some of the ground work. For some reason, I’m scared to move into CSS3 but your ideas about Progressive Enhancement and starting with IE6 instead of trying to work with it at the end are great. I’m really looking forward to the second part of the article!

    0
  48. 48

    Fantastic article – cheers guys

    0
  49. 49

    Hi..
    Link for the craigmod is given wrong :(

    0
  50. 50

    Been adopting CSS3 for a while now. Always interesting to show a client how it could look without the limitations of IE! Good to see some exposure.

    0
  51. 51

    I think it’s more about the progression of the browsers like I.E and others. I do think the evolution of the CSS is very good. However, all the browsers developers should work on the same way of building software that support all CSS functions.

    0
  52. 52

    Another great post. thanks!

    0
  53. 53

    I like having control over what the viewer sees and I prefer consistency across browsers. I could see designing with more css3 elements only to find that my client thinks the design is broken because he’s on ie6 and doesn’t get the cool drop shadow. I think some form of progressive layout is always necessary, I’m just not a fan of drastic changes between browsers.

    0
  54. 54

    sorry, just a temporary glitch.

    0
  55. 55

    thanx

    0
  56. 56

    things like this make me want to go back to css practice time!

    0
  57. 57

    I wonder, why some clients and web developers think that site should look same in all browsers. Real visitors would not care, if blocks have rounded corners or not, or if there shadow under headings. But they will be frustrated to download 100 Kb image-replacement for that big header.

    Look at computer games: if you have old graphic card, you won’t see fancy effects and shaders. Who can’t afford card, will see fallback graphics. What would be if game developers still required to support video cards from 2000 year?

    And it’s much easier to install new browser, than to buy/install new video card.

    0
  58. 58

    My amateur hobbyist web builder persona says: cool stuff, this helps a lot! My veteran journalist persona says: Good writing, well-researched with very useful links.

    0
  59. 59

    nice article and to the point. Provides a good starting point to update ur skills …. good work zoe

    0
  60. 60

    The idea of progressive CSS is certainly an entertaining one. I’d love to develop web pages that cater specifically to each browser. Giving each user their own experience based on their restrictions is absolutely ideal. Unfortunately convincing your client to front the cash for such a project is almost impossible. The result? spending more time on projects than budget allows.

    The amount of money spent just catering to ie6 is incredible on its own.

    0
  61. 61

    My hope is that designers stay away from the smaller font sizes so that I can continue to read the beautifully designed web pages! 11 pt type is my preferred size.

    0
  62. 62

    So much text, so little useful information :(

    -1
  63. 63

    Developers care because clients care, and why do clients care? Because it’s counterintuitive for them to pay for inconsistent behavior. They’re paying good money… Why can’t we it work the same way on all browsers?

    0
  64. 64

    I think that CSS3 feels great, kinda like the time when I went to Lucy Lu’s massage parlor and got that happy ending……..

    0
  65. 65

    I have read your stories but this is my initial time to comment, i love your work

    0
  66. 66

    the ‘examples’ with the fonts (@font-face) are NOT examples with that. They are only images. The links are broken. Not good

    0
  67. 67

    This post contains really good essential characteristics for CSS web layouts. I like it. Thanks for writing Zoe.

    0

↑ Back to top