HTML Archive

HTML5: Get It Working Today (4 of 4)

HTML5: Get It Working Today (4 of 4)

screenshot

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.

October 26th, 2009 Posted in HTML, Web Standards
HTML5: Semantic Changes (3 of 4)

HTML5: Semantic Changes (3 of 4)

screenshot

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.

October 23rd, 2009 Posted in HTML, Web Standards
HTML5: New Elements (2 of 4)

HTML5: New Elements (2 of 4)

screenshot

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.

October 21st, 2009 Posted in HTML, Web Standards
HTML5: The Basics (1 of 4)

HTML5: The Basics (1 of 4)

screenshot

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.

October 19th, 2009 Posted in HTML, Web Standards
How to Use TypeKit on Your Site: Step-by-Step

How to Use TypeKit on Your Site: Step-by-Step

Several options have cropped up recently for adding custom fonts to your website by utilizing the @font-face selector. TypeKit is an exciting new player in this game because it stands out in two key areas: ease of use and richness of fonts available. This tutorial will take you through several small, super simple steps to get TypeKit up and running on your site. You won’t find any advanced techniques or scripting here, so even if you’re a novice web designer this should be a cinch!

October 14th, 2009 Posted in CSS, HTML, JavaScript, Typography
The Footer Copyright Notice

The Footer Copyright Notice

Copyright Footer NoticeAlmost all websites contain some sort of copyright notice in their footer (e.g. Copyright © 2008 Apple Inc. All rights reserved.). But what’s the best way to do this? We’re going to take you through the requirements for your copyright notice, and a nifty JS (or PHP) trick for ensuring that your copyright year is always up to date.

What’s required?

The humble copyright notice is always useful to show in the footer, as a way of stating your claim over a site. Interestingly, however, it is not required for you to have copyright over the graphics, content and artwork of your site. This comes into place as soon as you’ve created the content and placed it in the public domain. Placing a copyright notice is still advisable to deter potential plagiarists and stake your claim. The generally accepted format is:

Copyright © 2008 Design Shack

There are a couple of points to make:

  • Make sure that the year is current (see below)
  • Use the HTML code © to display the copyright symbol, ensuring that your site’s XHTML is valid
  • Ensure the word ‘copyright’ appears

If you have specific requirements for how people can use certain content of your site, using a Creative Commons License would be advised. This allows you to select how content can be used in a more official and controlled manner.

Future proof

When creating a website, it can be incredibly tempting to simply drop in the basic requirements, and not think too heavily about future proofing your site. One of the most telling signs that a site isn’t regularly updated is an out of date copyright year. This can be very easily made automatic, through the use of a simple piece of PHP or JS code:


Alternatively, if you would prefer to use JavaScript, the following works well:


Stick with one of these methods, and you’ll never be kicking yourself in February again for not updating the copyright year!

July 8th, 2008 Posted in Articles, HTML
Search Forms in Safari

Search Forms in Safari

Search fields in SafariIt is remarkably simple to put this design feature in place on your site, and it can improve functionality greatly for those using a Mac. Whether Firefox and Internet Explorer will integrate this feature into their browsers in the future is unknown – although it is fairly unlikely.

How to turn the feature on

Using the following code for a form will cause the enhanced search field to display in Safari:

The type="search" tells safari to use the field as a search box, and the autosave="mysite-autosave" results="10" sets additional features about the recent search information.

The downsides

The negative aspect of adding this feature is that your code won’t validate. It’s up to you to decide whether it is a acceptable down-side of improving the browsing experience for those using Safari. We think it is – and you’ll see the enhanced search field on Design Shack!

September 9th, 2007 Posted in Articles, CSS, HTML
10 CSS Table Examples

10 CSS Table Examples

Today we’re going to take a look at a selection of beautiful tables styled using CSS. These are sourced from a variety of different sites. If you’re interested in learning how to do this yourself, be sure to take a look at a few of our CSS tutorials!

August 30th, 2007 Posted in Articles, CSS, HTML, Layouts
Custom 404 Error Page

Custom 404 Error Page

The standard 404 error page can often be really frustrating for readers. Using a simple .htaccess file can allow you to customise your error page, and ensure that users are displayed a useful alternative.

July 31st, 2007 Posted in Accessibility, Articles, HTML
The Basics of Semantics

The Basics of Semantics

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:

Title tag

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.

Headings

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.

Tables and Forms

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.

Images

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.

Seems straight forward… but why?

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!

July 16th, 2007 Posted in Accessibility, Articles, CSS, HTML, Web Standards
Subscribe
Membership