100% Fresh Blog » Standards-Based Web Design

New HTML5 Form Elements, Types and Attributes
(Note: Only the Opera browser currently has a noticeable amount of support for these new features)

http://people.opera.com/brucel/demo/html5-forms-demo.html

http://www.w3schools.com/html5/html5_form_input_types.asp

http://www.w3schools.com/html5/html5_form_elements.asp

http://www.w3schools.com/html5/html5_form_attributes.asp

Geolocation
(Note: these demos are only useable on mobile devices for the most part)

http://www.html5rocks.com/tutorials/geolocation/trip_meter/

http://www.drdobbs.com/web-development/225600440

http://developer.practicalecommerce.com/articles/2066-An-Introduction-to-HTML5-Geolocation

Local Storage

http://www.html5rocks.com/tutorials/webdatabase/todo/

Session Storage

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

Web Workers

http://html5demos.com/worker

http://www.drdobbs.com/web-development/225701170

HTML5 Audio Tag

http://code.coneybeare.net/getting-html5-audio-tag-and-flash-fallback-to

http://www.html5rocks.com/tutorials/audio/quick/

http://html5doctor.com/native-audio-in-the-browser/

HTML5 Video Tag

http://jilion.com/sublime/video

http://camendesign.com/code/video_for_everybody

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback

HTML5 Canvas Tag

http://www.kesiev.com/akihabara/

http://www.canvasdemos.com/

http://html5games.com/

https://developer.mozilla.org/en/canvas_tutorial

http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/

http://www.rgraph.net/

http://www.html5rocks.com/

CSS3

http://css3please.com/

http://www.fontsquirrel.com/

http://www.alistapart.com/articles/responsive-web-design/

Some Favorite jQuery Plug-ins

http://jquery.malsup.com/cycle/

http://flowplayer.org/tools/index.html

http://nyromodal.nyrodev.com/

Use HTML5, CSS3 and javascript to make native applications

http://www.phonegap.com/

http://www.appcelerator.com/

New HTML5 Tags

article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
input*
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
video

*(input itself is not new but there are so many new input types and attributes that I want to draw attention to those)

Existing tags that have been redefined in HTML5 (some subtly)

!DOCTYPE – simplified, shortened
a – used for hyperlinks ONLY, name is no longer valid attribute, must have href.
address – new rule when address is in article tag
b – stylistically offset
em – stress emphasis
hr – paragraph-level thematic break
i – alternate voice
legend – legend can now be used with figure tag and details tag in addition to fieldset tag
menu – list form controls, no longer deprecated
small – side comments and small print
strong – strong importance

Removed Tags

acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
s
strike
tt
u
xmp

Links for Mobile Web Development

James Conway — Wed, 10 Nov 2010 06:41:37 +0000

History of the Web in 3 minutes

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://web.archive.org/web/19961225070933/http:/www.bestbuy.com/

http://www.csszengarden.com/?cssfile=/209/209.css&page=0

http://radikalfx.com/files/collage/demo.html

http://mrdoob.com/projects/harmony/

Examples and Mobile Showcase Articles

http://sixrevisions.com/design-showcase-inspiration/35-beautiful-iphone-app-website-designs/

http://blog.insicdesigns.com/2010/06/best-examples-of-web-design-for-iphone/

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

http://www.tacobell.com/

Replacing Flash with Javascript for Mobile

http://jquery.com/

http://flowplayer.org/tools/index.html

http://www.kesiev.com/akihabara/

http://colorpowered.com/colorbox/

http://jquery.malsup.com/cycle/

New Phones Hitting the Market

http://www.engadget.com/

CSS Media Query – Resizable Websites

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

http://www.alistapart.com/articles/responsive-web-design/

http://hicksdesign.co.uk/journal

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

Resolution

http://en.wikipedia.org/wiki/List_of_common_resolutions

iPhone Retina Display

http://globalmoxie.com/blog/designing-for-iphone4-retina-display.shtml

http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html

http://www.lukew.com/ff/entry.asp?1142

Tutorials

http://slodive.com/web-development/a-roundup-of-15-mobile-web-design-tutorials/

http://perishablepress.com/press/2009/08/02/the-5-minute-css-mobile-makeover/

Native Apps for Web Developers

http://www.phonegap.com/

http://www.appcelerator.com/

Tools, Plug-ins and Templates

http://www.modernizr.com/

http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

http://mobify.me/

http://www.unitymobile.com/

Reading and Reference

http://findmebyip.com/litmus/

http://www.smashingmagazine.com/

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

HTML5 Overview – 5 Dollar Friday at C2

James Conway — Sat, 21 Aug 2010 03:35:19 +0000

Another Friday, another five bucks.

We had great turnout for our discussion of HTML5 on Friday afternoon, Thanks to everyone who attended.

As promised, here is a list of the links visited during the demo of HTML5 and related technologies.

A very short history of the web – from basic text to the equivalent of the printed page

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://web.archive.org/web/19961017235908/http://www2.yahoo.com/

http://web.archive.org/web/19961225070933/http:/www.bestbuy.com/

http://www.csszengarden.com/?cssfile=/206/206.css&page=0

Examples of HTML5, CSS3 and Javascript – applications in the browser window

http://www.apple.com/html5/

http://radikalfx.com/files/collage/demo.html

http://www.kesiev.com/akihabara/

http://htmlfive.appspot.com/static/gifter.html

http://mrdoob.com/projects/harmony/

http://html5demos.com/

HTML5 references and browser capability resources

http://diveintohtml5.org/

http://www.w3schools.com/html5/html5_reference.asp

http://caniuse.com/

http://beta.html5test.com/

http://www.findmebyip.com/

http://www.findmebyip.com/litmus/

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

http://html5demos.com/

HTML5 28 Tips

HTML5 Slideshow

CSS3 Generator

HTML5 & CSS3 feature detection and Javascript browser enhancement

http://www.modernizr.com/

http://diveintohtml5.org/detect.html

http://remysharp.com/2009/01/07/html5-enabling-script/

http://css3please.com/

http://www.fontsquirrel.com/fontface/generator

Exercise showing the new HTML5 semantic tags in use

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

New HTML5 Attributes

http://www.w3schools.com/html5/html5_ref_standardattributes.asp

New HTML5 Events

http://www.w3schools.com/html5/html5_ref_eventattributes.asp

New HTML5 Form Elements, Types and Attributes
(Note: Only the Opera browser currently has a noticeable amount of support for these new features)

http://people.opera.com/brucel/demo/html5-forms-demo.html

http://www.w3schools.com/html5/html5_form_input_types.asp

http://www.w3schools.com/html5/html5_form_elements.asp

http://www.w3schools.com/html5/html5_form_attributes.asp

Geolocation
(Note: these demos are only useable on mobile devices for the most part)

http://www.html5rocks.com/tutorials/geolocation/trip_meter/

http://www.drdobbs.com/web-development/225600440

http://developer.practicalecommerce.com/articles/2066-An-Introduction-to-HTML5-Geolocation

Local Storage

http://www.html5rocks.com/tutorials/webdatabase/todo/

Session Storage

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

Web Workers

Guide to web workers

http://html5demos.com/worker

http://www.drdobbs.com/web-development/225701170

HTML5 Audio Tag

http://code.coneybeare.net/getting-html5-audio-tag-and-flash-fallback-to

http://www.html5rocks.com/tutorials/audio/quick/

http://html5doctor.com/native-audio-in-the-browser/

HTML5 Video Tag

http://jilion.com/sublime/video

http://camendesign.com/code/video_for_everybody

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback

HTML5 Canvas Tag

http://www.kesiev.com/akihabara/

http://www.canvasdemos.com/

http://html5games.com/

https://developer.mozilla.org/en/canvas_tutorial

http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/

http://www.rgraph.net/

http://www.html5rocks.com/

New HTML5 Tags

article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
input*
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
video

*(input itself is not new but there are so many new input types and attributes that I want to draw attention to those)

Existing tags that have been redefined in HTML5 (some subtly)

Removed Tags

acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
s
strike
tt
u
xmp

HTML5 Resources

James Conway — Tue, 20 Jul 2010 21:47:29 +0000

I was lucky enough to be invited to lead a discussion of HTML5 with the Madison Web Design & Dev Meetup group Monday night. Instead of the standard Keynote/PowerPoint presentation, I decided that because the topic was so intimately web related I’d go with a live demo of actual web pages, projects and resources related to the new features of the HTML5 language, focusing, where possible, on features we can use right now. The “live demo” nature gave the group plenty of opportunities ask questions, make comments and offer up their experiences with HTML5.

The Madison Web Design & Dev Meetup is a great group of web professionals of all skill levels and a fantastic resource for the Madison web community. If you’re very experienced you’ll find peers you can discuss the most advanced development topics with and anyone just dipping their toes into web design can get real world answers they’ll understand from working professionals in the field.

You can find all their contact info here:

http://www.meetup.com/madisonwebmeetup/

If you’re interested in learning more about HTML5 (and CSS3 and Javascript) here is a list of the sites visited/discussed during my presentation.

A very short history of the web – from basic text to the equivalent of the printed page

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://web.archive.org/web/19961017235908/http://www2.yahoo.com/

http://web.archive.org/web/19961225070933/http:/www.bestbuy.com/

http://www.csszengarden.com/?cssfile=/206/206.css&page=0

Examples of HTML5, CSS3 and Javascript – applications in the browser window

http://www.apple.com/html5/

http://radikalfx.com/files/collage/demo.html

http://www.kesiev.com/akihabara/

http://htmlfive.appspot.com/static/gifter.html

http://mrdoob.com/projects/harmony/

http://html5demos.com/

HTML5 references and browser capability resources

http://diveintohtml5.org/

http://www.w3schools.com/html5/html5_reference.asp

http://caniuse.com/

http://beta.html5test.com/

http://www.findmebyip.com/

http://www.findmebyip.com/litmus/

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

http://html5demos.com/

HTML5 & CSS3 feature detection and Javascript browser enhancement

http://www.modernizr.com/

http://diveintohtml5.org/detect.html

http://remysharp.com/2009/01/07/html5-enabling-script/

http://css3please.com/

http://www.fontsquirrel.com/fontface/generator

Exercise showing the new HTML5 semantic tags in use

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

New HTML5 Attributes

http://www.w3schools.com/html5/html5_ref_standardattributes.asp

New HTML5 Events

http://www.w3schools.com/html5/html5_ref_eventattributes.asp

New HTML5 Form Elements, Types and Attributes
(Note: Only the Opera browser currently has a noticeable amount of support for these new features)

http://people.opera.com/brucel/demo/html5-forms-demo.html

http://www.w3schools.com/html5/html5_form_input_types.asp

http://www.w3schools.com/html5/html5_form_elements.asp

http://www.w3schools.com/html5/html5_form_attributes.asp

Geolocation
(Note: these demos are only useable on mobile devices for the most part)

http://www.html5rocks.com/tutorials/geolocation/trip_meter/

http://www.drdobbs.com/web-development/225600440

http://developer.practicalecommerce.com/articles/2066-An-Introduction-to-HTML5-Geolocation

Local Storage

http://www.html5rocks.com/tutorials/webdatabase/todo/

Session Storage

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

Web Workers

http://html5demos.com/worker

http://www.drdobbs.com/web-development/225701170

HTML5 Audio Tag

http://code.coneybeare.net/getting-html5-audio-tag-and-flash-fallback-to

http://www.html5rocks.com/tutorials/audio/quick/

http://html5doctor.com/native-audio-in-the-browser/

HTML5 Video Tag

http://jilion.com/sublime/video

http://camendesign.com/code/video_for_everybody

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback

HTML5 Canvas Tag

http://www.kesiev.com/akihabara/

http://www.canvasdemos.com/

http://html5games.com/

https://developer.mozilla.org/en/canvas_tutorial

http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/

http://www.rgraph.net/

http://www.html5rocks.com/

New HTML5 Tags

article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
input*
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
video

*(input itself is not new but there are so many new input types and attributes that I want to draw attention to those)

Existing tags that have been redefined in HTML5 (some subtly)

Removed Tags

acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
s
strike
tt
u
xmp

Hiring a Web Designer & Using Content Management

Alex Lucas — Thu, 03 Sep 2009 14:18:26 +0000

As someone who works as a Web Designer/Web Programmer I have often come up against a common dilemma with people wanting to update their websites.

Most companies want the option of updating their website as soon as they think of something, yet they don’t want to learn HTML code.

This leads to one of two results:

Send all updates to the web designer who will charge you each time to do something that likely takes them very little time.
Try to figure out the HTML and FTP stuff so you can save the money – but wind up messing up the navigation or something else. Or at least wasting a greater portion of your time.

Neither of these is particularly desirable which is where content management comes into play. If you want to frequently update content but do it without messing up the HTML, CMS systems work well to isolate only the parts that you want to edit (think of it like making a blog posting, where you have no access to the navigation or other important structure HTML).

There are two things I have used recently which are decent, free (or cheap) CMS providers. There are many others but I want to highlight these two to show what exactly they do:

SquareSpace : A website builder all done in clean, easy-to-understand menus. It is easy to add navigation, disable and enable pages, and add content. Really neat thing is the way in which you can quickly configure different types of pages (galleries, forms, journals). Downside is that there are only a few templates and you need to have a basic understanding of CSS to really configure the changes to these designs.

CushyCMS: This is something that only allows you to change text in your body copy. Once your designer marks what is editable and what isn’t, this program allows you to go to a webpage and modify the content you need. The downside is that if you need to get in and change something that is not marked as editable, you will need to call your web designer to put in new code… which will take as long as making the change would have on its own.

There are many, many other systems out there, in fact I have worked with a couple of them, but the flexibility they allow can be a perfect fit for both client and webmaster. It just depends on which system is the best for your company.

So next time you do a redesign, think about whether you want more access to refreshing your content. It may take more time up front to design the site for CMS – but it may pay off if you update enough.

Why is it so hard to make web pages?

James Fritz — Mon, 08 Jun 2009 22:04:50 +0000

Print designers are always asking me “Why is it so hard to learn to make web pages?”

On the surface it seems easy: web pages seem to be printed pages delivered onscreen instead of on a printed page.

They’re not. Granted they look somewhat like printed pages when viewed on a computer display but that’s only on the surface.

When was the last time you sent a book to print where the first page was 11 inches high, the second was 23.5 inches high and the third page was an interactive form where someone could order a product and have it delivered instantly? The “page” metaphor breaks down fairly quickly when you start looking at the details.

One of the fundamental problems print designers have to grapple with is that there is a different set of design goals for the printed page vs the web page.
I would break down the design goals for the printed pages as follows:
1 – Effective Communication – via content and design of that content
2 - Layout the content in a manner that will render pixel perfect at a very specific set of dimensions.
3 - there is no step three

Compare that with our design goals for a web page:
1 - Effective communication – does the page answer the visitors problem
2 - Page is usable on all devices (any operating system, computer, phone, tv, other)
3 - Page is usable at all screen sizes (cell phone to 30 inch display)
4 – Page works in older browsers (and future browsers)
5 - Search engine friendly
6 - Downloads quickly
7 – Accessible for those with disabilities
8 - Text can be resized by user for readability
9 - Avoid frames or tables for layout (old techniques that interfere with the other design goals)
10 - No storyflow across multiple columns (don’t make the user scroll up and down)
11 – Page looks good in all modern browsers (Internet Explorer, Firefox, Safari, Opera)(and the ancient Internet Explorer 6)

Printed pages are pixel perfect and use a rigid design.

Web pages are multipurpose and require flexible design principles.

So, what’s a print designer to do?

Attend our Web Design For Print Designers Made Easy 1 day conference. You’ll have the web design process expained in print design terms – not coding jargon and you’ll see what exactly is required to make the transition to creating web pages as I create a web site starting from just a Photoshop layout.

Why can’t I just learn Dreamweaver?

Kevin Stohlmeyer — Tue, 03 Mar 2009 20:27:00 +0000

Let’s talk about web design for a minute.

In the print world, if you know how to use InDesign or Quark you essentially know how to create any document or page (with a couple caveats based on background knowledge like: placed images need the proper resolution, no accidental spot or RGB colors, etc). What you see is what you get.

Web design is different in that just knowing the Dreamweaver program does not allow you to make proper web pages. Or maybe a better way to put it is that there is much more required background knowledge before you will be able to build a professional, useful, successful web page. With that knowledge, Dreamweaver is a great tool for building websites but that background knowledge needs to come first.

What do you need to know before Dreamweaver is useful?

1 – You need to learn the rules for saving images for the web. Easy.

2 – HTML is how you get “stuff” on the page. You need to learn HTML and semantic markup (a fancy way of saying “tag things by their meaning, not their look”). It sounds like programming but it’s really not, it’s typing. You have to learn about 10 basic tags for HTML and then you’re up and running. You can get a working knowledge of HTML in a couple hours. Fairly easy to learn.

3 – You need to learn CSS (Cascading Style Sheets). This is, admittedly, the difficult part of web design. Everything you think of as “Design” is CSS on the web – from font control to page layout. CSS has to be created by hand by typing text to create a set of rules – you can’t use a tool like the frame tool InDesign to draw a box. This isn’t as difficult as it may sound – you only use about 20 CSS properties on a regular basis so that’s another 20 words to understand. But yes, CSS takes a while to learn because it’s really more about judgement and problem solving than learning some “code words”. And that’s why when people ask me “Why isn’t there a program where I put stuff where I want it then makes a web page for me?” I have to tell them there isn’t a program like that because the act of laying out a web page involves creativity, judgement and problem solving and no program can do that for us (yet).

Acceptance that web design is not done the same way as print design is the first step.

We have 3 web related classes:

In our Standards-Based Web Design class we use Dreamweaver as we learn the 3 topics above and we create websites at the highest level of professionalism – what’s known as “Standards Based web design” – This class has my strongest recommendation.

We do have a Dreamweaver specific class that teaches all the “parts” of Dreamweaver but it is for people who are part of a team that already uses Dreamweaver and that person is not responsible for creating pages but maybe updating them or doing a couple specific things using Dreamweaver. Recommended only for special cases.

We also have a class dedicated to Creating HTML Email - even though they may look the same, the rules are completely different for web pages and email HTML pages. This class uses a very specific subset of Dreamweaver’s tools along with Photoshop.

C2′s Standards-based Web Design Training

James Conway — Thu, 05 Jun 2008 15:38:00 +0000

Standards-based web design is a process that uses open standards (like HTML and CSS) to create web sites that are fast-loading, clean, accessible to everyone, backwards and forwards compatible, search engine friendly, beautiful and purposeful.

C2′s Standards-based Web Design class is for designers (or anyone) serious about creating professional web sites that adhere to these principles. The techniques taught in this class are used to create the most popular and well-designed sites on the web. Standards-based web design focuses on the process of implementing a design in the most efficient, accessible method possible, using a set of standardized techniques without needing complex programming language knowledge (all you really need is a text editor to create pages). Using C2′s best-practice driven curriculum, this class provides all the skills necessary to create an entire web site including:

planning & information architecture

hand-coding HTML & CSS

design and layout techniques

typographic control

image preparation

navigation systems

interactive behaviors

search engine optimization

accessibility, usability and compatibility

email HTML

site testing, optimization,validation and management