The elements of professional websites

Hi there !
This is My 77th Post here
Post feedback, I’ll answer if I’ve time again (don’t know when..)

I want to share some knowledge about building professional websites.
First off, I can tell you that you’ve to read really much to become a professional webdesigner, and staying professional is not easy. The web is changing insanely fast, so don’t set everything on one technique, better use hybride technologies (opensource "collected wisdom").

There are different usersgroups:
IE users and experienced browser users (Safari,Firefox,Opera...).
You should see what they see in their browsers.
I definately recommend you:
http://tredosoft.com/Multiple_IE and
http://pearpc.sourceforge.net/,http://www.pearpc.net/
Or use http://www.browsercam.com/ to make viewport screenshots of your website from all common browsers.
You can install multiple versions of IE on your pc, and run Apple OSX Tiger while you run Windows XP or Vista parallely.
This gives you a greater opportunity to fix your bugs, because you can see the Browser-Bugs "live".


The incompatibilies between the browsers seem to be very slightly, but the more you know, the more complicated it becomes.
Perfectionists would finally give up, due to the hardcore effort you got to put in a interoperable website.
But people don’t give up, because every problem has a solution!

Try to make a 3Column (hah or better grid based) website with equal height columns look same on IE4-IE7, Opera, Firefox, Safari!
You are freaky good? That’s easy? Ok! Now try to make the website look adaptively interacting to resolution and available screen size. hehe.. guys ’n gals..there’s a solution also =) No technique is perfect, but some are very close beeing it.

Here are things you got to pay high attention at:

1.Browser rendering indifferencies (ie. margin,font-size, etc.) need to be fixed.
2.Browsers have to support same standards (ie. IE and png,canvas,abbr,q, etc.)
3.Codepages can make problems (starting with the DB, or the CMS and the client have to support same standards)
4.Metainformation need get managed (SEO optimizing,RDF,OWL)
5.Backward/forward compatibility and fallback to nonJS btw. nonCSS (Textbrowser) (more Browsers, more incompatibility)
6.Mulitlingual managability (Backend and Frontend internationalization i8n)
7.Feedmanagement/Intersite operability (RSS/ATOM../interoperability ie. digg it)
8.According to WCAG(2) Guidelines, Sitemap,AGB, Impressum, Contact..
9.Useability/Accesibility (don’t discriminate disabled people)
10.Stable and secure (hacker proof) Content Management System (Rights management etc.)
11.Design/Aesthetics (minimalism or lollipop? you choose!)
12.Adaptive Multicolumn, Multidevice CSS+JS layout (font-size and content adaption for handys,pdas,widesreens,tvs,printers, etc.)
13.Hybride techniques PHP,AJAX,SVG,FLASH..(ie. sIFR)
14.Decent multimedia content (improves site quality for most users)
15.Ad/management, Affiliates.
16."Content Quality/Continously growing information" (Psychologicaly elaborated placement of products,ads or logos)
17.Professional looking images
18.RPC access (possibility to add content from anywhere and any device, or directly from the desktop blogdesk)
19.Flawless Navigation
20.Live support

I can tell you that supporting buggy browsers lower than IE 5.01 makes all your webcoding a pain.

So, better remove css for very old browsers IE4/NS4 etc. (instead of fixing bugs for them):
@import "css/non-IE4-and-NS4.css"

LINKS:.............................................................................................................................................................................................................................................
I don’t have the time to post all the links I have, but I’m sure you will have the feeling of a REVOLUTION after reading all links.
http://leftjustified.net/site-in-an-hour/
http://www.digital-web.com/articles/architecting_css/
http://sourceforge.net/projects/ie7/
[HOT] Web Developers Handbook
http://jquery.com/
http://methvin.com/jquery/jq-corner.html
http://jquery.com/demo/thickbox/
http://www.456bereastreet.com/lab/transparent-custom-corners-borders-v2/

[url=http://www.tanfa.co.uk/css/examples/rollover-images-no-preload.asp]http://www.tanfa.co.uk/css/examples/rollover-images-no-preload.asp
http://css.maxdesign.com.au/listamatic/horizontal26.htm
http://www.whymicroformats.com/pages/home
http://www.erik-rasmussen.com/blog/2006/12/04/the-shadower-realistic-drop-shadows-in-javascript/
http://www.clagnut.com/blog/1663/
http://www.tanfa.co.uk/css/layouts/flexi_floats/
http://blog.webbforce.nl/?cat=1
http://www.fiftyfoureleven.com/resources/style-guides
http://particletree.com/features/dynamic-resolution-dependent-layouts/" target="_blank" rel="nofollow">http://particletree.com/features/dynamic-resolution-dependent-layouts/http://particletree.com/features/dynamic-resolution-dependent-layouts/
http://alistapart.com/articles/switchymclayout
http://yaml.de commercial for business use..I’ts great, but I don’t like their community
http://www.subtraction.com/archives/2005/0901_the_funniest.php
http://www.csshilfe.de/techniken/
http://www.drweb.de/webdesign/image-replacement-technik.shtml
http://www.drweb.de/webdesign/webdesign-quellensammlung.shtml

[table][tr][td]
The expense of features

• download size
• number of requests
• CPU utilization
• memory usage
• # of browser/scenario forks
• complexity/time to get started
• error-proneness
• maintainability
• testability
• marketability
• interoperability
• competitiveness
• distribution

[/table]

Thanks for the writeup, very informative.

Thanks for the informative post !

Lots of good points in what you said, and I guess lack of reactions is due to the huge amount of info you threw at us there
Lots of those link are bookmarked already but I sure will check out the ones I don’t know about...

As you say, webdesign is moving soooo fast that you can be in trouble if you have to much work already I mean you need almost a third of your time (if not more) self training... can be hard at times ! That’s for the technical side of things. There are many other skills you need if you freelance in this business : listening, understanding needs, being able to listen to users (yeah, that sure is sometimes opposite of using bleeding edge techniques) but also be creative which can be hard to perform at full throttle at all times... creation takes a toll which requires a least some downtime

The key thing for me is : keep curious, hone your skills, learn new stuff and never think you have it all figured out !

Wisdom is like a plant.
First you need to seed it and it’ll grow if you give it it’s water regularly.
When time comes, it’ll yield fruits and taste excellent!
Your creativity will be like the weather and your experience as strong as your plant.

Well said Xsss4shell

(Edit : deleted post in response to davemod -> spammer).

Sorry, but I didn’t get it. Which link do you mean?
I didn’t post commercial links, except the one I told (and private use is free for that link).


I read the links you sent, but I didn’t find any links equal to mine.
I can remove a link, if you’re happier then

Xsss4hell: davidm is referring to davemod’s post (not yours), which has since been deleted.

Yeah I deleted the content to avoid further confusion

Quote from: Xsss4hell at Mar 06, 2007, 04:11 PM

I can tell you that supporting buggy browsers lower than IE 5.01 makes all your webcoding a pain.


I think your pretty safe to code for 5.5+ ... we make two main assumptions about visitors using anything less:::

- their box is so old, they don’t have enough ram to view websites "with images"
- they haven’t used their computer for so long, they’ll eventually figure out their software needs updating

Here’s our latest visitor browser stats, from one of our busier sites.

IE7 - 21.9%
IE6 - 59.7%
<=IE5.5 - 0.6%
Firefox - 13%
Netscape(all) - 0.3%
Safari - 3%
Opera - 1%
Other - 0.5%

Coding for "modern browsers" covers about 99% of visitors, and with fewer bases/"buggy browsers" to cover, the job these days is significantly less complex than perhaps 12 months ago

@Starbuck
I mentioned that.
Real-life shows us, that most web-devs don’t respect browsers lower than <5.5. You decide.

But friendly web-devs code crossbrowser friendly, no matter which browser and version is used.
He would use available techniques to make most out of the site.
People often forget to make things accessible for disabled people(real-/virtual-life)..
I’d like to see a statistic which shows ie. blindreader users and "normal" users.

An easy trick is to use the import command in css with quotation marks. Old browser <5.5 don’t support it.
So, better very little but working css than not working css, right?

Believe me, coding one site, able to handle all conditions (browser and version, resolution and font-size, font-zoom and content-zoom) is very very hard to do.

I’m actually (still) coding a site that redefines a html template. (any professional help is appreciated)
- any order column
- adaptive/perceptive content compression/adjustment
- every tag looks equal in any browser
- accessible
- crossbrowser standards compliant
- modular concept
- embedding of all microformats
- rich media compliant (aural, braille, tv, handheld..)
- png24/alpha
- any font useable
- sound management
- hybrid layout (ajax,unobtrusive js, svg, flash, php, etc.)
- multifallback cssOff, jsOff, flashOff, svgOff
- video-motion action/reaction
- revolutionairy new password system
- very detailed sample
- very easy to modify (modular)
...
...
And the best: Minimalistic design and look, to make the user experience the simplicity of complexity.
Yes and one to none bugs if possible
Stopped counting after >1000 lines of css code. Don’t worry it’s not compressed and full of comments.
I recommend compressing css,js,flash and html before putting online.