Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

So, what is an HTML design pattern?

 
Ranch Hand
Posts: 46
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Are we talking about layouts, or something more fundamental? I've not heard the term design patterns applied to HTML before.
 
Ranch Hand
Posts: 697
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I first heard about patterns used in Web design context in this book.

How similar/different is Michael Bowers' book?
 
Sheriff
Posts: 1367
18
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
My guess is that one starts talking about "patterns" mostly when bringing CSS into the mix, though on second thought - I'm sure that there are some all-HTML things, like tabindexes and other accessibility deals.

The first thing that comes to mind is CSS, really - getting a good grip on how all the elements of CSS interact, and different approaches to different types of problems, and then getting that to work across all platforms and browsers.

I'd venture a guess that "patterns" might address questions regarding the semantic use of lists, nested, definition, or otherwise (definition lists for testimonials, with the name as title, testimonial as description? Or would blockquote/cite be better for this?)... perhaps even basic things, like marking up navigation as lists in order to get accessible separation of links, and then using CSS to whip the list into whatever shape you like.

Maybe html/css patterns also deals with ideas about what works best with respect to images, image swapping, images as text, alt tags, images-as-text in the background with text that gets shoved out of the way and is just visible if images get turned off, all these things that can make life miserable for a developer when trying to figure it out on ones own.

It would be great to hear more about how to AVOID hacks. When one browser suddenly puts a horizontal scrollbar on things, and a second browser adds about 700px to the width, and a third one seems to have made it impossible to click links, because it somehow interprets the z-index differently... I'd love to hear more about patterns that allows you to skip the extra stylesheet for IE6/Win, the be-nice-to-Opera, the zooms, 1%, has-layout, voice-family-inherit, /* comments \*/, * html, you name it!

Whatever it is, I'm very eager to read more about it, since I suspect that it will make my life a whole lot easier.
[ October 08, 2007: Message edited by: Katrina Owen ]
 
Greenhorn
Posts: 8
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I can't wait to know what the 'Pattern' really means and how it makes life more easier ^^ .
 
Author
Posts: 42
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Katrina hit the nail on the head. Every item she mentions is a pattern in my book, Pro CSS and HTML Design Patterns. You can go to cssdesignpatterns.com to see all the examples in my book.

A design pattern is a general way of doing something. It is the pattern behind a recipe. In a cookbook, a recipe specifies the exact ingredients. A pattern describes the underlying basis behind a recipe or a set of recipes. For example a cookie recipe specifies exact ingredients and proportions. A cookie pattern specifies the general principles for making cookies (flour, sugar, salt, eggs, spices, bake in oven, etc.) In academic circles, a design pattern has four parts: name, problem, solution, and tradeoffs. My book names each design pattern, discusses the problem, shows the solution and discusses the tradeoffs for when the pattern should and should not be used.

My book is very practical, each time I show a pattern, I show examples of exactly how you can use it as a building block in your applications. All its examples work in all browsers and are fully accessible. Because the book is practical and applies each patterns in all the major browsers, it is also like a cookbook. I like to think of it as a CSS book that is full of patterns you can put to use in your applications. Each pattern is a building block that you can combine with other patterns to create web pages.

My book focuses on nuts and bolts patterns because they are the hardest to figure out. For example, it shows bullet-proof ways for creating semantic and syntatic patterns in XHTML, for combining CSS and HTML, for creating layouts (absolute, relative, and floating), for styling and spacing text and images, etc. It systematically goes through every meaningful and usable combination of CSS property and HTML element and organizes them into reusable patterns.

My book doesn't focus on high-level CSS and HTML design patterns, such as patterns for designing entire web sites, patterns for search engine optimization, web-marketing patterns, etc. High-level patterns are useful and important, but I think the real problem is actually finding the precise patterns that let CSS do its magic. This is a real problem and it is the problem that is solved by my book.
 
Katrina Owen
Sheriff
Posts: 1367
18
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Heh - and I was just summing up all the things I need to know more about to feel like I can do my job properly.

I get so tired of seeing code that is made up of exceptions to previous rules. It is as though most of the web sites that actually are trying to follow the web standards end up writing 548 special cases and 721 exceptions to get the thing to display.

Last week I was given a project to 'touch up' a website that was basically done. It was a relatively simple, ten page brochure type website, and it had "solved" the same problem in three different ways. We are not talking similar problem, we are talking the EXACT same component, replicated across ten pages, done in three different ways. I redid the whole thing in secret.
 
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Originally posted by Katrina Owen:
I redid the whole thing in secret.


Heh heh... the "stealth refactor" is a specialty of mine.
 
Katrina Owen
Sheriff
Posts: 1367
18
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Stealth Factor
Well said!

I went and bought the Pro CSS and HTML Design Patterns book today. I was going to do it yesterday, but life got in the way.

Sanity, here I come!
 
What? What, what, what? What what tiny ad:
the value of filler advertising in 2020
https://coderanch.com/t/730886/filler-advertising
    Bookmark Topic Watch Topic
  • New Topic