Designing with Web Standards

Jeffrey Zeldman, Ethan Marcotte

Mentioned 4

Discusses how to use Web standards to create sophisticated Web sites efficiently, covering topics such as quality assurance, functionality, and accessibility guidelines.

More on

Mentioned in questions and answers.

I'm a desktop application developer, and I plan learning html5, but as it's not released, there are (almost) no published books and not too much infomation for beginners on the web... I feel I should start with html4 and the current web development skills.

I think I should start with html4, css, and javascript... but there are so many technologies related that I get lost :D So, what current technologies will be still used when html5 is released? I mean, what about "jquery" and "ajax"? I know they are javascript under the hood, but will they still make sense in the future?

What would you recommend me considering that I have just a little bit of html knowlegde, almost null CSS and completely null in javascript?

If you're already familiar with HTML4, v5 is not terribly different, mostly it adds new elements and attributes, and removes some.

For essential coverage of web standards, I suggest Jeffrey Zeldman's Designing with Web Standards (v3). It's largely theory and background, with little code. I recommend it. There is a sister book by John Allsop, Developing with Web Standards, which I have not (yet) read, but it is supposedly the implementation half of the topic the two books cover.

There is a book in the making by Jeremy Keith, HTML5 for Web Designers, on the new A Book Apart site (backed by the people of An Event Apart, including Jeffrey Zeldman). Jeffrey writes about the new book on his site, and provides links to other related coverage, including Jeremy Keith's take on it.

Dive Into HTML5 is solid, but it isn't really targeted at total beginners. You might want to check out Designing with Web Standards for getting a grasp on the basics of HTML/CSS. For the JavaScript side of things, I'd recommend JavaScript: The Good Parts. Also keep an eye out for Secrets of the JavaScript Ninja, which is due this summer.

Easy question. I used to develop websites back in the days of "classic" ASP, and when I'm asked to do a quick and dirty website for family or friends now, I still resort to direct HTML/ASP and some basic CSS and Javascript - I can get the sites up pretty quickly this way. However, I've had a few requests to design and develop some sites for pay, and thought I should catch up on my web skills. I have been using .NET 3.5, XAML/WPF, etc. for Windows apps, so I'm up on .NET, I'm just behind on the web end.

To the question: If I want to design/code a site that looks identical on all (at least somewhat recent) browsers and platforms, should I be using ASP.NET and AJAX? There might be a little database activity on the site, but not much, so I don't need an enterprise level, multi-tier extendable architecture... just something that looks good and works on multiple platforms without having to code all variations for each browser. After looking at all the ASP.NET books at the bookstore, it seems they all focus mostly on data and postback stuff. Is it still a legit option to use some basic, boring html and javascript with some Flash embedded where needed?

Let me know if I need to clarify the question. Thanks for your advice in advance!

Your question is more loaded than you think, but let me try to address a few points that I think are relevant.

First, how a site looks is almost completely dependent on the HTML/CSS you use and how you code the front end of the site and only slightly dependent on the server technology. So if you want your site to function across browsers and platforms, learn to code following web standards, with semantic markup. (Search on those terms for more info).

Also, ASP.NET comes in two flavors now: ASP.NET MVC and normal ASP.NET. I highly recommend, if you are going to get into ASP.NET, that you follow the MVC platform. It closely follows similar technologies (like Ruby on Rails) and will make the transition to other MVC platforms easier on you. Also, the MVC platform doesn't try to output as much pre-made HTML as straight ASP.NET will when you use their "drag and drop" controls.

Secondly, it really depends on the sites you are building, but straight JS (or JS + jQuery), CSS, and HTML -- and please don't use Flash unless you are embedding a video -- will actually work for a number of basic sites. If you need some things to happen on the server, PHP makes for a great platform. If you are working with advanced database access, and program flow, and since you are already familiar with .NET, then stick with it... MS has some great tools and resources to help you out.

Finally, a lot of developers use a favorite CMS or blogging platform as the backend of simple sites that still need the ability to manage the content easily. Expression Engine (CMS) and WordPress (Blog/Lite-CMS) are often used (both PHP based) but there are tons out there.

Good luck stepping up your game!

I have a question about how to layout the webpages and relate each image together so it can flow together.I have multiple many image that some will be layered partially over each other and some are just side-by-side with some space in between them. as well some pictures will be hyperlinks and some will be hyperlinks wih image changes on hover. as well some will be backgrounds to a links of links. I haven't build a real website before. i Just create applications and I am trying to help my friend with this project They designed it in PhotoShop, as well they have given me each piece as separate images:

Sample image

This is a bigger question that can be answered here, and you're going to need some more general knowledge on building sites.

First, decide whether you want to hand-code the site or use a WYSIWYG editor. If you want to use a WYSIWYG, Adobe Dreamweaver is easy to use and very good.

Now onto the code part. Regardless of your previous choice, you should have a basic understanding of HTML and CSS just for debugging. These two books helped me immensely when I was starting out:

Along with StackOverflow, you can also use the following sites as learning tools and a reference:

Finally, make sure to install the Firebug debugging tool for Firefox

Good luck!