Today we’ll look into the web design practices and trends of the single biggest name in software to see if we can learn anything about some mistakes to avoid in our own work.
Feel free to comment to either agree or disagree with the suggestions below. As professional designers your insight is valuable and I look forward to your thoughts.
Making your website accessible to everyone is not only a moral duty, it’s a legal obligation. Many organizations, including the International Olympic Committee, have been sued for not making their websites accessible enough. With 50 million Americans suffering from some disability or other, improving your site’s accessibility makes clear commercial sense too.
How do you begin building a website?
The majority of developers probably start from scratch or pull in a few resources from previous sites. The more organized among us have developed a custom toolbox from which to begin a site that proves to be an essential part of their workflow.
Today we’ll discuss why you should consider building your own front end package to serve as a starting point for every single site you create.
This will be the final article in our series on HTML5. This go around we’ll have a brief look at which new HTML5 technologies major browsers are officially supporting and go over some techniques you can use to take advantage of the new elements in your coding today. Finally, we’ll discuss how you should start preparing to support HTML5 in all the sites you build from here forward.
In the last article, we looked at a number of new elements introduced in HTML5 and how to implement them properly. In this article, we’ll again be discussing a set of new elements but this time we’ll be examining only those HTML5 elements that represent a significant semantic change to the way you structure your sites. This article will cover how to use each of these new elements in a way that will bring much needed relief to the div-itus that plagues the structure of so many sites today.
A couple of days ago we posted an introduction to HTML5 and briefly covered some of the content we’ll be outlining in this series. Today’s post, which is the second in the series of four, will take a look at how to use six of the new elements in HTML5: canvas, article, audio, video, meter, and mark.
Keep in mind that HTML5 is not exactly ready for widespread use – so don’t go changing anything on your site quite yet. Be assured that HTML5 is in fact coming soon, therefore these concepts may prove useful in the near future.
The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition. Over the next week we’ll be focusing on three major areas:
1. New Elements
2. Semantic Changes
3. Getting it Working Today
This article will briefly introduce each of these topics to prepare you for the in-depth articles ahead.
Semantics is a word which strikes fear into many a designer’s heart, but it need not be a difficult or complicated topic. It concerns meaningful expression, avoiding presentational markup and using appropriate and meaningful tags where possible.
Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:
Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.
It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.
By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.
It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.
Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.
Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!
More and more is being said about web standards and the need to build compliant sites. That’s all well and good, but why is that the case, and what are the benefits to you of designing with standards in mind? How can you persuade a client to spend extra money on a standards compliant website?
It is undoubtedly the case that designing with standards in mind takes extra time and expertise, but there are several arguments to support it all being worth the effort. Here are five solid reasons to justify the need for standards.
Trying to pick your way through a mess of poorly written code is no fun – planning ahead and using well written, standards based code will save you masses of time in the long run. Writing semantic code (using the right tags for the right job) will also mean that updating your site in the future is a breeze. This is especially important if you are creating a site and passing it on to someone else to manage and update – they need to be able to understand how you’ve crafted the site.
There’s no point having a website if no-one visits it. Designing with standards improves accessibility, and makes it easier for people with disabilities (for example, using a braille interpreter) to navigate through your site. Often your website will also look much better for people using older computers and web browsers – not everyone has the cutting edge computer you have.
Getting your website listed well in search engines is the holy grail, and something companies spend millions of dollars on. One of the best methods to succeed in this arena is through a well-structured semantic website. This means using heading (
As the popularity of standards based coding increases and more web developers start to take it on board, it’s vital that you stay ahead of the curve and keep up with current trends. In order to attract clients as a web designer it’s a service you’ll need to offer. You can market standards as a way to improve search engine ranking and reach more customers.
Coding with standards has so many advantages, and the only down-side is that it takes a little longer than using an ad-hoc, slap it all together method. The only major changes you need to make involve coding semantically, and passing your site through a CSS and XHTML validator before handing it back to the client. Not a huge set back! For more help and information, read our tutorials on web standards.