So , its write the content, on paper really first, you know the white thin stuff , that has the blue or black squiggly lines on it ! HAHA ! Then put it in a clear , well structured document, with relevant headings , … wait a minute , basically if my english skills are good enough , I can really forget all about web design and just become a writer, true statement surley. Obviously, not all web design skills, but this is what it really all about.
I supose to sum up its , 1. usefullness 2. Relevance 3. speed , and forget graphics completly untill the end. I THANK YOU FOR THIS HELP BY THE WAY. its really clarifing what I have learnt, you are a Guru.
all I want to do is layout this
name_______________ company _________________
phone_______________ email __________________
without tables so they go next to each other and the control between thats not <br />'s . I’m fairly new to laying out with CSS and the recomended techniques, i’m an old tables and 1x1 dinosaur who’s only recently made the jump to lightspeed !
really what I am tryng to do is use more images to add bespoke design, I’m aware of all the downfalls of over use, but I design them very small in FS and just want to take away that standard feel , to give me the selling edge over my competitors. I really need to know the do’s and dont’s and get a standard way of building my sites. I’m trying to start as I mean to go on and adopt standards that carry through to the future. I try and follow w3c and xhtml strict and google advice. I learnt it all back in the day when anything and everything went and it was very adhoc , looks ok , run with it ! So now I feel there more web standards i’m trying to retrain myself in a pure way if you like. Thats ultimatly my goal, i’ve learnt so much I dont need, bits of this and that, this time I want to make sure I’m learning it from the ground up. Its there an exact standard way now a days ? You mentioned I should first semantically design the page, without style but I design in illustrator and then build it as its designed not the other way around. I know this is what big design agencies in london want you to do, they wont accept no’s for answers when it comes to laying out a multi £1000 deisgn. I supose you mean group the information first and then put the ribbons on the boxes ? HELP , i’m getting scared !!! Do I really know knothing , its feels like it again.
Sorry for the multi-post multi-replies. Was so busy coding the answers I didn’t read later posts.
You say that like it’s a bad thing. In OS design there’s something called ‘interface guidelines’ so that users will have a familiar and pleasant experience. For web development that’s what the WCAG is for.
There’s lots of other stuff you can do to make it pretty besides playing around with the fonts. I’m NOT looking forward to CSS3 font support since it’s going to mean more and more people bloating out pages with multiple font downloads, possibly even in faces that don’t render well on screen or are even legible.
Arial,helvetica,sans-serif might seem a bit plain, but at least everyone can actually READ IT. More than I can say for a LOT of the fonts people want. “Hey can you do it in Comic Sans?” — and my response “Oy, can you go schtup yerself?”… Lord help us when people start trying to use script fonts - it’s bad enough when people do it as images and you can’t figure out what ANY of the button images actually say…
I’m starting to get the NASTY feeling in the near future I’m going to be using Opera’s user.css a LOT more on sites just to force “* { font-family:arial,helvetica,sans-serif !important; }”
Back in the 90’s I was working with print a good deal, and when I first started doing web work like a lot of people in “design” I was obsessed with things like glyphs and the ‘perfect font’ – but then around 2003 or so I realized that on the low dot pitch of most screens fancy fonts just get in the way of getting the content to the user.
… and that’s what websites are for. It’s about when I started flipping my design process around 180 degrees to work with my current design order…
You list SEO on said site as a feature - if you know SEO you know the rule: “Content is King” – everything else is window dressing. So why would you draw a pretty picture and then try to shoe-horn the content into it? Doesn’t make any sense.
That’s how I came up with my approach, I may have already mentioned it.
Step 1: Write the content that’s going on the page. At the very least put together place-holder content (menu items, headings and some lorem-ipsum) so you have something to apply markup to.
Step 2: Mark up the content in semantic HTML saying what elements are, NOT how they are going to appear. Appearance should have NOTHING to do with the HTML - that’s NOT HTML’s job. This is the stage at which you get any back-end functionality server-side working - BEFORE you even worry about appearance.
Step 3: Bend that markup to your will with CSS to make the layout, you may have to add a few simple image sandbags and extra DIV at this stage, but those should NOT be allowed to interfere with what it looks like when CSS is disabled or the tags already written.
Step 4: ONLY after the above three are complete do you go into your paint program to make the graphics you are going to hang on the layout.
Even if I was using the styled font as images (which here looks uglier than cleartypes rendering - but I’ve never been wild about how most image programs render fonts which is why I’ll often HAND anti-alias them one pixel at a time) I wouldn’t actually be trying to apply them to the layout until the final step…
It’s a bit different a way of handling designing a site, but the end results usually end up better for SEO, better for Accessibility, and generally aren’t THAT plain since you can still do a heck of a lot.
The approach also means it’s more likely for users to like it - I am more impressed by pages that load quickly and get me to the information I’m after, and are clear and concise as to what things are, than I am 90% of the ‘eye-candy’ nonsense many people churn out and call websites. If nothing else, LOOK at the big successes! Google, Amazon, E-Bay, even FaceBook, mySpace and Slashdot - these aren’t exactly stunning gems of graphical design. (or even well coded in most cases)… This is because the developers of those sites realize that people visit websites for the CONTENT, not the goofy graphics you hang on them.
Which is a bitter pill for anyone with artistic leanings to swallow - I should know, it took Dan shoving it down my throat for two years to convert me…
Not to drag this WAY off topic, but I figure if I outline my approach you can come away with a bit more useful a way of handling things.
Like the form or even the page as a whole - whenever you add an element ask yourself “is this tag adding meaning” - span and DIV do not, empty tags do not - if they are there as presentational hooks, ask “do I need this tag or can I apply the styling to an existing element”… If you use a heading tag ask “is this a heading for a section of content” - if the answer is no, you shouldn’t be using a heading tag on it.
You’ll see page after page where people are nested ten div deep - headings around non-heading elements or WORSE, spans, DIV or P with classes on them doing heading’s job, resulting in pages where you’ll see hundreds of K of code to deliver maybe 5k of content - that’s not going to blow anyones skirt up.
It’s only as complex as you make it, and it is WAY to easy to make things more complex than it needs to be. MOST (but not all) of that can be blamed on the bloated half-assed presentational markup that came out of the browser wars. Now that CSS 2.1 is semi-deployable (there are still parts I won’t even TRY to use on a production site)
oops, helps to FINISH a post…
<snip>Now that CSS 2.1 is semi-deployable</snip> we can finally get back to having HTML do it’s job of device neutral content saying what things are - and letting CSS do it’s job of saying how they should appear. Separation of presentation from content - the cornerstone of modern markup and CSS techniques.