Hi Friends, I am not an expert in web designing. SO, I want to know that what are the common mistake that a web designer should have to avoid while designing a website to approach a quality website?
Here are the details to avoid while website designing for every web designer - User friendly navigation - Color should business type - User friendly navigation - Couple of typeface - Consistency of entire site - Do not make busy - Graphics should be clear and up to services you offer - Quality code - W3C Validate code - Page layout should be user expereince I hope above points will help you to create user friendly website design.
Cross browser compatibility is a hard one to master - I almost always forget about IE. Check out BrowserShots.org to test your site in hundreds of different browsers across an array of operating systems.
There's a thing called 'validation' -- it makes sure what you have is ACTUALLY HTML, and not gibberish. http://validator.w3.org/ In some browsers you can even set up keyboard shortcuts to send the currently viewed page to the validator. (like Opera, which is my primary). Though... I think CreativeWebMaster's broken engrish got it backwards, those are things you should DO, NOT things you should avoid... though increasingly I think that's not a legitimate user and some form of bot or spammer. "Page layout should be user experience", "color should be business type" -- Whiskey Tango Foxtrot does any of that even MEAN?!? THINGS TO AVOID on the other hand... Presentational Markup -- HTML is for saying what things ARE, NOT what they look like. Presentational markup became the norm with HTML 3.2, and seems to be what the train wreck of idiocy known as HTML 5 wants to bring back. You should be choosing tags like numbered headings (H1, H2, etc) based on their meaning -- H1 being the uppermost header of which ALL subsections of the page are... well... subsections... That's why you should only have one H1 and it should preceed all other headings. H2 indicates a subsection of the H1... H3 being a subsection of a H2 all the way down to H6. You need to go deeper than a H6 there's probably something wrong with your layout. This is also why it's 'improper' and 'broken' to skip over heading levels. If you're choosing heading tags because of them making bold bigger text, you're choosing tags for the wrong reason... and that applies to pretty much every tag, you should be asking "what does this tag MEAN", NOT WHAT It LOOKS LIKE BY DEFAULT!!! -- P is for paragraph, OL and UL are for lists... TABLE is for tabular data -- that's semantic markup in a nutshell. Tables for Layout -- A kludge from the HTML 3.2 era that continues to hang on like a screaming rapacious swamp sow, despite having no legitimate reason to be used in any code after 1997. I'm NOT SAYING DON'T USE TABLES... if there are obvious rows and columns where the columns are all the same type of data and a row is all related, that's tabular data. If you're using a table just because "I want columns" you're missing the point! Especially since with 'responsive layout' being the new ideal what's three columns at one width could be two columns or no columns at other widths. Fixed Width Layouts -- This particular steaming pile of manure typically comes to us courtesy of the photoshop jockeys, who generally don't know enough HTML, CSS or Accessibility norms to be designing Jack! Designing to the perfect fixed width for you will probably end up being useless for anyone who doesn't happen to have the same magical combination of screen size and resolution you designed for. Despite being an accepted practice by the sleazeball **** running the industry these days, it's an accessibility train wreck and the antithesis of the past decades progress on that front. I advise making a semi-fluid layout with an elastic (EM) max-width, with break-points in the CSS using media-queries to strip off or add columns or other elements when/where appropriate. Fixed Metric Fonts -- this means declaring your fonts as px (pixels)... and should be avoided whereever possible ESPECIALLY on any 'flow content' / copy... aka the actual text content on the page. There ARE times you will be forced to use px font-sizes; underneath image replacements, when interacting with small image backgrounds like buttons -- but those are isolated cases and not a justification to just make every blasted paragraph and heading on the page inaccessibly tiny to people who don't want to have to dive for the zoom. That's why fonts should be declared as much as possible in %/EM (beware if you set PX on a parent all child %/em will be based off that PX, defeating the point of using %/em) -- doing so means they will auto-scale to the user's browser or even OS preference, like Windows "Large font/120dpi". Simple fact is that LF/120dpi or even higher resolution users are more likely to go 'screw this' and go to some other website than deal with the zoom -- even more so if you've combined fixed fonts with fixed width, and a comfortable zoom doesn't even fit the screen width. PSD First -- The above concepts generally tend to make starting from some goofy picture of a website a completely back-assward approach to design. One should start with your content or a reasonable facsimile, mark it up semantically, bend that markup to your will using CSS to create the layoutS (YES, PLURAL), then and only then do you bring the Photoshop jockey to spank it all over the display. This is because people visit websites for the CONTENT, NOT the goofy graphics you hang on it. Generally speaking 99% of the sites designed in Photoshop and 'sliced up' into layouts are inaccesible broken buggy train wrecks of idiocy, that if anyone actually cared about accessibility or functionality would never see the light of day. Problem is most people greenlighting sites are too easily swayed by the flashy picture, then wonder why their sites are failures. LOOK at the major success stories of the Internet -- Amazon, Google, E-Bay, SlashDot, Facebook -- these aren't exactly a visual tour de force. Javascript Libraries -- MOST of these fat bloated idiotic garbage are there to do goofy animations, do things client side that have no business being handled client side, or just generally piss all over the accessibility of the site they are on. While they do have legitimate uses, for things like true web applications -- on the vast majority of sites people put things like jquery, mootools, YUI, etc on it's nothing more than a waste of time, bandwidth, and pretty much destroys the usefulness of the page it's on. There's a reason browser extensions like NoScript are gaining in popularity. CSS/HTML Layout Libraries -- Pretty much by definition they are code bloat, lock you into fixed/inflexible design, and rely on presentational use of classes in a manner that to be frank, defeats the entire point of using HTML and CSS in the first place. Grids -- So called "grid systems" by their nature force you into certain dimensions for... well, I've never quite figured out why/how that would even be useful UNLESS you're throwing accessibility out the window with fixed widths. Even when done 'elastic' they too tend to bloat out the code for nothing, and give anyone not on the perfect magical combination of screen size the finger. HTML 5 -- I could go on for HOURS about the sins of HTML 5... Instead, how about you follow the article link in my signature. Overuse of typography -- It's always tempting to use fancy fonts, and CSS3's webfonts have made it even easier to do; and that's a problem. Fancy non-standard fonts do not render consistently across platforms, often cause legibility issues, and on the whole suck down a LOT of bandwidth. For that reason they should be used with an eyedropper not a paint roller -- and never on any 'content' text you actually expect people to read. Serif fonts -- There's a lot of research that says serif fonts improve legibility, and this is true... IN PRINT! A mantra one needs to keep in one's head is "THE WEB IS NOT PRINT!" - in this case the lower number of dots per inch of a display means serifs cannot be formed clearly and blur characters together making them harder to read. Traditional displays are physically 72 to 75dpi (which most OS incorrectly treat as 96), newer displays like a 24" 1920x1080 are around 96dpi (which some users like myself force the OS to treat as 120dpi) and even the big fancy 27" 2560x1440 IPS barely come in at 120 to 128dpi (which I've seen some windows users setting for 144dpi at the OS level)... you compare this to the cheapest laser printer out there's 300dpi, or modern print's 1200dpi, or analog print and you just don't have the dots to pull off fancy serifs reliably... so sans-serif should be the order of the day for any flow/content/copy on SCREEN. You want to make a print stylesheet with serifs knock yourself out... after all that's why LINK has a MEDIA attribute in the first place. ... and that's just a handful of the common snafu that people seem to sleaze out on websites. Again, see the articles in my siggy for more.
Some software comes with validators that check your code as you design to make sure your site will work correctly once it's online...I don't know of any advance types of such software though.
Hi creativewebmaster, How W3C helps designers to avoid mistakes during website designs .could you please explain in briefly and how to use this tool for designing purpose .