6 replies [Last post]
gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 13 years 7 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

heya,

I just watched this impressive demo on building a site:

http://mboffin.com/stuff/designline-openair.gif

and it amazes me that people layout the bare markup and call in the css styles as a last step... I saw Doug Bowman do this at web essentials and to tell the truth it intimidates me a bit!

does everyone here tend to style last?

I tend to throw down a nav, then style it and then move on to the next component but maybe I am losing semantic value this way?

interesting to hear others opinions.

*EDIT
to put this link into context this is the link to the article, which Tony posted in Geeks and Humor among others from a Russ Weakly link page.
http://mboffin.com/post.aspx?id=1619

euio
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

css building

hello!

Interesting gif you got there!

Well I believe there's nothing wrong with throwing elements in and styling them individually. Why would the semantic value be affected if in the end you'll get the same mark up?

My coding technique is way different to the demo but probably more similar to what you tend to do... which is throwing in containers then design, then the navs, then design, then the content texts, then design...

I have to admit that that gif has given me new ideas on different yet effective styles of handcoding and also broaden my perspective of how flexible css can be.

Just as most us comfortably stick to our own way of doing things, I cannot really say I'm going to adopt any more style neither am I sure if I'll practise it. Well that is unless, someone steps up to me and say the way I do it is wrong... provided that someone is Zeldman... ^_^

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 47 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

css building

For me, everything always starts with the aesthetics and usability, but within the confines of a clear understanding of what can be achieved with XHTML, CSS and PHP etc.

For a website (as opposed to a web application, which I usually develop as I go along), I always start off by designing it as a multi-layered Photoshop 'visual'. From this I will prepare flat 'visuals' of the home page and a page deep within the nav structure. These then go back and fourth to the client until they are happy with the look, after which I use the PS master file to create the graphic files and then I create the XHTML, CSS and PHP files (etc.) to match the visuals.

Obviously I design the visual with a full understanding of what I can or cannot achieve with css, and also with a clear idea in my mind as to whether the site will be fixed or fluid etc. In nearly every case, the finished site looks near-identical to the flat visual. If this method were followed by a designer/coder team then it probably would not work as neither person would understand the finer points of what the other person could or could not achieve.

Life's a b*tch and then you die!

euio
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

css building

oh yea photoshop, how can I forget the program I use along with notepad... First photoshop, do my graphics there and decide on layout features from there. The ps canvas would be where I align and agree on measurements. Laughing out loud Shock Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 24 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css building

In some senses this sounds more to do with demonstrating an understanding of the nature and relationship between CSS and HTML than an actual proscribed method of coding.

To say that there is a particular best method of approaching laying out a page is a little misleading but what is important is an understanding of how the two areas work together and although not having had the benefit of listening to the lecture I would think that this is what was really being demonstrated here.

It's always worth remembering that in the final analysis it is HTML markup that delivers the content that is actually viewed and that CSS is just a method of Styling said content and as such, ought to be regarded as a secondary issue after delivering semantically correct markup.

This is why it's always good practise to disable your styles at intervals and reflect on the plain Html code delivered in it's pure form and whether it still makes sense and conforms to a semantic ideal.

It should be perfectly possible and indeed would be good discipline to be able to layout the HTML markup first without any hint of styling.
We should have an understanding of the flow of the document unstyled and of the inherent default styling of elements, supplied in order that they may make some presentational sense when rendered.

I would consider the ability to do this as a required discipline and one that should come with experience and would not regard someone in awe who was able to do this.

Imagine a fairly standard fixed width layout of the oh too common blog page style. we know roughly what is entailed in the major elements and I would happily lay down all of those first, blind so to speak, were talking about a main div call it wrapper containing say another nested container div, a header, a div that will become a side bar and a div that will be the main text content usually followed by a div that would become a footer nested last before the wrapper closes, this is all fairly easily retained in the minds eye along with the understanding of the natural flow of these elements and I would be fairly confident that I had the basic structural html written and ready to style.

Likewise I would also be happy to style these elements blind as well without resorting to checking every style rule entered.

This ability should not be intimidating but seen as a natural ability that comes through experience I guess, a bit like hand coding, which people also regard as being some arcane mystical ability and far too hard to grasp when nothing could be further from the truth. I have said it before but I never set out to hand code and do not regard myself as having any natural coding talent, I only started hand coding because I found that I could, I stumbled onto the ability through experience not devotion but then realised how much simpler things were and how much more sense things became as a consequence of working that way, the same should be said of the example you witnessed. Do not be in awe rather regard what you saw as a demonstration of the way that you should approach the styling of content.

Having said all that how you end up working is really your affair if you want to swap back and forth laying out a div then styling it that's fine, I tend to lay out the basic html and style that straight away, I like to see the design taking shape as I go and wouldn't really code the html in it's entirety, I would also always advocate good old pen and paper to flesh out a design.

Many do work from a photoshop design, which is fine as long as they retain a good idea of how that design will slice up and relate to actual divs and what limitations will be placed on the CSS and markup by that design, Image led pages are fine as long as a feel and respect for the code is retained and it isn't just regarded as something to hurriedly throw together serving only to act as place holders for a set of image, true layout and semantic coding are more than just poor subordinates to a pretty picture, which is seen a lot at the moment.

So your method of coding is your choice do not worry too much that you must follow someones elses method, if yours works great, but an understanding of the two halves in isolation is definitely important and ultimately benefits your coding ability.

The demo your saw Doug Bowman give was clearly interesting but view it as a conceptual example of how the two parts act as a symbiotic whole.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 13 years 7 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

css building

interesting feedback, thanks guys...

I have updated the link above just so you can get more info on what the developer was trying to achieve.

Hugo: when I say I am in awe, I am definitely talking about experience. I saw Doug Bowman do one of these live demos once, and while realising that this is not the way to code in all environments. I was definitely "in awe" over people who have this kind of grasp on css that they can work in these alternative ways. Zen Garden development is one of these examples.

I find with my increasing experience I can code blind a lot more and know what to expect from different browsers with less and less visual testing. But I figure I have a long way to go.

Just like I am in awe of some of these people on this forum who seem to be able to answer every thread! Shock

cheers.

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 13 years 12 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

css building

I'm one person who likes to see it come together gradually, and work out the little bugs as i go, so i usually break my code into sections, like the header, menu, columns (if any), footer etc.

I've tried styling last before but i found it kind of tricky.

I am Dan, Dan I am.