Upload
anhdet1989
View
215
Download
0
Embed Size (px)
Citation preview
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 119
Preliminary Material Coding for
the Web
This material actually is the lecture for week 1 of this course To give the opportunity for those who need more time on the
subject of HTML CSS and best practices the material is available right from the moment you registered on the course so that
you can make the most of it
Site Classrooms - Online training for Web developers
Course Responsive Web Design - March 2014
Book Preliminary Material Coding for the Web
Printed by anh det
Date Thursday 27 March 2014 452 AM
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 219
Table of contents
1 Introduction
2 The Web on Mobile
3 Progressive Enhancement
4 Content First
5 HTML5
6 CSS3
7 Tables
8 Forms
9 Dos and donts
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 319
1 Introduction
Tools and Techniques
This may be a good moment for a look in our metaphorical toolboxIf you are less familiar with the tools and techniques whichwe will use in this course this preliminary material gives you the opportunity to dive into the subject before the lectures will
start
If the material seems a little basic to you beware of skimming too quickly over material you think you know there are some
important points to remember in each lecture (or we wouldnrsquot have bothered you with them)
A lot of the tools and techniques you may be familiar with static design apply just as much with responsive design Howeveryou may need to use them a little differently as you take into account a range of factors that go with responsiveness
As you read through you should feel free to raise any questions or comments in the discussion forum Other people arereading the same material as you and everyone benefits from the conversation Donrsquot be shy please
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 419
2 The Web on Mobile
The Web on Mobile and Desktop
The notes below are provided as a background to the course What are the important differences between designing for the
Web on mobile and on desktop
The Web is available through a wide variety of devices and not just through the headline-grabbing smartphones The networks
now routinely offer flat rate data tariffs in their packages too so that using the Web on the move is as normal as it is on thedesktop
Its easy to see why the Web and mobile go together so well Unlike the traditional wired Web the mobile Web goes where
users go Users no longer have to remember to do something on the Web when they get back to their computer they can do it
immediately within the context that made them want to use the Web in the first place Mobile devices allow the Web to reacha much wider audience at all times in all situations It has the opportunity to reach into places where wires cannot go to
places previously unthinkable (eg providing medical information to mountain rescue scenes) and to accompany everyone as
easily as they carry the time on a wristwatch
Whichever survey you look at it the trend is clear Web-enabled mobile devices are becoming truly ubiquitous across theworld and people are using them more and more Lets take a look at the challenges
Input
Mobile device input is often difficult compared with desktop devices equipped with a keyboard Mobile devices often haveonly a very limited keypad with small keys and there is frequently no pointing device Touch screens are all well and good but
all too often the user is asked to tap a 10 pixel square icon using a 40 pixel-square device (ie their finger) One of the
difficulties of the mobile Web is that URIs are very difficult to type Lengthy URIs and those that contain a lot of punctuationare particularly difficult to type correctly Shortened URIs are only a partial solution since they include a mixture of upper and
lower case characters and are barely easier to enter by hand
Because of the limitations of screen and input methods forms are hard to fill in This is because navigation between fields may
not occur in the expected order and because of the difficulty in typing into the fields While many modern devices provideback buttons some do not and in some cases where back functionality exists users may not know how to invoke it This
means that it is often very hard to recover from errors broken links and other similar issues
Bandwidth and Cost
Mobile networks can be slow compared with fixed data connections and often have a measurably higher latency This can
lead to long retrieval times especially for lengthy content and for content that requires a lot of navigation between pages
Although flat rate data packages are commonly available in many countries mobile data transfer can still add significantly to
the cost of using a device especially when roaming The fact that mobile devices frequently support only limited types ofcontent means that a user may follow a link and retrieve information that is unusable on their device Even if the content type
can be interpreted by their device there is often an issue with the experience not being satisfactory - for example larger images
may only be viewable in small pieces and require considerable scrolling
Web pages can contain content that the user has not specifically requested - especially advertising and large images In the
mobile world this extra material contributes to poor usability and may add significantly to the cost of the retrieval
User Goals
When using mobile devices users typically have different interests to when they use desktop devices They are likely to havemore immediate and goal-directed intentions often to find out specific pieces of information that are relevant to their context
An example of such a goal-directed application might be the user requiring specific information about schedules for a journey
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 519
they are currently undertaking
Equally mobile users are typically less interested in lengthy documents or in browsing The ergonomics of the device are
frequently unsuitable for reading lengthy documents and users will often only access such information from mobile devices as alast resort because more convenient access is not available
Advertising
Developers of commercial Web sites should note that different commercial models are often at work when the Web isaccessed from mobile devices as compared with desktop devices For example some mechanisms that are commonly used
for presenting advertising material (such as pop-ups pop-unders and large banners) do not work well on small devices
Device Limitations
As already noted the restrictions imposed by the keyboard and the screen typically require a different approach to be taken
to page design than for desktop devices Various other limitations may apply and these have an impact on the usability of the
Web on a mobile device Mobile browsers may not support scripting or plug-ins which means that the range of content that
they support is limited On many devices the user has no choice of browser and upgrading it is not possible
Some activities associated with rendering Web pages are computationally intensive - for example re-flowing pages laying out
tables processing unnecessarily long and complex style sheets and handling invalid markup JavaScript interpretation playing
videos and using the network all draw heavily on the CPU too and processing power can be quite limited on mobile devices
This means that page rendering may take a noticeable time to complete As well as introducing a noticeable delay suchprocessing uses more battery power as does communication with the server
Many devices have limited memory available for pages and images and exceeding their memory limitations results in
incomplete display and can cause other problems
One Web
Despite of the restrictions we need just one web site that can be used on all devices That way one and the same URL can be
used no matter what device the user is on That way the content of the site remains the same on all devices Some
(minor exceptional) changes can be made as long as the content at the utmost extent stays (thematically) the same
Presentation Issues
Today still many Web pages are laid out for presentation on desktop-size displays and exploit the capabilities of desktopbrowsing software
Accessing such a Web page on a mobile device often results in a poor or unusable experience Contributing factors include
pages not being laid out as intended and context and overview being lost because of the limited screen size and therefore
small amount of material that is visible to the user
The limited screen size may require considerable scrolling or zooming to see the subject matter of the page especially if thetop of the page is occupied by images and navigation links In these cases the user gets no immediate feedback as to whether
their retrieval has resulted in the right content It is particularly important in the mobile context to help the user create a mental
image of the site This can be assisted by adopting a consistent style across pages en presentations and can be significantly
diminished by an uneven style
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 619
3 Progressive Enhancement
Progressive Enhancement
Before we start to write any code for any Web page we need to consider what are the most appropriate technologies for usto use HTML and CSS are evolving all the time as are browsers and devices new APIs are being defined and implemented
and all this is increasing the power of an already powerful platform We face a continual paradox
if we only use code that works on every Web-enabled device then were producing content that is almost certainly
going to be unattractive and disappointing to users of more powerful devices
if we only produce code that only works on the latest most powerful smartphones were going to exclude a significantproportion of our potential audience
The answer to this is the theme that will run through the whole of the course progressive enhancement This means that all
the information and functionality you wish to provide should work for everyone However users of more advanced devices
should expect to receive a better experience
Progressive enhancement and graceful degradation are basically the same thing The importance of both is that all the
information and functionality you wish to provide should work for everyone However users of more advanced devices should
expect to receive a better experience And there are two approaches to achieve this and shortly progressive enhancement is
the way to go
PE in CSS
With progressive enhancement (PE) in CSS you begin with the absolute basics that will be supported by all browsers and thatwill create a good enough screen presentation Then you start enhancing this with CSS3 The browsers that support this will
use it the browsers that dont will ignore it Of course you will always follow the basic principle of only use what you need
For example you will not use position or display (low support on simple mobiles) when you can do the job with float (that may
have less complications when not supported)
Graceful degradation
Graceful degradationthe opposite of progressive enhancement means that you start with the enhanced versions and add basicfunctionalities to solve things for browsers with no support of the used CSS This means in most cases more work Though
when you create rounded corners in the first place the fact that in older browsers the corners will be square is a gracefuldegradation as well but does not cost you anything When you add a javascript solution to create rounded corners in IE8 andlower as well this is time consuming example of graceful degradation While the fact that with JS disabled the corners still will
be square you could label it with PE
JavaScript
The same principle of progressive enhancement counts for javascript dont make the functionality of the web page depend on
javascript it is extra it adds extra functionality for those who have javascript enabled The way the web is developing this issubject of discussion what may be summarized to dont use it when you dont need it (like for basic infomative web pages)and you cannot do without it for enhanced web pages like web apps
More about progressive enhancement
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 719
4 Content First
Where progressive enhancement is the way to deal with design (CSS) and functions (JavaScript) content first is the
recommended way to set up a website With content first you start the project with the content that has to go in the websiteFor one this way you avoid to force content in a not suitable design because you have the content first This spares you extrawork and lots of design frustrations
Dont Think Design When Creating the Content Structure
In the former chapter of this book you could read about one Web and how one Web site with one and the same URL will beused on all devices As result it may be clear that when coding the Web site any thought on what part of that content will bepresented in what column or what column will go left or right is quite useless or in the least hard to oversee This means that
adapting the order of the content in favor of the layout has become quite useless
Structure and Semantics First
The Web iacutes about content The people the content is created for use screens or assistive technologies Search engines indexthe content and apps use the content for their tasks While the screen design will be made for only part of the users the
structure and the mark up of the content is important for all users Good reason to first focus on the best semantics andstructure of the content in HTML instead of forming the HTML in favor of the screen design only for the users with screensFor design purposes you may need to add extra div-tags in the HTML in the layout process to group elements so that you
can call them with CSS
In the lecture of next week you will read about the promising new CSS3 layout techniques that facilitate the content first workflow Once these techniques will be enough supported to start fully using them there is absolutely no reason left to move
content around for design purposes They will give you the tools to change the order of the content with CSS for each differentlayout width
Content Model
Content structure is another subject and definitely not part of this course Nevertheless to give you a small lead on thischallenging (and important) subject you can read this article about content modeling
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 819
5 HTML5
Document Type
The doctype declaration appears at the beginning of the document and basically tells parsers and validators that the documentis an HTML document and should be treated as such With simply the HTML5 DocType your web page will be backwards
compatible with the older browsers The HTML5 doctype is to be written as
ltDOCTYPE htmlgt
Structural Semantical Elements
If you dont use them already then start today the structural semantical HTML5 elements like header nav main sectionarticle aside footer and more Remy Sharps HTML5 shim makes these elements work in older browsers includingIE6 A solid alternative with no need for javascript is adding extra div elements as container for or nested in the HTML5
elements and style the divs instead of the HTML5 elements
And better safe than sorry good to set display block for the semantical HTML5 elements in CSS to cover the older
browser versions that dont have this by default set
Even though HTML5 is still evolving and is not a done deal as of today the main parts are stable and HTML5 is backwardcompatible with previous versions of (X)HTML in any case Besides there is no doubt that upcoming versions of mobile Web
browsers will support more and more features of HTML5
Beware though new functionalities introduced in HTML5 (such as the ltvideogt and ltaudiogt tags) are not available in all
mobile Web browsers yet This yields the question what can you take for granted when you also want to take mobile devicesinto account
So how should we proceed Progressive enhancement (see the book in this lecture named with this title) The right
approach with progressive enhancement will make sure that the other HTML5 features are extra that the web page doesnot depend on it so that when a browser does not support these features the web page will still work and the content is stillaccessible
Sectioning Elements
The following HTML5 elements are sectioning elements nav section article aside what means they markup theircontent as sections As you will read below not headings but sectioning elements are responsible for the document outlines inHTML5
Headings
With the new HTML5 Document Outlining Algorithm a correct use of headings needs some extra attention
This is how it was before HTML5
Use headings and paragraphs and donrsquot jump from H1 to H4Use preferably just one H1 per page (in favor of legacy screen readers) and use that one as heading for the maincontent (so it will differ per page)
See Creating Semantic Structure to understand the basic correct ranking of headings for legacy browsers
HTML5 is much more flexible on the subject of headings as you can read on the W3C site
The difference is that modern browsers that support the HTML5 Document Outlining Algorithm use the sectioning elements(nav section article aside) for the document outlines The first heading inside the sectioning element will be used as
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 919
the title of that element
The first heading in the body that is not nested in a sectioning element will be used as document title (ie title for the body) nomatter where it will be placed in the HTML ie this can even be on the last line of the body Since a header (or a footer)
are not sectioning elements a heading nested in a header (or footer) can serve duty as document title
Good reads on this subject can be found at
httpsdevelopermozillaorghttpcodingsmashingmagazinecomhttphtml5doctorcomoutlines
Still it is highly recommended to use the appropriate rank of the sections nesting level for the headings in favor oflegacy browsers In practice this means that if the section is on a 2nd or 3d level in the outlines it is recommended to use a
corresponding H2 or H3 This way the document structure will be backwards compatible for the legacy browsers that dontsupport the HTML5 document outlines algorithm ie dont recognize sectioning elements as outlines More about this in thisarticle on the Paciello Group Blog
Main
The main element is relatively new in HTML5 and marks the main content of a web page It can only be used once per page
and is not a sectioning element ie it does not affect the document outlines
This leads to the conclusion that main should not be used to markup asection or an article since this will lead to a missing
outline The main element is meant to group principally sectioning elements
Syntax
HTML5 is more than a definition of available elements attributes and scripting interfaces It also defines the syntax that youcan use to write your documents HTML5 defines two possible syntaxes for the price of one the HTML syntax and the
XHTML syntax The HTML syntax is lax in that it allows many omissions in the resulting document For instance thefollowing is valid according to the HTML syntax
ltp id=p1gtSome text in a paragraph ltBRgt
A second line
ltPgtSome more text in another paragraph
The XHTML syntax is much stricter forcing you to be explicit about things and to use strictly defined separators The sameexample as above would be written in XHTML as
ltp id=p1gtSome text in a paragraph ltbr gt
A second lineltpgt
ltpgtSome more text in another paragraphltpgt
Theoretically there may be some older mobile Web browsers (eg on feature phones) active that may require that you respectXML rules more thoroughly Since they are a true minority we decide to ignore them Modern mobile Web browsers willparse content that follows the HTML syntax correctly The result is that we dont see the need of writing XHTML syntax in
HTML5
Nevertheless we advise to make sure that your content will work on the vast majority of devices to stick to just some basic
main rules of XHTML
use lower case element and attribute namesenclose attribute values in double quotation marks
close elements
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1019
Thats all Apart from that there is no need to write ltbr gt just ltbrgt will do same with other so called empty elements likethe ltimggt and ltmetagt element
Media Type
HTML documents should be served with the texthtml media type Some very old mobile Web browsers (the same oneswe mentioned above and decided to ignore) may require you to use the more XHTML-friendly applicationxhtml+xmlmedia type but this should be viewed as exceptions to the rule (and has too much disadvantages)
Type attribute
In XHTML we write link and script elements like this
ltlink href=screencss rel=stylesheet type=textcss gtltscript src=functionsphp type=textjavascriptgtltscriptgt
In HTML5 you can leave out the type attribute
ltlink href=screencss rel=stylesheetgtltscript src=functionsphpgtltscriptgt
Resources and References
Since this course is not about HTML5 (we have a course that dives deep into the subject) you can find some links belowthat can help you further on this subject And if you know some nice CSS-based layout tutorials or resources feel free to postthe relevant links to the forum to enrich this course and help your course-mates
The services of HTML5 Boilerplate and Modernizr can be of great help but only use it when you need it and what you needof it For the assignments in this course we prefer you to experience how far you can come without the use of
either one
And in case it is new for you in the links below you will find a tutorial that may help you further with HTML5 Boilerplate
Start
Yes You Can Use HTML5 Today
5 Reasons Why You Can Use HTML5 TodayBuilding Web Pages With HTML5HTML5 Content Model
List of HTML elements from W3CBeginnersHTML FAQs
Semantics
Semantic Code Importance amp Relevancy to SEO
Semantics and sensibility
Semantic HTML and Search Engine OptimizationHTML5 Structural Sementical ElementsCreating Semantic Structure (for legacy browsers)
Links about the HTML5 Document Outlining Algorithm
w3corg about headings and sections
httpsdevelopermozillaorghttpcodingsmashingmagazinecom
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 219
Table of contents
1 Introduction
2 The Web on Mobile
3 Progressive Enhancement
4 Content First
5 HTML5
6 CSS3
7 Tables
8 Forms
9 Dos and donts
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 319
1 Introduction
Tools and Techniques
This may be a good moment for a look in our metaphorical toolboxIf you are less familiar with the tools and techniques whichwe will use in this course this preliminary material gives you the opportunity to dive into the subject before the lectures will
start
If the material seems a little basic to you beware of skimming too quickly over material you think you know there are some
important points to remember in each lecture (or we wouldnrsquot have bothered you with them)
A lot of the tools and techniques you may be familiar with static design apply just as much with responsive design Howeveryou may need to use them a little differently as you take into account a range of factors that go with responsiveness
As you read through you should feel free to raise any questions or comments in the discussion forum Other people arereading the same material as you and everyone benefits from the conversation Donrsquot be shy please
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 419
2 The Web on Mobile
The Web on Mobile and Desktop
The notes below are provided as a background to the course What are the important differences between designing for the
Web on mobile and on desktop
The Web is available through a wide variety of devices and not just through the headline-grabbing smartphones The networks
now routinely offer flat rate data tariffs in their packages too so that using the Web on the move is as normal as it is on thedesktop
Its easy to see why the Web and mobile go together so well Unlike the traditional wired Web the mobile Web goes where
users go Users no longer have to remember to do something on the Web when they get back to their computer they can do it
immediately within the context that made them want to use the Web in the first place Mobile devices allow the Web to reacha much wider audience at all times in all situations It has the opportunity to reach into places where wires cannot go to
places previously unthinkable (eg providing medical information to mountain rescue scenes) and to accompany everyone as
easily as they carry the time on a wristwatch
Whichever survey you look at it the trend is clear Web-enabled mobile devices are becoming truly ubiquitous across theworld and people are using them more and more Lets take a look at the challenges
Input
Mobile device input is often difficult compared with desktop devices equipped with a keyboard Mobile devices often haveonly a very limited keypad with small keys and there is frequently no pointing device Touch screens are all well and good but
all too often the user is asked to tap a 10 pixel square icon using a 40 pixel-square device (ie their finger) One of the
difficulties of the mobile Web is that URIs are very difficult to type Lengthy URIs and those that contain a lot of punctuationare particularly difficult to type correctly Shortened URIs are only a partial solution since they include a mixture of upper and
lower case characters and are barely easier to enter by hand
Because of the limitations of screen and input methods forms are hard to fill in This is because navigation between fields may
not occur in the expected order and because of the difficulty in typing into the fields While many modern devices provideback buttons some do not and in some cases where back functionality exists users may not know how to invoke it This
means that it is often very hard to recover from errors broken links and other similar issues
Bandwidth and Cost
Mobile networks can be slow compared with fixed data connections and often have a measurably higher latency This can
lead to long retrieval times especially for lengthy content and for content that requires a lot of navigation between pages
Although flat rate data packages are commonly available in many countries mobile data transfer can still add significantly to
the cost of using a device especially when roaming The fact that mobile devices frequently support only limited types ofcontent means that a user may follow a link and retrieve information that is unusable on their device Even if the content type
can be interpreted by their device there is often an issue with the experience not being satisfactory - for example larger images
may only be viewable in small pieces and require considerable scrolling
Web pages can contain content that the user has not specifically requested - especially advertising and large images In the
mobile world this extra material contributes to poor usability and may add significantly to the cost of the retrieval
User Goals
When using mobile devices users typically have different interests to when they use desktop devices They are likely to havemore immediate and goal-directed intentions often to find out specific pieces of information that are relevant to their context
An example of such a goal-directed application might be the user requiring specific information about schedules for a journey
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 519
they are currently undertaking
Equally mobile users are typically less interested in lengthy documents or in browsing The ergonomics of the device are
frequently unsuitable for reading lengthy documents and users will often only access such information from mobile devices as alast resort because more convenient access is not available
Advertising
Developers of commercial Web sites should note that different commercial models are often at work when the Web isaccessed from mobile devices as compared with desktop devices For example some mechanisms that are commonly used
for presenting advertising material (such as pop-ups pop-unders and large banners) do not work well on small devices
Device Limitations
As already noted the restrictions imposed by the keyboard and the screen typically require a different approach to be taken
to page design than for desktop devices Various other limitations may apply and these have an impact on the usability of the
Web on a mobile device Mobile browsers may not support scripting or plug-ins which means that the range of content that
they support is limited On many devices the user has no choice of browser and upgrading it is not possible
Some activities associated with rendering Web pages are computationally intensive - for example re-flowing pages laying out
tables processing unnecessarily long and complex style sheets and handling invalid markup JavaScript interpretation playing
videos and using the network all draw heavily on the CPU too and processing power can be quite limited on mobile devices
This means that page rendering may take a noticeable time to complete As well as introducing a noticeable delay suchprocessing uses more battery power as does communication with the server
Many devices have limited memory available for pages and images and exceeding their memory limitations results in
incomplete display and can cause other problems
One Web
Despite of the restrictions we need just one web site that can be used on all devices That way one and the same URL can be
used no matter what device the user is on That way the content of the site remains the same on all devices Some
(minor exceptional) changes can be made as long as the content at the utmost extent stays (thematically) the same
Presentation Issues
Today still many Web pages are laid out for presentation on desktop-size displays and exploit the capabilities of desktopbrowsing software
Accessing such a Web page on a mobile device often results in a poor or unusable experience Contributing factors include
pages not being laid out as intended and context and overview being lost because of the limited screen size and therefore
small amount of material that is visible to the user
The limited screen size may require considerable scrolling or zooming to see the subject matter of the page especially if thetop of the page is occupied by images and navigation links In these cases the user gets no immediate feedback as to whether
their retrieval has resulted in the right content It is particularly important in the mobile context to help the user create a mental
image of the site This can be assisted by adopting a consistent style across pages en presentations and can be significantly
diminished by an uneven style
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 619
3 Progressive Enhancement
Progressive Enhancement
Before we start to write any code for any Web page we need to consider what are the most appropriate technologies for usto use HTML and CSS are evolving all the time as are browsers and devices new APIs are being defined and implemented
and all this is increasing the power of an already powerful platform We face a continual paradox
if we only use code that works on every Web-enabled device then were producing content that is almost certainly
going to be unattractive and disappointing to users of more powerful devices
if we only produce code that only works on the latest most powerful smartphones were going to exclude a significantproportion of our potential audience
The answer to this is the theme that will run through the whole of the course progressive enhancement This means that all
the information and functionality you wish to provide should work for everyone However users of more advanced devices
should expect to receive a better experience
Progressive enhancement and graceful degradation are basically the same thing The importance of both is that all the
information and functionality you wish to provide should work for everyone However users of more advanced devices should
expect to receive a better experience And there are two approaches to achieve this and shortly progressive enhancement is
the way to go
PE in CSS
With progressive enhancement (PE) in CSS you begin with the absolute basics that will be supported by all browsers and thatwill create a good enough screen presentation Then you start enhancing this with CSS3 The browsers that support this will
use it the browsers that dont will ignore it Of course you will always follow the basic principle of only use what you need
For example you will not use position or display (low support on simple mobiles) when you can do the job with float (that may
have less complications when not supported)
Graceful degradation
Graceful degradationthe opposite of progressive enhancement means that you start with the enhanced versions and add basicfunctionalities to solve things for browsers with no support of the used CSS This means in most cases more work Though
when you create rounded corners in the first place the fact that in older browsers the corners will be square is a gracefuldegradation as well but does not cost you anything When you add a javascript solution to create rounded corners in IE8 andlower as well this is time consuming example of graceful degradation While the fact that with JS disabled the corners still will
be square you could label it with PE
JavaScript
The same principle of progressive enhancement counts for javascript dont make the functionality of the web page depend on
javascript it is extra it adds extra functionality for those who have javascript enabled The way the web is developing this issubject of discussion what may be summarized to dont use it when you dont need it (like for basic infomative web pages)and you cannot do without it for enhanced web pages like web apps
More about progressive enhancement
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 719
4 Content First
Where progressive enhancement is the way to deal with design (CSS) and functions (JavaScript) content first is the
recommended way to set up a website With content first you start the project with the content that has to go in the websiteFor one this way you avoid to force content in a not suitable design because you have the content first This spares you extrawork and lots of design frustrations
Dont Think Design When Creating the Content Structure
In the former chapter of this book you could read about one Web and how one Web site with one and the same URL will beused on all devices As result it may be clear that when coding the Web site any thought on what part of that content will bepresented in what column or what column will go left or right is quite useless or in the least hard to oversee This means that
adapting the order of the content in favor of the layout has become quite useless
Structure and Semantics First
The Web iacutes about content The people the content is created for use screens or assistive technologies Search engines indexthe content and apps use the content for their tasks While the screen design will be made for only part of the users the
structure and the mark up of the content is important for all users Good reason to first focus on the best semantics andstructure of the content in HTML instead of forming the HTML in favor of the screen design only for the users with screensFor design purposes you may need to add extra div-tags in the HTML in the layout process to group elements so that you
can call them with CSS
In the lecture of next week you will read about the promising new CSS3 layout techniques that facilitate the content first workflow Once these techniques will be enough supported to start fully using them there is absolutely no reason left to move
content around for design purposes They will give you the tools to change the order of the content with CSS for each differentlayout width
Content Model
Content structure is another subject and definitely not part of this course Nevertheless to give you a small lead on thischallenging (and important) subject you can read this article about content modeling
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 819
5 HTML5
Document Type
The doctype declaration appears at the beginning of the document and basically tells parsers and validators that the documentis an HTML document and should be treated as such With simply the HTML5 DocType your web page will be backwards
compatible with the older browsers The HTML5 doctype is to be written as
ltDOCTYPE htmlgt
Structural Semantical Elements
If you dont use them already then start today the structural semantical HTML5 elements like header nav main sectionarticle aside footer and more Remy Sharps HTML5 shim makes these elements work in older browsers includingIE6 A solid alternative with no need for javascript is adding extra div elements as container for or nested in the HTML5
elements and style the divs instead of the HTML5 elements
And better safe than sorry good to set display block for the semantical HTML5 elements in CSS to cover the older
browser versions that dont have this by default set
Even though HTML5 is still evolving and is not a done deal as of today the main parts are stable and HTML5 is backwardcompatible with previous versions of (X)HTML in any case Besides there is no doubt that upcoming versions of mobile Web
browsers will support more and more features of HTML5
Beware though new functionalities introduced in HTML5 (such as the ltvideogt and ltaudiogt tags) are not available in all
mobile Web browsers yet This yields the question what can you take for granted when you also want to take mobile devicesinto account
So how should we proceed Progressive enhancement (see the book in this lecture named with this title) The right
approach with progressive enhancement will make sure that the other HTML5 features are extra that the web page doesnot depend on it so that when a browser does not support these features the web page will still work and the content is stillaccessible
Sectioning Elements
The following HTML5 elements are sectioning elements nav section article aside what means they markup theircontent as sections As you will read below not headings but sectioning elements are responsible for the document outlines inHTML5
Headings
With the new HTML5 Document Outlining Algorithm a correct use of headings needs some extra attention
This is how it was before HTML5
Use headings and paragraphs and donrsquot jump from H1 to H4Use preferably just one H1 per page (in favor of legacy screen readers) and use that one as heading for the maincontent (so it will differ per page)
See Creating Semantic Structure to understand the basic correct ranking of headings for legacy browsers
HTML5 is much more flexible on the subject of headings as you can read on the W3C site
The difference is that modern browsers that support the HTML5 Document Outlining Algorithm use the sectioning elements(nav section article aside) for the document outlines The first heading inside the sectioning element will be used as
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 919
the title of that element
The first heading in the body that is not nested in a sectioning element will be used as document title (ie title for the body) nomatter where it will be placed in the HTML ie this can even be on the last line of the body Since a header (or a footer)
are not sectioning elements a heading nested in a header (or footer) can serve duty as document title
Good reads on this subject can be found at
httpsdevelopermozillaorghttpcodingsmashingmagazinecomhttphtml5doctorcomoutlines
Still it is highly recommended to use the appropriate rank of the sections nesting level for the headings in favor oflegacy browsers In practice this means that if the section is on a 2nd or 3d level in the outlines it is recommended to use a
corresponding H2 or H3 This way the document structure will be backwards compatible for the legacy browsers that dontsupport the HTML5 document outlines algorithm ie dont recognize sectioning elements as outlines More about this in thisarticle on the Paciello Group Blog
Main
The main element is relatively new in HTML5 and marks the main content of a web page It can only be used once per page
and is not a sectioning element ie it does not affect the document outlines
This leads to the conclusion that main should not be used to markup asection or an article since this will lead to a missing
outline The main element is meant to group principally sectioning elements
Syntax
HTML5 is more than a definition of available elements attributes and scripting interfaces It also defines the syntax that youcan use to write your documents HTML5 defines two possible syntaxes for the price of one the HTML syntax and the
XHTML syntax The HTML syntax is lax in that it allows many omissions in the resulting document For instance thefollowing is valid according to the HTML syntax
ltp id=p1gtSome text in a paragraph ltBRgt
A second line
ltPgtSome more text in another paragraph
The XHTML syntax is much stricter forcing you to be explicit about things and to use strictly defined separators The sameexample as above would be written in XHTML as
ltp id=p1gtSome text in a paragraph ltbr gt
A second lineltpgt
ltpgtSome more text in another paragraphltpgt
Theoretically there may be some older mobile Web browsers (eg on feature phones) active that may require that you respectXML rules more thoroughly Since they are a true minority we decide to ignore them Modern mobile Web browsers willparse content that follows the HTML syntax correctly The result is that we dont see the need of writing XHTML syntax in
HTML5
Nevertheless we advise to make sure that your content will work on the vast majority of devices to stick to just some basic
main rules of XHTML
use lower case element and attribute namesenclose attribute values in double quotation marks
close elements
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1019
Thats all Apart from that there is no need to write ltbr gt just ltbrgt will do same with other so called empty elements likethe ltimggt and ltmetagt element
Media Type
HTML documents should be served with the texthtml media type Some very old mobile Web browsers (the same oneswe mentioned above and decided to ignore) may require you to use the more XHTML-friendly applicationxhtml+xmlmedia type but this should be viewed as exceptions to the rule (and has too much disadvantages)
Type attribute
In XHTML we write link and script elements like this
ltlink href=screencss rel=stylesheet type=textcss gtltscript src=functionsphp type=textjavascriptgtltscriptgt
In HTML5 you can leave out the type attribute
ltlink href=screencss rel=stylesheetgtltscript src=functionsphpgtltscriptgt
Resources and References
Since this course is not about HTML5 (we have a course that dives deep into the subject) you can find some links belowthat can help you further on this subject And if you know some nice CSS-based layout tutorials or resources feel free to postthe relevant links to the forum to enrich this course and help your course-mates
The services of HTML5 Boilerplate and Modernizr can be of great help but only use it when you need it and what you needof it For the assignments in this course we prefer you to experience how far you can come without the use of
either one
And in case it is new for you in the links below you will find a tutorial that may help you further with HTML5 Boilerplate
Start
Yes You Can Use HTML5 Today
5 Reasons Why You Can Use HTML5 TodayBuilding Web Pages With HTML5HTML5 Content Model
List of HTML elements from W3CBeginnersHTML FAQs
Semantics
Semantic Code Importance amp Relevancy to SEO
Semantics and sensibility
Semantic HTML and Search Engine OptimizationHTML5 Structural Sementical ElementsCreating Semantic Structure (for legacy browsers)
Links about the HTML5 Document Outlining Algorithm
w3corg about headings and sections
httpsdevelopermozillaorghttpcodingsmashingmagazinecom
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 319
1 Introduction
Tools and Techniques
This may be a good moment for a look in our metaphorical toolboxIf you are less familiar with the tools and techniques whichwe will use in this course this preliminary material gives you the opportunity to dive into the subject before the lectures will
start
If the material seems a little basic to you beware of skimming too quickly over material you think you know there are some
important points to remember in each lecture (or we wouldnrsquot have bothered you with them)
A lot of the tools and techniques you may be familiar with static design apply just as much with responsive design Howeveryou may need to use them a little differently as you take into account a range of factors that go with responsiveness
As you read through you should feel free to raise any questions or comments in the discussion forum Other people arereading the same material as you and everyone benefits from the conversation Donrsquot be shy please
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 419
2 The Web on Mobile
The Web on Mobile and Desktop
The notes below are provided as a background to the course What are the important differences between designing for the
Web on mobile and on desktop
The Web is available through a wide variety of devices and not just through the headline-grabbing smartphones The networks
now routinely offer flat rate data tariffs in their packages too so that using the Web on the move is as normal as it is on thedesktop
Its easy to see why the Web and mobile go together so well Unlike the traditional wired Web the mobile Web goes where
users go Users no longer have to remember to do something on the Web when they get back to their computer they can do it
immediately within the context that made them want to use the Web in the first place Mobile devices allow the Web to reacha much wider audience at all times in all situations It has the opportunity to reach into places where wires cannot go to
places previously unthinkable (eg providing medical information to mountain rescue scenes) and to accompany everyone as
easily as they carry the time on a wristwatch
Whichever survey you look at it the trend is clear Web-enabled mobile devices are becoming truly ubiquitous across theworld and people are using them more and more Lets take a look at the challenges
Input
Mobile device input is often difficult compared with desktop devices equipped with a keyboard Mobile devices often haveonly a very limited keypad with small keys and there is frequently no pointing device Touch screens are all well and good but
all too often the user is asked to tap a 10 pixel square icon using a 40 pixel-square device (ie their finger) One of the
difficulties of the mobile Web is that URIs are very difficult to type Lengthy URIs and those that contain a lot of punctuationare particularly difficult to type correctly Shortened URIs are only a partial solution since they include a mixture of upper and
lower case characters and are barely easier to enter by hand
Because of the limitations of screen and input methods forms are hard to fill in This is because navigation between fields may
not occur in the expected order and because of the difficulty in typing into the fields While many modern devices provideback buttons some do not and in some cases where back functionality exists users may not know how to invoke it This
means that it is often very hard to recover from errors broken links and other similar issues
Bandwidth and Cost
Mobile networks can be slow compared with fixed data connections and often have a measurably higher latency This can
lead to long retrieval times especially for lengthy content and for content that requires a lot of navigation between pages
Although flat rate data packages are commonly available in many countries mobile data transfer can still add significantly to
the cost of using a device especially when roaming The fact that mobile devices frequently support only limited types ofcontent means that a user may follow a link and retrieve information that is unusable on their device Even if the content type
can be interpreted by their device there is often an issue with the experience not being satisfactory - for example larger images
may only be viewable in small pieces and require considerable scrolling
Web pages can contain content that the user has not specifically requested - especially advertising and large images In the
mobile world this extra material contributes to poor usability and may add significantly to the cost of the retrieval
User Goals
When using mobile devices users typically have different interests to when they use desktop devices They are likely to havemore immediate and goal-directed intentions often to find out specific pieces of information that are relevant to their context
An example of such a goal-directed application might be the user requiring specific information about schedules for a journey
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 519
they are currently undertaking
Equally mobile users are typically less interested in lengthy documents or in browsing The ergonomics of the device are
frequently unsuitable for reading lengthy documents and users will often only access such information from mobile devices as alast resort because more convenient access is not available
Advertising
Developers of commercial Web sites should note that different commercial models are often at work when the Web isaccessed from mobile devices as compared with desktop devices For example some mechanisms that are commonly used
for presenting advertising material (such as pop-ups pop-unders and large banners) do not work well on small devices
Device Limitations
As already noted the restrictions imposed by the keyboard and the screen typically require a different approach to be taken
to page design than for desktop devices Various other limitations may apply and these have an impact on the usability of the
Web on a mobile device Mobile browsers may not support scripting or plug-ins which means that the range of content that
they support is limited On many devices the user has no choice of browser and upgrading it is not possible
Some activities associated with rendering Web pages are computationally intensive - for example re-flowing pages laying out
tables processing unnecessarily long and complex style sheets and handling invalid markup JavaScript interpretation playing
videos and using the network all draw heavily on the CPU too and processing power can be quite limited on mobile devices
This means that page rendering may take a noticeable time to complete As well as introducing a noticeable delay suchprocessing uses more battery power as does communication with the server
Many devices have limited memory available for pages and images and exceeding their memory limitations results in
incomplete display and can cause other problems
One Web
Despite of the restrictions we need just one web site that can be used on all devices That way one and the same URL can be
used no matter what device the user is on That way the content of the site remains the same on all devices Some
(minor exceptional) changes can be made as long as the content at the utmost extent stays (thematically) the same
Presentation Issues
Today still many Web pages are laid out for presentation on desktop-size displays and exploit the capabilities of desktopbrowsing software
Accessing such a Web page on a mobile device often results in a poor or unusable experience Contributing factors include
pages not being laid out as intended and context and overview being lost because of the limited screen size and therefore
small amount of material that is visible to the user
The limited screen size may require considerable scrolling or zooming to see the subject matter of the page especially if thetop of the page is occupied by images and navigation links In these cases the user gets no immediate feedback as to whether
their retrieval has resulted in the right content It is particularly important in the mobile context to help the user create a mental
image of the site This can be assisted by adopting a consistent style across pages en presentations and can be significantly
diminished by an uneven style
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 619
3 Progressive Enhancement
Progressive Enhancement
Before we start to write any code for any Web page we need to consider what are the most appropriate technologies for usto use HTML and CSS are evolving all the time as are browsers and devices new APIs are being defined and implemented
and all this is increasing the power of an already powerful platform We face a continual paradox
if we only use code that works on every Web-enabled device then were producing content that is almost certainly
going to be unattractive and disappointing to users of more powerful devices
if we only produce code that only works on the latest most powerful smartphones were going to exclude a significantproportion of our potential audience
The answer to this is the theme that will run through the whole of the course progressive enhancement This means that all
the information and functionality you wish to provide should work for everyone However users of more advanced devices
should expect to receive a better experience
Progressive enhancement and graceful degradation are basically the same thing The importance of both is that all the
information and functionality you wish to provide should work for everyone However users of more advanced devices should
expect to receive a better experience And there are two approaches to achieve this and shortly progressive enhancement is
the way to go
PE in CSS
With progressive enhancement (PE) in CSS you begin with the absolute basics that will be supported by all browsers and thatwill create a good enough screen presentation Then you start enhancing this with CSS3 The browsers that support this will
use it the browsers that dont will ignore it Of course you will always follow the basic principle of only use what you need
For example you will not use position or display (low support on simple mobiles) when you can do the job with float (that may
have less complications when not supported)
Graceful degradation
Graceful degradationthe opposite of progressive enhancement means that you start with the enhanced versions and add basicfunctionalities to solve things for browsers with no support of the used CSS This means in most cases more work Though
when you create rounded corners in the first place the fact that in older browsers the corners will be square is a gracefuldegradation as well but does not cost you anything When you add a javascript solution to create rounded corners in IE8 andlower as well this is time consuming example of graceful degradation While the fact that with JS disabled the corners still will
be square you could label it with PE
JavaScript
The same principle of progressive enhancement counts for javascript dont make the functionality of the web page depend on
javascript it is extra it adds extra functionality for those who have javascript enabled The way the web is developing this issubject of discussion what may be summarized to dont use it when you dont need it (like for basic infomative web pages)and you cannot do without it for enhanced web pages like web apps
More about progressive enhancement
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 719
4 Content First
Where progressive enhancement is the way to deal with design (CSS) and functions (JavaScript) content first is the
recommended way to set up a website With content first you start the project with the content that has to go in the websiteFor one this way you avoid to force content in a not suitable design because you have the content first This spares you extrawork and lots of design frustrations
Dont Think Design When Creating the Content Structure
In the former chapter of this book you could read about one Web and how one Web site with one and the same URL will beused on all devices As result it may be clear that when coding the Web site any thought on what part of that content will bepresented in what column or what column will go left or right is quite useless or in the least hard to oversee This means that
adapting the order of the content in favor of the layout has become quite useless
Structure and Semantics First
The Web iacutes about content The people the content is created for use screens or assistive technologies Search engines indexthe content and apps use the content for their tasks While the screen design will be made for only part of the users the
structure and the mark up of the content is important for all users Good reason to first focus on the best semantics andstructure of the content in HTML instead of forming the HTML in favor of the screen design only for the users with screensFor design purposes you may need to add extra div-tags in the HTML in the layout process to group elements so that you
can call them with CSS
In the lecture of next week you will read about the promising new CSS3 layout techniques that facilitate the content first workflow Once these techniques will be enough supported to start fully using them there is absolutely no reason left to move
content around for design purposes They will give you the tools to change the order of the content with CSS for each differentlayout width
Content Model
Content structure is another subject and definitely not part of this course Nevertheless to give you a small lead on thischallenging (and important) subject you can read this article about content modeling
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 819
5 HTML5
Document Type
The doctype declaration appears at the beginning of the document and basically tells parsers and validators that the documentis an HTML document and should be treated as such With simply the HTML5 DocType your web page will be backwards
compatible with the older browsers The HTML5 doctype is to be written as
ltDOCTYPE htmlgt
Structural Semantical Elements
If you dont use them already then start today the structural semantical HTML5 elements like header nav main sectionarticle aside footer and more Remy Sharps HTML5 shim makes these elements work in older browsers includingIE6 A solid alternative with no need for javascript is adding extra div elements as container for or nested in the HTML5
elements and style the divs instead of the HTML5 elements
And better safe than sorry good to set display block for the semantical HTML5 elements in CSS to cover the older
browser versions that dont have this by default set
Even though HTML5 is still evolving and is not a done deal as of today the main parts are stable and HTML5 is backwardcompatible with previous versions of (X)HTML in any case Besides there is no doubt that upcoming versions of mobile Web
browsers will support more and more features of HTML5
Beware though new functionalities introduced in HTML5 (such as the ltvideogt and ltaudiogt tags) are not available in all
mobile Web browsers yet This yields the question what can you take for granted when you also want to take mobile devicesinto account
So how should we proceed Progressive enhancement (see the book in this lecture named with this title) The right
approach with progressive enhancement will make sure that the other HTML5 features are extra that the web page doesnot depend on it so that when a browser does not support these features the web page will still work and the content is stillaccessible
Sectioning Elements
The following HTML5 elements are sectioning elements nav section article aside what means they markup theircontent as sections As you will read below not headings but sectioning elements are responsible for the document outlines inHTML5
Headings
With the new HTML5 Document Outlining Algorithm a correct use of headings needs some extra attention
This is how it was before HTML5
Use headings and paragraphs and donrsquot jump from H1 to H4Use preferably just one H1 per page (in favor of legacy screen readers) and use that one as heading for the maincontent (so it will differ per page)
See Creating Semantic Structure to understand the basic correct ranking of headings for legacy browsers
HTML5 is much more flexible on the subject of headings as you can read on the W3C site
The difference is that modern browsers that support the HTML5 Document Outlining Algorithm use the sectioning elements(nav section article aside) for the document outlines The first heading inside the sectioning element will be used as
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 919
the title of that element
The first heading in the body that is not nested in a sectioning element will be used as document title (ie title for the body) nomatter where it will be placed in the HTML ie this can even be on the last line of the body Since a header (or a footer)
are not sectioning elements a heading nested in a header (or footer) can serve duty as document title
Good reads on this subject can be found at
httpsdevelopermozillaorghttpcodingsmashingmagazinecomhttphtml5doctorcomoutlines
Still it is highly recommended to use the appropriate rank of the sections nesting level for the headings in favor oflegacy browsers In practice this means that if the section is on a 2nd or 3d level in the outlines it is recommended to use a
corresponding H2 or H3 This way the document structure will be backwards compatible for the legacy browsers that dontsupport the HTML5 document outlines algorithm ie dont recognize sectioning elements as outlines More about this in thisarticle on the Paciello Group Blog
Main
The main element is relatively new in HTML5 and marks the main content of a web page It can only be used once per page
and is not a sectioning element ie it does not affect the document outlines
This leads to the conclusion that main should not be used to markup asection or an article since this will lead to a missing
outline The main element is meant to group principally sectioning elements
Syntax
HTML5 is more than a definition of available elements attributes and scripting interfaces It also defines the syntax that youcan use to write your documents HTML5 defines two possible syntaxes for the price of one the HTML syntax and the
XHTML syntax The HTML syntax is lax in that it allows many omissions in the resulting document For instance thefollowing is valid according to the HTML syntax
ltp id=p1gtSome text in a paragraph ltBRgt
A second line
ltPgtSome more text in another paragraph
The XHTML syntax is much stricter forcing you to be explicit about things and to use strictly defined separators The sameexample as above would be written in XHTML as
ltp id=p1gtSome text in a paragraph ltbr gt
A second lineltpgt
ltpgtSome more text in another paragraphltpgt
Theoretically there may be some older mobile Web browsers (eg on feature phones) active that may require that you respectXML rules more thoroughly Since they are a true minority we decide to ignore them Modern mobile Web browsers willparse content that follows the HTML syntax correctly The result is that we dont see the need of writing XHTML syntax in
HTML5
Nevertheless we advise to make sure that your content will work on the vast majority of devices to stick to just some basic
main rules of XHTML
use lower case element and attribute namesenclose attribute values in double quotation marks
close elements
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1019
Thats all Apart from that there is no need to write ltbr gt just ltbrgt will do same with other so called empty elements likethe ltimggt and ltmetagt element
Media Type
HTML documents should be served with the texthtml media type Some very old mobile Web browsers (the same oneswe mentioned above and decided to ignore) may require you to use the more XHTML-friendly applicationxhtml+xmlmedia type but this should be viewed as exceptions to the rule (and has too much disadvantages)
Type attribute
In XHTML we write link and script elements like this
ltlink href=screencss rel=stylesheet type=textcss gtltscript src=functionsphp type=textjavascriptgtltscriptgt
In HTML5 you can leave out the type attribute
ltlink href=screencss rel=stylesheetgtltscript src=functionsphpgtltscriptgt
Resources and References
Since this course is not about HTML5 (we have a course that dives deep into the subject) you can find some links belowthat can help you further on this subject And if you know some nice CSS-based layout tutorials or resources feel free to postthe relevant links to the forum to enrich this course and help your course-mates
The services of HTML5 Boilerplate and Modernizr can be of great help but only use it when you need it and what you needof it For the assignments in this course we prefer you to experience how far you can come without the use of
either one
And in case it is new for you in the links below you will find a tutorial that may help you further with HTML5 Boilerplate
Start
Yes You Can Use HTML5 Today
5 Reasons Why You Can Use HTML5 TodayBuilding Web Pages With HTML5HTML5 Content Model
List of HTML elements from W3CBeginnersHTML FAQs
Semantics
Semantic Code Importance amp Relevancy to SEO
Semantics and sensibility
Semantic HTML and Search Engine OptimizationHTML5 Structural Sementical ElementsCreating Semantic Structure (for legacy browsers)
Links about the HTML5 Document Outlining Algorithm
w3corg about headings and sections
httpsdevelopermozillaorghttpcodingsmashingmagazinecom
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 419
2 The Web on Mobile
The Web on Mobile and Desktop
The notes below are provided as a background to the course What are the important differences between designing for the
Web on mobile and on desktop
The Web is available through a wide variety of devices and not just through the headline-grabbing smartphones The networks
now routinely offer flat rate data tariffs in their packages too so that using the Web on the move is as normal as it is on thedesktop
Its easy to see why the Web and mobile go together so well Unlike the traditional wired Web the mobile Web goes where
users go Users no longer have to remember to do something on the Web when they get back to their computer they can do it
immediately within the context that made them want to use the Web in the first place Mobile devices allow the Web to reacha much wider audience at all times in all situations It has the opportunity to reach into places where wires cannot go to
places previously unthinkable (eg providing medical information to mountain rescue scenes) and to accompany everyone as
easily as they carry the time on a wristwatch
Whichever survey you look at it the trend is clear Web-enabled mobile devices are becoming truly ubiquitous across theworld and people are using them more and more Lets take a look at the challenges
Input
Mobile device input is often difficult compared with desktop devices equipped with a keyboard Mobile devices often haveonly a very limited keypad with small keys and there is frequently no pointing device Touch screens are all well and good but
all too often the user is asked to tap a 10 pixel square icon using a 40 pixel-square device (ie their finger) One of the
difficulties of the mobile Web is that URIs are very difficult to type Lengthy URIs and those that contain a lot of punctuationare particularly difficult to type correctly Shortened URIs are only a partial solution since they include a mixture of upper and
lower case characters and are barely easier to enter by hand
Because of the limitations of screen and input methods forms are hard to fill in This is because navigation between fields may
not occur in the expected order and because of the difficulty in typing into the fields While many modern devices provideback buttons some do not and in some cases where back functionality exists users may not know how to invoke it This
means that it is often very hard to recover from errors broken links and other similar issues
Bandwidth and Cost
Mobile networks can be slow compared with fixed data connections and often have a measurably higher latency This can
lead to long retrieval times especially for lengthy content and for content that requires a lot of navigation between pages
Although flat rate data packages are commonly available in many countries mobile data transfer can still add significantly to
the cost of using a device especially when roaming The fact that mobile devices frequently support only limited types ofcontent means that a user may follow a link and retrieve information that is unusable on their device Even if the content type
can be interpreted by their device there is often an issue with the experience not being satisfactory - for example larger images
may only be viewable in small pieces and require considerable scrolling
Web pages can contain content that the user has not specifically requested - especially advertising and large images In the
mobile world this extra material contributes to poor usability and may add significantly to the cost of the retrieval
User Goals
When using mobile devices users typically have different interests to when they use desktop devices They are likely to havemore immediate and goal-directed intentions often to find out specific pieces of information that are relevant to their context
An example of such a goal-directed application might be the user requiring specific information about schedules for a journey
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 519
they are currently undertaking
Equally mobile users are typically less interested in lengthy documents or in browsing The ergonomics of the device are
frequently unsuitable for reading lengthy documents and users will often only access such information from mobile devices as alast resort because more convenient access is not available
Advertising
Developers of commercial Web sites should note that different commercial models are often at work when the Web isaccessed from mobile devices as compared with desktop devices For example some mechanisms that are commonly used
for presenting advertising material (such as pop-ups pop-unders and large banners) do not work well on small devices
Device Limitations
As already noted the restrictions imposed by the keyboard and the screen typically require a different approach to be taken
to page design than for desktop devices Various other limitations may apply and these have an impact on the usability of the
Web on a mobile device Mobile browsers may not support scripting or plug-ins which means that the range of content that
they support is limited On many devices the user has no choice of browser and upgrading it is not possible
Some activities associated with rendering Web pages are computationally intensive - for example re-flowing pages laying out
tables processing unnecessarily long and complex style sheets and handling invalid markup JavaScript interpretation playing
videos and using the network all draw heavily on the CPU too and processing power can be quite limited on mobile devices
This means that page rendering may take a noticeable time to complete As well as introducing a noticeable delay suchprocessing uses more battery power as does communication with the server
Many devices have limited memory available for pages and images and exceeding their memory limitations results in
incomplete display and can cause other problems
One Web
Despite of the restrictions we need just one web site that can be used on all devices That way one and the same URL can be
used no matter what device the user is on That way the content of the site remains the same on all devices Some
(minor exceptional) changes can be made as long as the content at the utmost extent stays (thematically) the same
Presentation Issues
Today still many Web pages are laid out for presentation on desktop-size displays and exploit the capabilities of desktopbrowsing software
Accessing such a Web page on a mobile device often results in a poor or unusable experience Contributing factors include
pages not being laid out as intended and context and overview being lost because of the limited screen size and therefore
small amount of material that is visible to the user
The limited screen size may require considerable scrolling or zooming to see the subject matter of the page especially if thetop of the page is occupied by images and navigation links In these cases the user gets no immediate feedback as to whether
their retrieval has resulted in the right content It is particularly important in the mobile context to help the user create a mental
image of the site This can be assisted by adopting a consistent style across pages en presentations and can be significantly
diminished by an uneven style
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 619
3 Progressive Enhancement
Progressive Enhancement
Before we start to write any code for any Web page we need to consider what are the most appropriate technologies for usto use HTML and CSS are evolving all the time as are browsers and devices new APIs are being defined and implemented
and all this is increasing the power of an already powerful platform We face a continual paradox
if we only use code that works on every Web-enabled device then were producing content that is almost certainly
going to be unattractive and disappointing to users of more powerful devices
if we only produce code that only works on the latest most powerful smartphones were going to exclude a significantproportion of our potential audience
The answer to this is the theme that will run through the whole of the course progressive enhancement This means that all
the information and functionality you wish to provide should work for everyone However users of more advanced devices
should expect to receive a better experience
Progressive enhancement and graceful degradation are basically the same thing The importance of both is that all the
information and functionality you wish to provide should work for everyone However users of more advanced devices should
expect to receive a better experience And there are two approaches to achieve this and shortly progressive enhancement is
the way to go
PE in CSS
With progressive enhancement (PE) in CSS you begin with the absolute basics that will be supported by all browsers and thatwill create a good enough screen presentation Then you start enhancing this with CSS3 The browsers that support this will
use it the browsers that dont will ignore it Of course you will always follow the basic principle of only use what you need
For example you will not use position or display (low support on simple mobiles) when you can do the job with float (that may
have less complications when not supported)
Graceful degradation
Graceful degradationthe opposite of progressive enhancement means that you start with the enhanced versions and add basicfunctionalities to solve things for browsers with no support of the used CSS This means in most cases more work Though
when you create rounded corners in the first place the fact that in older browsers the corners will be square is a gracefuldegradation as well but does not cost you anything When you add a javascript solution to create rounded corners in IE8 andlower as well this is time consuming example of graceful degradation While the fact that with JS disabled the corners still will
be square you could label it with PE
JavaScript
The same principle of progressive enhancement counts for javascript dont make the functionality of the web page depend on
javascript it is extra it adds extra functionality for those who have javascript enabled The way the web is developing this issubject of discussion what may be summarized to dont use it when you dont need it (like for basic infomative web pages)and you cannot do without it for enhanced web pages like web apps
More about progressive enhancement
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 719
4 Content First
Where progressive enhancement is the way to deal with design (CSS) and functions (JavaScript) content first is the
recommended way to set up a website With content first you start the project with the content that has to go in the websiteFor one this way you avoid to force content in a not suitable design because you have the content first This spares you extrawork and lots of design frustrations
Dont Think Design When Creating the Content Structure
In the former chapter of this book you could read about one Web and how one Web site with one and the same URL will beused on all devices As result it may be clear that when coding the Web site any thought on what part of that content will bepresented in what column or what column will go left or right is quite useless or in the least hard to oversee This means that
adapting the order of the content in favor of the layout has become quite useless
Structure and Semantics First
The Web iacutes about content The people the content is created for use screens or assistive technologies Search engines indexthe content and apps use the content for their tasks While the screen design will be made for only part of the users the
structure and the mark up of the content is important for all users Good reason to first focus on the best semantics andstructure of the content in HTML instead of forming the HTML in favor of the screen design only for the users with screensFor design purposes you may need to add extra div-tags in the HTML in the layout process to group elements so that you
can call them with CSS
In the lecture of next week you will read about the promising new CSS3 layout techniques that facilitate the content first workflow Once these techniques will be enough supported to start fully using them there is absolutely no reason left to move
content around for design purposes They will give you the tools to change the order of the content with CSS for each differentlayout width
Content Model
Content structure is another subject and definitely not part of this course Nevertheless to give you a small lead on thischallenging (and important) subject you can read this article about content modeling
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 819
5 HTML5
Document Type
The doctype declaration appears at the beginning of the document and basically tells parsers and validators that the documentis an HTML document and should be treated as such With simply the HTML5 DocType your web page will be backwards
compatible with the older browsers The HTML5 doctype is to be written as
ltDOCTYPE htmlgt
Structural Semantical Elements
If you dont use them already then start today the structural semantical HTML5 elements like header nav main sectionarticle aside footer and more Remy Sharps HTML5 shim makes these elements work in older browsers includingIE6 A solid alternative with no need for javascript is adding extra div elements as container for or nested in the HTML5
elements and style the divs instead of the HTML5 elements
And better safe than sorry good to set display block for the semantical HTML5 elements in CSS to cover the older
browser versions that dont have this by default set
Even though HTML5 is still evolving and is not a done deal as of today the main parts are stable and HTML5 is backwardcompatible with previous versions of (X)HTML in any case Besides there is no doubt that upcoming versions of mobile Web
browsers will support more and more features of HTML5
Beware though new functionalities introduced in HTML5 (such as the ltvideogt and ltaudiogt tags) are not available in all
mobile Web browsers yet This yields the question what can you take for granted when you also want to take mobile devicesinto account
So how should we proceed Progressive enhancement (see the book in this lecture named with this title) The right
approach with progressive enhancement will make sure that the other HTML5 features are extra that the web page doesnot depend on it so that when a browser does not support these features the web page will still work and the content is stillaccessible
Sectioning Elements
The following HTML5 elements are sectioning elements nav section article aside what means they markup theircontent as sections As you will read below not headings but sectioning elements are responsible for the document outlines inHTML5
Headings
With the new HTML5 Document Outlining Algorithm a correct use of headings needs some extra attention
This is how it was before HTML5
Use headings and paragraphs and donrsquot jump from H1 to H4Use preferably just one H1 per page (in favor of legacy screen readers) and use that one as heading for the maincontent (so it will differ per page)
See Creating Semantic Structure to understand the basic correct ranking of headings for legacy browsers
HTML5 is much more flexible on the subject of headings as you can read on the W3C site
The difference is that modern browsers that support the HTML5 Document Outlining Algorithm use the sectioning elements(nav section article aside) for the document outlines The first heading inside the sectioning element will be used as
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 919
the title of that element
The first heading in the body that is not nested in a sectioning element will be used as document title (ie title for the body) nomatter where it will be placed in the HTML ie this can even be on the last line of the body Since a header (or a footer)
are not sectioning elements a heading nested in a header (or footer) can serve duty as document title
Good reads on this subject can be found at
httpsdevelopermozillaorghttpcodingsmashingmagazinecomhttphtml5doctorcomoutlines
Still it is highly recommended to use the appropriate rank of the sections nesting level for the headings in favor oflegacy browsers In practice this means that if the section is on a 2nd or 3d level in the outlines it is recommended to use a
corresponding H2 or H3 This way the document structure will be backwards compatible for the legacy browsers that dontsupport the HTML5 document outlines algorithm ie dont recognize sectioning elements as outlines More about this in thisarticle on the Paciello Group Blog
Main
The main element is relatively new in HTML5 and marks the main content of a web page It can only be used once per page
and is not a sectioning element ie it does not affect the document outlines
This leads to the conclusion that main should not be used to markup asection or an article since this will lead to a missing
outline The main element is meant to group principally sectioning elements
Syntax
HTML5 is more than a definition of available elements attributes and scripting interfaces It also defines the syntax that youcan use to write your documents HTML5 defines two possible syntaxes for the price of one the HTML syntax and the
XHTML syntax The HTML syntax is lax in that it allows many omissions in the resulting document For instance thefollowing is valid according to the HTML syntax
ltp id=p1gtSome text in a paragraph ltBRgt
A second line
ltPgtSome more text in another paragraph
The XHTML syntax is much stricter forcing you to be explicit about things and to use strictly defined separators The sameexample as above would be written in XHTML as
ltp id=p1gtSome text in a paragraph ltbr gt
A second lineltpgt
ltpgtSome more text in another paragraphltpgt
Theoretically there may be some older mobile Web browsers (eg on feature phones) active that may require that you respectXML rules more thoroughly Since they are a true minority we decide to ignore them Modern mobile Web browsers willparse content that follows the HTML syntax correctly The result is that we dont see the need of writing XHTML syntax in
HTML5
Nevertheless we advise to make sure that your content will work on the vast majority of devices to stick to just some basic
main rules of XHTML
use lower case element and attribute namesenclose attribute values in double quotation marks
close elements
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1019
Thats all Apart from that there is no need to write ltbr gt just ltbrgt will do same with other so called empty elements likethe ltimggt and ltmetagt element
Media Type
HTML documents should be served with the texthtml media type Some very old mobile Web browsers (the same oneswe mentioned above and decided to ignore) may require you to use the more XHTML-friendly applicationxhtml+xmlmedia type but this should be viewed as exceptions to the rule (and has too much disadvantages)
Type attribute
In XHTML we write link and script elements like this
ltlink href=screencss rel=stylesheet type=textcss gtltscript src=functionsphp type=textjavascriptgtltscriptgt
In HTML5 you can leave out the type attribute
ltlink href=screencss rel=stylesheetgtltscript src=functionsphpgtltscriptgt
Resources and References
Since this course is not about HTML5 (we have a course that dives deep into the subject) you can find some links belowthat can help you further on this subject And if you know some nice CSS-based layout tutorials or resources feel free to postthe relevant links to the forum to enrich this course and help your course-mates
The services of HTML5 Boilerplate and Modernizr can be of great help but only use it when you need it and what you needof it For the assignments in this course we prefer you to experience how far you can come without the use of
either one
And in case it is new for you in the links below you will find a tutorial that may help you further with HTML5 Boilerplate
Start
Yes You Can Use HTML5 Today
5 Reasons Why You Can Use HTML5 TodayBuilding Web Pages With HTML5HTML5 Content Model
List of HTML elements from W3CBeginnersHTML FAQs
Semantics
Semantic Code Importance amp Relevancy to SEO
Semantics and sensibility
Semantic HTML and Search Engine OptimizationHTML5 Structural Sementical ElementsCreating Semantic Structure (for legacy browsers)
Links about the HTML5 Document Outlining Algorithm
w3corg about headings and sections
httpsdevelopermozillaorghttpcodingsmashingmagazinecom
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 519
they are currently undertaking
Equally mobile users are typically less interested in lengthy documents or in browsing The ergonomics of the device are
frequently unsuitable for reading lengthy documents and users will often only access such information from mobile devices as alast resort because more convenient access is not available
Advertising
Developers of commercial Web sites should note that different commercial models are often at work when the Web isaccessed from mobile devices as compared with desktop devices For example some mechanisms that are commonly used
for presenting advertising material (such as pop-ups pop-unders and large banners) do not work well on small devices
Device Limitations
As already noted the restrictions imposed by the keyboard and the screen typically require a different approach to be taken
to page design than for desktop devices Various other limitations may apply and these have an impact on the usability of the
Web on a mobile device Mobile browsers may not support scripting or plug-ins which means that the range of content that
they support is limited On many devices the user has no choice of browser and upgrading it is not possible
Some activities associated with rendering Web pages are computationally intensive - for example re-flowing pages laying out
tables processing unnecessarily long and complex style sheets and handling invalid markup JavaScript interpretation playing
videos and using the network all draw heavily on the CPU too and processing power can be quite limited on mobile devices
This means that page rendering may take a noticeable time to complete As well as introducing a noticeable delay suchprocessing uses more battery power as does communication with the server
Many devices have limited memory available for pages and images and exceeding their memory limitations results in
incomplete display and can cause other problems
One Web
Despite of the restrictions we need just one web site that can be used on all devices That way one and the same URL can be
used no matter what device the user is on That way the content of the site remains the same on all devices Some
(minor exceptional) changes can be made as long as the content at the utmost extent stays (thematically) the same
Presentation Issues
Today still many Web pages are laid out for presentation on desktop-size displays and exploit the capabilities of desktopbrowsing software
Accessing such a Web page on a mobile device often results in a poor or unusable experience Contributing factors include
pages not being laid out as intended and context and overview being lost because of the limited screen size and therefore
small amount of material that is visible to the user
The limited screen size may require considerable scrolling or zooming to see the subject matter of the page especially if thetop of the page is occupied by images and navigation links In these cases the user gets no immediate feedback as to whether
their retrieval has resulted in the right content It is particularly important in the mobile context to help the user create a mental
image of the site This can be assisted by adopting a consistent style across pages en presentations and can be significantly
diminished by an uneven style
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 619
3 Progressive Enhancement
Progressive Enhancement
Before we start to write any code for any Web page we need to consider what are the most appropriate technologies for usto use HTML and CSS are evolving all the time as are browsers and devices new APIs are being defined and implemented
and all this is increasing the power of an already powerful platform We face a continual paradox
if we only use code that works on every Web-enabled device then were producing content that is almost certainly
going to be unattractive and disappointing to users of more powerful devices
if we only produce code that only works on the latest most powerful smartphones were going to exclude a significantproportion of our potential audience
The answer to this is the theme that will run through the whole of the course progressive enhancement This means that all
the information and functionality you wish to provide should work for everyone However users of more advanced devices
should expect to receive a better experience
Progressive enhancement and graceful degradation are basically the same thing The importance of both is that all the
information and functionality you wish to provide should work for everyone However users of more advanced devices should
expect to receive a better experience And there are two approaches to achieve this and shortly progressive enhancement is
the way to go
PE in CSS
With progressive enhancement (PE) in CSS you begin with the absolute basics that will be supported by all browsers and thatwill create a good enough screen presentation Then you start enhancing this with CSS3 The browsers that support this will
use it the browsers that dont will ignore it Of course you will always follow the basic principle of only use what you need
For example you will not use position or display (low support on simple mobiles) when you can do the job with float (that may
have less complications when not supported)
Graceful degradation
Graceful degradationthe opposite of progressive enhancement means that you start with the enhanced versions and add basicfunctionalities to solve things for browsers with no support of the used CSS This means in most cases more work Though
when you create rounded corners in the first place the fact that in older browsers the corners will be square is a gracefuldegradation as well but does not cost you anything When you add a javascript solution to create rounded corners in IE8 andlower as well this is time consuming example of graceful degradation While the fact that with JS disabled the corners still will
be square you could label it with PE
JavaScript
The same principle of progressive enhancement counts for javascript dont make the functionality of the web page depend on
javascript it is extra it adds extra functionality for those who have javascript enabled The way the web is developing this issubject of discussion what may be summarized to dont use it when you dont need it (like for basic infomative web pages)and you cannot do without it for enhanced web pages like web apps
More about progressive enhancement
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 719
4 Content First
Where progressive enhancement is the way to deal with design (CSS) and functions (JavaScript) content first is the
recommended way to set up a website With content first you start the project with the content that has to go in the websiteFor one this way you avoid to force content in a not suitable design because you have the content first This spares you extrawork and lots of design frustrations
Dont Think Design When Creating the Content Structure
In the former chapter of this book you could read about one Web and how one Web site with one and the same URL will beused on all devices As result it may be clear that when coding the Web site any thought on what part of that content will bepresented in what column or what column will go left or right is quite useless or in the least hard to oversee This means that
adapting the order of the content in favor of the layout has become quite useless
Structure and Semantics First
The Web iacutes about content The people the content is created for use screens or assistive technologies Search engines indexthe content and apps use the content for their tasks While the screen design will be made for only part of the users the
structure and the mark up of the content is important for all users Good reason to first focus on the best semantics andstructure of the content in HTML instead of forming the HTML in favor of the screen design only for the users with screensFor design purposes you may need to add extra div-tags in the HTML in the layout process to group elements so that you
can call them with CSS
In the lecture of next week you will read about the promising new CSS3 layout techniques that facilitate the content first workflow Once these techniques will be enough supported to start fully using them there is absolutely no reason left to move
content around for design purposes They will give you the tools to change the order of the content with CSS for each differentlayout width
Content Model
Content structure is another subject and definitely not part of this course Nevertheless to give you a small lead on thischallenging (and important) subject you can read this article about content modeling
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 819
5 HTML5
Document Type
The doctype declaration appears at the beginning of the document and basically tells parsers and validators that the documentis an HTML document and should be treated as such With simply the HTML5 DocType your web page will be backwards
compatible with the older browsers The HTML5 doctype is to be written as
ltDOCTYPE htmlgt
Structural Semantical Elements
If you dont use them already then start today the structural semantical HTML5 elements like header nav main sectionarticle aside footer and more Remy Sharps HTML5 shim makes these elements work in older browsers includingIE6 A solid alternative with no need for javascript is adding extra div elements as container for or nested in the HTML5
elements and style the divs instead of the HTML5 elements
And better safe than sorry good to set display block for the semantical HTML5 elements in CSS to cover the older
browser versions that dont have this by default set
Even though HTML5 is still evolving and is not a done deal as of today the main parts are stable and HTML5 is backwardcompatible with previous versions of (X)HTML in any case Besides there is no doubt that upcoming versions of mobile Web
browsers will support more and more features of HTML5
Beware though new functionalities introduced in HTML5 (such as the ltvideogt and ltaudiogt tags) are not available in all
mobile Web browsers yet This yields the question what can you take for granted when you also want to take mobile devicesinto account
So how should we proceed Progressive enhancement (see the book in this lecture named with this title) The right
approach with progressive enhancement will make sure that the other HTML5 features are extra that the web page doesnot depend on it so that when a browser does not support these features the web page will still work and the content is stillaccessible
Sectioning Elements
The following HTML5 elements are sectioning elements nav section article aside what means they markup theircontent as sections As you will read below not headings but sectioning elements are responsible for the document outlines inHTML5
Headings
With the new HTML5 Document Outlining Algorithm a correct use of headings needs some extra attention
This is how it was before HTML5
Use headings and paragraphs and donrsquot jump from H1 to H4Use preferably just one H1 per page (in favor of legacy screen readers) and use that one as heading for the maincontent (so it will differ per page)
See Creating Semantic Structure to understand the basic correct ranking of headings for legacy browsers
HTML5 is much more flexible on the subject of headings as you can read on the W3C site
The difference is that modern browsers that support the HTML5 Document Outlining Algorithm use the sectioning elements(nav section article aside) for the document outlines The first heading inside the sectioning element will be used as
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 919
the title of that element
The first heading in the body that is not nested in a sectioning element will be used as document title (ie title for the body) nomatter where it will be placed in the HTML ie this can even be on the last line of the body Since a header (or a footer)
are not sectioning elements a heading nested in a header (or footer) can serve duty as document title
Good reads on this subject can be found at
httpsdevelopermozillaorghttpcodingsmashingmagazinecomhttphtml5doctorcomoutlines
Still it is highly recommended to use the appropriate rank of the sections nesting level for the headings in favor oflegacy browsers In practice this means that if the section is on a 2nd or 3d level in the outlines it is recommended to use a
corresponding H2 or H3 This way the document structure will be backwards compatible for the legacy browsers that dontsupport the HTML5 document outlines algorithm ie dont recognize sectioning elements as outlines More about this in thisarticle on the Paciello Group Blog
Main
The main element is relatively new in HTML5 and marks the main content of a web page It can only be used once per page
and is not a sectioning element ie it does not affect the document outlines
This leads to the conclusion that main should not be used to markup asection or an article since this will lead to a missing
outline The main element is meant to group principally sectioning elements
Syntax
HTML5 is more than a definition of available elements attributes and scripting interfaces It also defines the syntax that youcan use to write your documents HTML5 defines two possible syntaxes for the price of one the HTML syntax and the
XHTML syntax The HTML syntax is lax in that it allows many omissions in the resulting document For instance thefollowing is valid according to the HTML syntax
ltp id=p1gtSome text in a paragraph ltBRgt
A second line
ltPgtSome more text in another paragraph
The XHTML syntax is much stricter forcing you to be explicit about things and to use strictly defined separators The sameexample as above would be written in XHTML as
ltp id=p1gtSome text in a paragraph ltbr gt
A second lineltpgt
ltpgtSome more text in another paragraphltpgt
Theoretically there may be some older mobile Web browsers (eg on feature phones) active that may require that you respectXML rules more thoroughly Since they are a true minority we decide to ignore them Modern mobile Web browsers willparse content that follows the HTML syntax correctly The result is that we dont see the need of writing XHTML syntax in
HTML5
Nevertheless we advise to make sure that your content will work on the vast majority of devices to stick to just some basic
main rules of XHTML
use lower case element and attribute namesenclose attribute values in double quotation marks
close elements
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1019
Thats all Apart from that there is no need to write ltbr gt just ltbrgt will do same with other so called empty elements likethe ltimggt and ltmetagt element
Media Type
HTML documents should be served with the texthtml media type Some very old mobile Web browsers (the same oneswe mentioned above and decided to ignore) may require you to use the more XHTML-friendly applicationxhtml+xmlmedia type but this should be viewed as exceptions to the rule (and has too much disadvantages)
Type attribute
In XHTML we write link and script elements like this
ltlink href=screencss rel=stylesheet type=textcss gtltscript src=functionsphp type=textjavascriptgtltscriptgt
In HTML5 you can leave out the type attribute
ltlink href=screencss rel=stylesheetgtltscript src=functionsphpgtltscriptgt
Resources and References
Since this course is not about HTML5 (we have a course that dives deep into the subject) you can find some links belowthat can help you further on this subject And if you know some nice CSS-based layout tutorials or resources feel free to postthe relevant links to the forum to enrich this course and help your course-mates
The services of HTML5 Boilerplate and Modernizr can be of great help but only use it when you need it and what you needof it For the assignments in this course we prefer you to experience how far you can come without the use of
either one
And in case it is new for you in the links below you will find a tutorial that may help you further with HTML5 Boilerplate
Start
Yes You Can Use HTML5 Today
5 Reasons Why You Can Use HTML5 TodayBuilding Web Pages With HTML5HTML5 Content Model
List of HTML elements from W3CBeginnersHTML FAQs
Semantics
Semantic Code Importance amp Relevancy to SEO
Semantics and sensibility
Semantic HTML and Search Engine OptimizationHTML5 Structural Sementical ElementsCreating Semantic Structure (for legacy browsers)
Links about the HTML5 Document Outlining Algorithm
w3corg about headings and sections
httpsdevelopermozillaorghttpcodingsmashingmagazinecom
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 619
3 Progressive Enhancement
Progressive Enhancement
Before we start to write any code for any Web page we need to consider what are the most appropriate technologies for usto use HTML and CSS are evolving all the time as are browsers and devices new APIs are being defined and implemented
and all this is increasing the power of an already powerful platform We face a continual paradox
if we only use code that works on every Web-enabled device then were producing content that is almost certainly
going to be unattractive and disappointing to users of more powerful devices
if we only produce code that only works on the latest most powerful smartphones were going to exclude a significantproportion of our potential audience
The answer to this is the theme that will run through the whole of the course progressive enhancement This means that all
the information and functionality you wish to provide should work for everyone However users of more advanced devices
should expect to receive a better experience
Progressive enhancement and graceful degradation are basically the same thing The importance of both is that all the
information and functionality you wish to provide should work for everyone However users of more advanced devices should
expect to receive a better experience And there are two approaches to achieve this and shortly progressive enhancement is
the way to go
PE in CSS
With progressive enhancement (PE) in CSS you begin with the absolute basics that will be supported by all browsers and thatwill create a good enough screen presentation Then you start enhancing this with CSS3 The browsers that support this will
use it the browsers that dont will ignore it Of course you will always follow the basic principle of only use what you need
For example you will not use position or display (low support on simple mobiles) when you can do the job with float (that may
have less complications when not supported)
Graceful degradation
Graceful degradationthe opposite of progressive enhancement means that you start with the enhanced versions and add basicfunctionalities to solve things for browsers with no support of the used CSS This means in most cases more work Though
when you create rounded corners in the first place the fact that in older browsers the corners will be square is a gracefuldegradation as well but does not cost you anything When you add a javascript solution to create rounded corners in IE8 andlower as well this is time consuming example of graceful degradation While the fact that with JS disabled the corners still will
be square you could label it with PE
JavaScript
The same principle of progressive enhancement counts for javascript dont make the functionality of the web page depend on
javascript it is extra it adds extra functionality for those who have javascript enabled The way the web is developing this issubject of discussion what may be summarized to dont use it when you dont need it (like for basic infomative web pages)and you cannot do without it for enhanced web pages like web apps
More about progressive enhancement
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 719
4 Content First
Where progressive enhancement is the way to deal with design (CSS) and functions (JavaScript) content first is the
recommended way to set up a website With content first you start the project with the content that has to go in the websiteFor one this way you avoid to force content in a not suitable design because you have the content first This spares you extrawork and lots of design frustrations
Dont Think Design When Creating the Content Structure
In the former chapter of this book you could read about one Web and how one Web site with one and the same URL will beused on all devices As result it may be clear that when coding the Web site any thought on what part of that content will bepresented in what column or what column will go left or right is quite useless or in the least hard to oversee This means that
adapting the order of the content in favor of the layout has become quite useless
Structure and Semantics First
The Web iacutes about content The people the content is created for use screens or assistive technologies Search engines indexthe content and apps use the content for their tasks While the screen design will be made for only part of the users the
structure and the mark up of the content is important for all users Good reason to first focus on the best semantics andstructure of the content in HTML instead of forming the HTML in favor of the screen design only for the users with screensFor design purposes you may need to add extra div-tags in the HTML in the layout process to group elements so that you
can call them with CSS
In the lecture of next week you will read about the promising new CSS3 layout techniques that facilitate the content first workflow Once these techniques will be enough supported to start fully using them there is absolutely no reason left to move
content around for design purposes They will give you the tools to change the order of the content with CSS for each differentlayout width
Content Model
Content structure is another subject and definitely not part of this course Nevertheless to give you a small lead on thischallenging (and important) subject you can read this article about content modeling
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 819
5 HTML5
Document Type
The doctype declaration appears at the beginning of the document and basically tells parsers and validators that the documentis an HTML document and should be treated as such With simply the HTML5 DocType your web page will be backwards
compatible with the older browsers The HTML5 doctype is to be written as
ltDOCTYPE htmlgt
Structural Semantical Elements
If you dont use them already then start today the structural semantical HTML5 elements like header nav main sectionarticle aside footer and more Remy Sharps HTML5 shim makes these elements work in older browsers includingIE6 A solid alternative with no need for javascript is adding extra div elements as container for or nested in the HTML5
elements and style the divs instead of the HTML5 elements
And better safe than sorry good to set display block for the semantical HTML5 elements in CSS to cover the older
browser versions that dont have this by default set
Even though HTML5 is still evolving and is not a done deal as of today the main parts are stable and HTML5 is backwardcompatible with previous versions of (X)HTML in any case Besides there is no doubt that upcoming versions of mobile Web
browsers will support more and more features of HTML5
Beware though new functionalities introduced in HTML5 (such as the ltvideogt and ltaudiogt tags) are not available in all
mobile Web browsers yet This yields the question what can you take for granted when you also want to take mobile devicesinto account
So how should we proceed Progressive enhancement (see the book in this lecture named with this title) The right
approach with progressive enhancement will make sure that the other HTML5 features are extra that the web page doesnot depend on it so that when a browser does not support these features the web page will still work and the content is stillaccessible
Sectioning Elements
The following HTML5 elements are sectioning elements nav section article aside what means they markup theircontent as sections As you will read below not headings but sectioning elements are responsible for the document outlines inHTML5
Headings
With the new HTML5 Document Outlining Algorithm a correct use of headings needs some extra attention
This is how it was before HTML5
Use headings and paragraphs and donrsquot jump from H1 to H4Use preferably just one H1 per page (in favor of legacy screen readers) and use that one as heading for the maincontent (so it will differ per page)
See Creating Semantic Structure to understand the basic correct ranking of headings for legacy browsers
HTML5 is much more flexible on the subject of headings as you can read on the W3C site
The difference is that modern browsers that support the HTML5 Document Outlining Algorithm use the sectioning elements(nav section article aside) for the document outlines The first heading inside the sectioning element will be used as
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 919
the title of that element
The first heading in the body that is not nested in a sectioning element will be used as document title (ie title for the body) nomatter where it will be placed in the HTML ie this can even be on the last line of the body Since a header (or a footer)
are not sectioning elements a heading nested in a header (or footer) can serve duty as document title
Good reads on this subject can be found at
httpsdevelopermozillaorghttpcodingsmashingmagazinecomhttphtml5doctorcomoutlines
Still it is highly recommended to use the appropriate rank of the sections nesting level for the headings in favor oflegacy browsers In practice this means that if the section is on a 2nd or 3d level in the outlines it is recommended to use a
corresponding H2 or H3 This way the document structure will be backwards compatible for the legacy browsers that dontsupport the HTML5 document outlines algorithm ie dont recognize sectioning elements as outlines More about this in thisarticle on the Paciello Group Blog
Main
The main element is relatively new in HTML5 and marks the main content of a web page It can only be used once per page
and is not a sectioning element ie it does not affect the document outlines
This leads to the conclusion that main should not be used to markup asection or an article since this will lead to a missing
outline The main element is meant to group principally sectioning elements
Syntax
HTML5 is more than a definition of available elements attributes and scripting interfaces It also defines the syntax that youcan use to write your documents HTML5 defines two possible syntaxes for the price of one the HTML syntax and the
XHTML syntax The HTML syntax is lax in that it allows many omissions in the resulting document For instance thefollowing is valid according to the HTML syntax
ltp id=p1gtSome text in a paragraph ltBRgt
A second line
ltPgtSome more text in another paragraph
The XHTML syntax is much stricter forcing you to be explicit about things and to use strictly defined separators The sameexample as above would be written in XHTML as
ltp id=p1gtSome text in a paragraph ltbr gt
A second lineltpgt
ltpgtSome more text in another paragraphltpgt
Theoretically there may be some older mobile Web browsers (eg on feature phones) active that may require that you respectXML rules more thoroughly Since they are a true minority we decide to ignore them Modern mobile Web browsers willparse content that follows the HTML syntax correctly The result is that we dont see the need of writing XHTML syntax in
HTML5
Nevertheless we advise to make sure that your content will work on the vast majority of devices to stick to just some basic
main rules of XHTML
use lower case element and attribute namesenclose attribute values in double quotation marks
close elements
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1019
Thats all Apart from that there is no need to write ltbr gt just ltbrgt will do same with other so called empty elements likethe ltimggt and ltmetagt element
Media Type
HTML documents should be served with the texthtml media type Some very old mobile Web browsers (the same oneswe mentioned above and decided to ignore) may require you to use the more XHTML-friendly applicationxhtml+xmlmedia type but this should be viewed as exceptions to the rule (and has too much disadvantages)
Type attribute
In XHTML we write link and script elements like this
ltlink href=screencss rel=stylesheet type=textcss gtltscript src=functionsphp type=textjavascriptgtltscriptgt
In HTML5 you can leave out the type attribute
ltlink href=screencss rel=stylesheetgtltscript src=functionsphpgtltscriptgt
Resources and References
Since this course is not about HTML5 (we have a course that dives deep into the subject) you can find some links belowthat can help you further on this subject And if you know some nice CSS-based layout tutorials or resources feel free to postthe relevant links to the forum to enrich this course and help your course-mates
The services of HTML5 Boilerplate and Modernizr can be of great help but only use it when you need it and what you needof it For the assignments in this course we prefer you to experience how far you can come without the use of
either one
And in case it is new for you in the links below you will find a tutorial that may help you further with HTML5 Boilerplate
Start
Yes You Can Use HTML5 Today
5 Reasons Why You Can Use HTML5 TodayBuilding Web Pages With HTML5HTML5 Content Model
List of HTML elements from W3CBeginnersHTML FAQs
Semantics
Semantic Code Importance amp Relevancy to SEO
Semantics and sensibility
Semantic HTML and Search Engine OptimizationHTML5 Structural Sementical ElementsCreating Semantic Structure (for legacy browsers)
Links about the HTML5 Document Outlining Algorithm
w3corg about headings and sections
httpsdevelopermozillaorghttpcodingsmashingmagazinecom
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 719
4 Content First
Where progressive enhancement is the way to deal with design (CSS) and functions (JavaScript) content first is the
recommended way to set up a website With content first you start the project with the content that has to go in the websiteFor one this way you avoid to force content in a not suitable design because you have the content first This spares you extrawork and lots of design frustrations
Dont Think Design When Creating the Content Structure
In the former chapter of this book you could read about one Web and how one Web site with one and the same URL will beused on all devices As result it may be clear that when coding the Web site any thought on what part of that content will bepresented in what column or what column will go left or right is quite useless or in the least hard to oversee This means that
adapting the order of the content in favor of the layout has become quite useless
Structure and Semantics First
The Web iacutes about content The people the content is created for use screens or assistive technologies Search engines indexthe content and apps use the content for their tasks While the screen design will be made for only part of the users the
structure and the mark up of the content is important for all users Good reason to first focus on the best semantics andstructure of the content in HTML instead of forming the HTML in favor of the screen design only for the users with screensFor design purposes you may need to add extra div-tags in the HTML in the layout process to group elements so that you
can call them with CSS
In the lecture of next week you will read about the promising new CSS3 layout techniques that facilitate the content first workflow Once these techniques will be enough supported to start fully using them there is absolutely no reason left to move
content around for design purposes They will give you the tools to change the order of the content with CSS for each differentlayout width
Content Model
Content structure is another subject and definitely not part of this course Nevertheless to give you a small lead on thischallenging (and important) subject you can read this article about content modeling
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 819
5 HTML5
Document Type
The doctype declaration appears at the beginning of the document and basically tells parsers and validators that the documentis an HTML document and should be treated as such With simply the HTML5 DocType your web page will be backwards
compatible with the older browsers The HTML5 doctype is to be written as
ltDOCTYPE htmlgt
Structural Semantical Elements
If you dont use them already then start today the structural semantical HTML5 elements like header nav main sectionarticle aside footer and more Remy Sharps HTML5 shim makes these elements work in older browsers includingIE6 A solid alternative with no need for javascript is adding extra div elements as container for or nested in the HTML5
elements and style the divs instead of the HTML5 elements
And better safe than sorry good to set display block for the semantical HTML5 elements in CSS to cover the older
browser versions that dont have this by default set
Even though HTML5 is still evolving and is not a done deal as of today the main parts are stable and HTML5 is backwardcompatible with previous versions of (X)HTML in any case Besides there is no doubt that upcoming versions of mobile Web
browsers will support more and more features of HTML5
Beware though new functionalities introduced in HTML5 (such as the ltvideogt and ltaudiogt tags) are not available in all
mobile Web browsers yet This yields the question what can you take for granted when you also want to take mobile devicesinto account
So how should we proceed Progressive enhancement (see the book in this lecture named with this title) The right
approach with progressive enhancement will make sure that the other HTML5 features are extra that the web page doesnot depend on it so that when a browser does not support these features the web page will still work and the content is stillaccessible
Sectioning Elements
The following HTML5 elements are sectioning elements nav section article aside what means they markup theircontent as sections As you will read below not headings but sectioning elements are responsible for the document outlines inHTML5
Headings
With the new HTML5 Document Outlining Algorithm a correct use of headings needs some extra attention
This is how it was before HTML5
Use headings and paragraphs and donrsquot jump from H1 to H4Use preferably just one H1 per page (in favor of legacy screen readers) and use that one as heading for the maincontent (so it will differ per page)
See Creating Semantic Structure to understand the basic correct ranking of headings for legacy browsers
HTML5 is much more flexible on the subject of headings as you can read on the W3C site
The difference is that modern browsers that support the HTML5 Document Outlining Algorithm use the sectioning elements(nav section article aside) for the document outlines The first heading inside the sectioning element will be used as
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 919
the title of that element
The first heading in the body that is not nested in a sectioning element will be used as document title (ie title for the body) nomatter where it will be placed in the HTML ie this can even be on the last line of the body Since a header (or a footer)
are not sectioning elements a heading nested in a header (or footer) can serve duty as document title
Good reads on this subject can be found at
httpsdevelopermozillaorghttpcodingsmashingmagazinecomhttphtml5doctorcomoutlines
Still it is highly recommended to use the appropriate rank of the sections nesting level for the headings in favor oflegacy browsers In practice this means that if the section is on a 2nd or 3d level in the outlines it is recommended to use a
corresponding H2 or H3 This way the document structure will be backwards compatible for the legacy browsers that dontsupport the HTML5 document outlines algorithm ie dont recognize sectioning elements as outlines More about this in thisarticle on the Paciello Group Blog
Main
The main element is relatively new in HTML5 and marks the main content of a web page It can only be used once per page
and is not a sectioning element ie it does not affect the document outlines
This leads to the conclusion that main should not be used to markup asection or an article since this will lead to a missing
outline The main element is meant to group principally sectioning elements
Syntax
HTML5 is more than a definition of available elements attributes and scripting interfaces It also defines the syntax that youcan use to write your documents HTML5 defines two possible syntaxes for the price of one the HTML syntax and the
XHTML syntax The HTML syntax is lax in that it allows many omissions in the resulting document For instance thefollowing is valid according to the HTML syntax
ltp id=p1gtSome text in a paragraph ltBRgt
A second line
ltPgtSome more text in another paragraph
The XHTML syntax is much stricter forcing you to be explicit about things and to use strictly defined separators The sameexample as above would be written in XHTML as
ltp id=p1gtSome text in a paragraph ltbr gt
A second lineltpgt
ltpgtSome more text in another paragraphltpgt
Theoretically there may be some older mobile Web browsers (eg on feature phones) active that may require that you respectXML rules more thoroughly Since they are a true minority we decide to ignore them Modern mobile Web browsers willparse content that follows the HTML syntax correctly The result is that we dont see the need of writing XHTML syntax in
HTML5
Nevertheless we advise to make sure that your content will work on the vast majority of devices to stick to just some basic
main rules of XHTML
use lower case element and attribute namesenclose attribute values in double quotation marks
close elements
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1019
Thats all Apart from that there is no need to write ltbr gt just ltbrgt will do same with other so called empty elements likethe ltimggt and ltmetagt element
Media Type
HTML documents should be served with the texthtml media type Some very old mobile Web browsers (the same oneswe mentioned above and decided to ignore) may require you to use the more XHTML-friendly applicationxhtml+xmlmedia type but this should be viewed as exceptions to the rule (and has too much disadvantages)
Type attribute
In XHTML we write link and script elements like this
ltlink href=screencss rel=stylesheet type=textcss gtltscript src=functionsphp type=textjavascriptgtltscriptgt
In HTML5 you can leave out the type attribute
ltlink href=screencss rel=stylesheetgtltscript src=functionsphpgtltscriptgt
Resources and References
Since this course is not about HTML5 (we have a course that dives deep into the subject) you can find some links belowthat can help you further on this subject And if you know some nice CSS-based layout tutorials or resources feel free to postthe relevant links to the forum to enrich this course and help your course-mates
The services of HTML5 Boilerplate and Modernizr can be of great help but only use it when you need it and what you needof it For the assignments in this course we prefer you to experience how far you can come without the use of
either one
And in case it is new for you in the links below you will find a tutorial that may help you further with HTML5 Boilerplate
Start
Yes You Can Use HTML5 Today
5 Reasons Why You Can Use HTML5 TodayBuilding Web Pages With HTML5HTML5 Content Model
List of HTML elements from W3CBeginnersHTML FAQs
Semantics
Semantic Code Importance amp Relevancy to SEO
Semantics and sensibility
Semantic HTML and Search Engine OptimizationHTML5 Structural Sementical ElementsCreating Semantic Structure (for legacy browsers)
Links about the HTML5 Document Outlining Algorithm
w3corg about headings and sections
httpsdevelopermozillaorghttpcodingsmashingmagazinecom
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 819
5 HTML5
Document Type
The doctype declaration appears at the beginning of the document and basically tells parsers and validators that the documentis an HTML document and should be treated as such With simply the HTML5 DocType your web page will be backwards
compatible with the older browsers The HTML5 doctype is to be written as
ltDOCTYPE htmlgt
Structural Semantical Elements
If you dont use them already then start today the structural semantical HTML5 elements like header nav main sectionarticle aside footer and more Remy Sharps HTML5 shim makes these elements work in older browsers includingIE6 A solid alternative with no need for javascript is adding extra div elements as container for or nested in the HTML5
elements and style the divs instead of the HTML5 elements
And better safe than sorry good to set display block for the semantical HTML5 elements in CSS to cover the older
browser versions that dont have this by default set
Even though HTML5 is still evolving and is not a done deal as of today the main parts are stable and HTML5 is backwardcompatible with previous versions of (X)HTML in any case Besides there is no doubt that upcoming versions of mobile Web
browsers will support more and more features of HTML5
Beware though new functionalities introduced in HTML5 (such as the ltvideogt and ltaudiogt tags) are not available in all
mobile Web browsers yet This yields the question what can you take for granted when you also want to take mobile devicesinto account
So how should we proceed Progressive enhancement (see the book in this lecture named with this title) The right
approach with progressive enhancement will make sure that the other HTML5 features are extra that the web page doesnot depend on it so that when a browser does not support these features the web page will still work and the content is stillaccessible
Sectioning Elements
The following HTML5 elements are sectioning elements nav section article aside what means they markup theircontent as sections As you will read below not headings but sectioning elements are responsible for the document outlines inHTML5
Headings
With the new HTML5 Document Outlining Algorithm a correct use of headings needs some extra attention
This is how it was before HTML5
Use headings and paragraphs and donrsquot jump from H1 to H4Use preferably just one H1 per page (in favor of legacy screen readers) and use that one as heading for the maincontent (so it will differ per page)
See Creating Semantic Structure to understand the basic correct ranking of headings for legacy browsers
HTML5 is much more flexible on the subject of headings as you can read on the W3C site
The difference is that modern browsers that support the HTML5 Document Outlining Algorithm use the sectioning elements(nav section article aside) for the document outlines The first heading inside the sectioning element will be used as
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 919
the title of that element
The first heading in the body that is not nested in a sectioning element will be used as document title (ie title for the body) nomatter where it will be placed in the HTML ie this can even be on the last line of the body Since a header (or a footer)
are not sectioning elements a heading nested in a header (or footer) can serve duty as document title
Good reads on this subject can be found at
httpsdevelopermozillaorghttpcodingsmashingmagazinecomhttphtml5doctorcomoutlines
Still it is highly recommended to use the appropriate rank of the sections nesting level for the headings in favor oflegacy browsers In practice this means that if the section is on a 2nd or 3d level in the outlines it is recommended to use a
corresponding H2 or H3 This way the document structure will be backwards compatible for the legacy browsers that dontsupport the HTML5 document outlines algorithm ie dont recognize sectioning elements as outlines More about this in thisarticle on the Paciello Group Blog
Main
The main element is relatively new in HTML5 and marks the main content of a web page It can only be used once per page
and is not a sectioning element ie it does not affect the document outlines
This leads to the conclusion that main should not be used to markup asection or an article since this will lead to a missing
outline The main element is meant to group principally sectioning elements
Syntax
HTML5 is more than a definition of available elements attributes and scripting interfaces It also defines the syntax that youcan use to write your documents HTML5 defines two possible syntaxes for the price of one the HTML syntax and the
XHTML syntax The HTML syntax is lax in that it allows many omissions in the resulting document For instance thefollowing is valid according to the HTML syntax
ltp id=p1gtSome text in a paragraph ltBRgt
A second line
ltPgtSome more text in another paragraph
The XHTML syntax is much stricter forcing you to be explicit about things and to use strictly defined separators The sameexample as above would be written in XHTML as
ltp id=p1gtSome text in a paragraph ltbr gt
A second lineltpgt
ltpgtSome more text in another paragraphltpgt
Theoretically there may be some older mobile Web browsers (eg on feature phones) active that may require that you respectXML rules more thoroughly Since they are a true minority we decide to ignore them Modern mobile Web browsers willparse content that follows the HTML syntax correctly The result is that we dont see the need of writing XHTML syntax in
HTML5
Nevertheless we advise to make sure that your content will work on the vast majority of devices to stick to just some basic
main rules of XHTML
use lower case element and attribute namesenclose attribute values in double quotation marks
close elements
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1019
Thats all Apart from that there is no need to write ltbr gt just ltbrgt will do same with other so called empty elements likethe ltimggt and ltmetagt element
Media Type
HTML documents should be served with the texthtml media type Some very old mobile Web browsers (the same oneswe mentioned above and decided to ignore) may require you to use the more XHTML-friendly applicationxhtml+xmlmedia type but this should be viewed as exceptions to the rule (and has too much disadvantages)
Type attribute
In XHTML we write link and script elements like this
ltlink href=screencss rel=stylesheet type=textcss gtltscript src=functionsphp type=textjavascriptgtltscriptgt
In HTML5 you can leave out the type attribute
ltlink href=screencss rel=stylesheetgtltscript src=functionsphpgtltscriptgt
Resources and References
Since this course is not about HTML5 (we have a course that dives deep into the subject) you can find some links belowthat can help you further on this subject And if you know some nice CSS-based layout tutorials or resources feel free to postthe relevant links to the forum to enrich this course and help your course-mates
The services of HTML5 Boilerplate and Modernizr can be of great help but only use it when you need it and what you needof it For the assignments in this course we prefer you to experience how far you can come without the use of
either one
And in case it is new for you in the links below you will find a tutorial that may help you further with HTML5 Boilerplate
Start
Yes You Can Use HTML5 Today
5 Reasons Why You Can Use HTML5 TodayBuilding Web Pages With HTML5HTML5 Content Model
List of HTML elements from W3CBeginnersHTML FAQs
Semantics
Semantic Code Importance amp Relevancy to SEO
Semantics and sensibility
Semantic HTML and Search Engine OptimizationHTML5 Structural Sementical ElementsCreating Semantic Structure (for legacy browsers)
Links about the HTML5 Document Outlining Algorithm
w3corg about headings and sections
httpsdevelopermozillaorghttpcodingsmashingmagazinecom
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 919
the title of that element
The first heading in the body that is not nested in a sectioning element will be used as document title (ie title for the body) nomatter where it will be placed in the HTML ie this can even be on the last line of the body Since a header (or a footer)
are not sectioning elements a heading nested in a header (or footer) can serve duty as document title
Good reads on this subject can be found at
httpsdevelopermozillaorghttpcodingsmashingmagazinecomhttphtml5doctorcomoutlines
Still it is highly recommended to use the appropriate rank of the sections nesting level for the headings in favor oflegacy browsers In practice this means that if the section is on a 2nd or 3d level in the outlines it is recommended to use a
corresponding H2 or H3 This way the document structure will be backwards compatible for the legacy browsers that dontsupport the HTML5 document outlines algorithm ie dont recognize sectioning elements as outlines More about this in thisarticle on the Paciello Group Blog
Main
The main element is relatively new in HTML5 and marks the main content of a web page It can only be used once per page
and is not a sectioning element ie it does not affect the document outlines
This leads to the conclusion that main should not be used to markup asection or an article since this will lead to a missing
outline The main element is meant to group principally sectioning elements
Syntax
HTML5 is more than a definition of available elements attributes and scripting interfaces It also defines the syntax that youcan use to write your documents HTML5 defines two possible syntaxes for the price of one the HTML syntax and the
XHTML syntax The HTML syntax is lax in that it allows many omissions in the resulting document For instance thefollowing is valid according to the HTML syntax
ltp id=p1gtSome text in a paragraph ltBRgt
A second line
ltPgtSome more text in another paragraph
The XHTML syntax is much stricter forcing you to be explicit about things and to use strictly defined separators The sameexample as above would be written in XHTML as
ltp id=p1gtSome text in a paragraph ltbr gt
A second lineltpgt
ltpgtSome more text in another paragraphltpgt
Theoretically there may be some older mobile Web browsers (eg on feature phones) active that may require that you respectXML rules more thoroughly Since they are a true minority we decide to ignore them Modern mobile Web browsers willparse content that follows the HTML syntax correctly The result is that we dont see the need of writing XHTML syntax in
HTML5
Nevertheless we advise to make sure that your content will work on the vast majority of devices to stick to just some basic
main rules of XHTML
use lower case element and attribute namesenclose attribute values in double quotation marks
close elements
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1019
Thats all Apart from that there is no need to write ltbr gt just ltbrgt will do same with other so called empty elements likethe ltimggt and ltmetagt element
Media Type
HTML documents should be served with the texthtml media type Some very old mobile Web browsers (the same oneswe mentioned above and decided to ignore) may require you to use the more XHTML-friendly applicationxhtml+xmlmedia type but this should be viewed as exceptions to the rule (and has too much disadvantages)
Type attribute
In XHTML we write link and script elements like this
ltlink href=screencss rel=stylesheet type=textcss gtltscript src=functionsphp type=textjavascriptgtltscriptgt
In HTML5 you can leave out the type attribute
ltlink href=screencss rel=stylesheetgtltscript src=functionsphpgtltscriptgt
Resources and References
Since this course is not about HTML5 (we have a course that dives deep into the subject) you can find some links belowthat can help you further on this subject And if you know some nice CSS-based layout tutorials or resources feel free to postthe relevant links to the forum to enrich this course and help your course-mates
The services of HTML5 Boilerplate and Modernizr can be of great help but only use it when you need it and what you needof it For the assignments in this course we prefer you to experience how far you can come without the use of
either one
And in case it is new for you in the links below you will find a tutorial that may help you further with HTML5 Boilerplate
Start
Yes You Can Use HTML5 Today
5 Reasons Why You Can Use HTML5 TodayBuilding Web Pages With HTML5HTML5 Content Model
List of HTML elements from W3CBeginnersHTML FAQs
Semantics
Semantic Code Importance amp Relevancy to SEO
Semantics and sensibility
Semantic HTML and Search Engine OptimizationHTML5 Structural Sementical ElementsCreating Semantic Structure (for legacy browsers)
Links about the HTML5 Document Outlining Algorithm
w3corg about headings and sections
httpsdevelopermozillaorghttpcodingsmashingmagazinecom
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1019
Thats all Apart from that there is no need to write ltbr gt just ltbrgt will do same with other so called empty elements likethe ltimggt and ltmetagt element
Media Type
HTML documents should be served with the texthtml media type Some very old mobile Web browsers (the same oneswe mentioned above and decided to ignore) may require you to use the more XHTML-friendly applicationxhtml+xmlmedia type but this should be viewed as exceptions to the rule (and has too much disadvantages)
Type attribute
In XHTML we write link and script elements like this
ltlink href=screencss rel=stylesheet type=textcss gtltscript src=functionsphp type=textjavascriptgtltscriptgt
In HTML5 you can leave out the type attribute
ltlink href=screencss rel=stylesheetgtltscript src=functionsphpgtltscriptgt
Resources and References
Since this course is not about HTML5 (we have a course that dives deep into the subject) you can find some links belowthat can help you further on this subject And if you know some nice CSS-based layout tutorials or resources feel free to postthe relevant links to the forum to enrich this course and help your course-mates
The services of HTML5 Boilerplate and Modernizr can be of great help but only use it when you need it and what you needof it For the assignments in this course we prefer you to experience how far you can come without the use of
either one
And in case it is new for you in the links below you will find a tutorial that may help you further with HTML5 Boilerplate
Start
Yes You Can Use HTML5 Today
5 Reasons Why You Can Use HTML5 TodayBuilding Web Pages With HTML5HTML5 Content Model
List of HTML elements from W3CBeginnersHTML FAQs
Semantics
Semantic Code Importance amp Relevancy to SEO
Semantics and sensibility
Semantic HTML and Search Engine OptimizationHTML5 Structural Sementical ElementsCreating Semantic Structure (for legacy browsers)
Links about the HTML5 Document Outlining Algorithm
w3corg about headings and sections
httpsdevelopermozillaorghttpcodingsmashingmagazinecom
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1119
httphtml5doctorcomoutlines
Forms
Learning to love forms by A GustafsonA Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
Slides about HTML5 FormsHTML5 Form Features
Resources
HTML5 ShivHTML5 RocksHTML5 Doctor
Accessibility
The HTML5 structural elements are an enormous improvement and they do have an overlap with some ARIA landmark rolesfor assistive technologies (like screen readers) but not all landmark roles have equivalents in HTML5 yet This means that forthe time being you benefit users that depend on assistive technologies by adding (landmark) role attributes to your code For
this reason you will be expected to make use of the role attribute in your assignments
WAI-ARIA landmark rolesSample file with landmark roles
Browser Support
html5accessibilitycomTest your browser
Can I UseQuirksMode
Miscellaneous
Lesser Known Semantical Elements
HTML5 Shiv and Serving Content From Code RepositoriesHTML Form BasicsVarious Articles from Smashing Magazine
Projects
HTML5 BoilerplateModernizr
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1219
6 CSS3
Levels and Layers of CSS
Separation of content and style is a fundamental principle of good Web design and is even more critical when developingcontent for presentations on different screen sizes
CSS does not have standard versions but works with levels every level is the base for the next level CSS Level 2 continues
where CSS Level 1 stops and CSS3 continues on both underlying levels Perfect for the approach of progressive
enhancement So basically if you ensure yourself that the content is well presented with styles form CSS Level 2 and addCSS3 on top of that to enhance the presentation - you will be fine
Onliest lack in this approach is that you cannot rely on the support on all mobile devices of certain styles from CSS Level 2like display position float and even table This will be mostly the case on (older) devices with such small screens that -as long
as you use them thoughtful- nobody will really miss their styling An of course you can expect these styles to work on smart
phones
Resources and References
This is not a course on CSS mdash there are many resources available to help you learn this critical technologymdash but we will look
at some aspects in this course as they relate to responsive design Below you find links that may be helpful if it is new for you
It is not that you need to read it all all you need for this course is some basic understanding of CSS3 It may be good to knowwhere to find more when you need it
Generators
CSS3 Generator
Background Gradient Generator
CSS3 References
CSS3 Tutorial
css3info
Sitepoint CSS ReferenceWikibooks
Browser Support
When can I Use
Quirks Mode
CSS3 Tutorials
Background Images
Multiple Backgrounds
Rounded CornersCSS Animations
CSS Transitions
Form with HTML5 and CSS3
Vendor PrefixesSafari Developer Centre
Advanced Selectors
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1319
Stephen Bradley - How To Use Structural Pseudo Classes and Pseudo Element SelectorsSitepoint - nth-child(N) |
Sitepoint - Understanding nth-child Pseudo-class Expressions
CSS Tricks - How nth-child Works
Tutorials - Additional
targetStickies
CSS3 SVG Canvas amp WebGL Animations
Selection of Articles from Smashing Magazine
The following articles with lots of practical information and inspiration can also be found bundled in the CSS Essentials ebook
available at the Smashing Magazine Webshop
Start Using CSS3 Today by Vitaly Friedman
Connecting The Dots With CSS3 by Trent Walton
Create a Poaroid Image Gallery by ZurbSliding Vinyl Albums With CSS Gradients by Zurb
Sweet Overlays With Border-Image by Zurb
CSS 3D Transforms by Peter GasstonHow to use CSS3 Pseudo-Classes by Richard Sepherd
The Guide to CSS Animation Principles And Examples by Tom Waterhouse
Using CSS3 Older Browser And Common Considerations
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1419
7 Tables
As Web professionals fully realize tables should not be used for layout But theres more to it than that Mobile presentsadditional reasons that should make you wary of using tables unless you have a very specific reason for doing sohellip and the
chances are you dont Many data in tables can just as good (or even better) be placed in a list
At the beginning of the Web HTML was a very simple markup language with little focus on design or rendering Aligning text
and images or different fields of a form was not possible In order to make more attractive pages and Web sites somedesigners quickly found some workarounds and hijacked some of the features of the language to make cool design Using
tables for layout is one of the most well-known examples of these techniques
Tabular Data
Originally and fairly obviously tables were introduced to display tabular data but then with the ability to remove the border
(border=0) it became a virtual grid upon which designers could lay out images and text But even today designers abusetables like for image galleries or forms
As said and it cannot be repeated often enough tables are meant for tabular data But what exactly are tabular data
Any information that is likely to be placed in a spreadsheet is almost certainly tabular data Data that need header fields at the top of columns plus at the left of rows are tabular and need a table
Alternatives
As the W3C site explains
the table element represents data with more than one dimension in the form of a table
One way of looking at the data you are about to place in a table could be to check if they can be rather presented in a linear
fashion Description lists (before HTML5 named as definition lists) are just one way you might use to do so The main
alternatives for description lists are ordered ol and unordered lists ul (list tutorial)
A simple rule of thumb is that if the table contains empty cells there is a fair chance that the data may just as good (or even
better) be presented in a linear fashion
In the last week of this course when responsive tables are part of the subject you will realize how tables cause extensive
scrolling on small viewports This only supports the theory that tables should be avoided to the extreme
Activity
If you have an example of a table that you have used in your own work think about how you might present the same
information in a linear fashion If you dont have an example to hand think about how you might present any of the
following without using a table
A travel itinerarySports results
A calendar
This is not an assignment were not asking you to actually create the presentation but please post ideas on how you would do
so to the discussion forum
Are Tables Ever Justified
Yes There are some types of data that cannot sensibly be presented any other way but you should try hard to avoid tableswith lots of columns if they can be avoided especially when older devices in mind
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1519
An example where tables would be appropriate is something like a drug-dispensing dosage chart where both the type of drugand the time of day are variables that affect a third factor the dosage to be given
Bottom-line when the content really is tabular data it semantically should be marked up as table
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1619
8 Forms
While we all are very well aware that tables are not meant to be used for layout is this awareness suddenly disappearedconsidering forms
Yes a table is an easy and solid way to position the label and the input field inline But (1) form elements are no tabular data(2) we are not supposed to use HTML for design and (3) it is so much harder to position the label and the input field in a
linear layout on a small viewport when they are in a table
Content First
Since we have enough options in CSS to position anything anywhere (even in any viewport width as we will see later in thiscourse) we are free to concentrate on the HTML and semantics first The following basic HTML may be well-known but for
those who are not familiar with it it is too important to leave out Plus that the following HTML directions offer you good
means to address your styles to
It has become general use to sort the form controls in either a list or in paragraphs When we look at the form as a list
of form rules this seems semantical the best choice In that case place each label + input (or textarea and others) in a listitem
Make use of the label element in combination with the for attribute to make semantically clear to what form element
the label belongs
Like so
ltgtltligt ltlabel for=emailgtEmail Addressltlabelgt ltinput name=email id=email type=textgtltligtltgt
The li elements can be helpful later for the CSS Though if you choose them for that reason only div elements would be
the better choice
You always have the option to group parts of the form with fieldset elements in combination with a legend elementThe fieldset element will automatically result in a border around its content but you can easily change that with CSS
Accessibility
Apart from the label element we dispose of the aria-labelledby attribute as part of the WAI-ARIA the Accessible Rich
Internet Applications Suite that defines a way to make Web content and Web applications more accessible to peoplewith disabilities It especially helps with dynamic content and advanced user interface controls developed with Ajax
HTML JavaScript and related technologies You can read more about the aria-labelledby attribute in this Wiki page
from the working group The aria-labelledby attribute can be used as progressive enhancement of the label element andshould not replace it since it is not supported by legacy browsers and screen readers
As you can read in this article in the section about Optimal Positioning Of Form Field Labels the ideal position for a form labelis before the input field or textarea
Landmark Roles
There are 2 role attributes relevant for forms role=form and role=search
Since landmark roles provide navigation features for users with screen readers and helps them to understand the contentstructure the form role attribute may be preferably placed in the form element and the search role attribute in the element that
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1719
contains the search controls but what element suits their purpose best depends on the HTML structure
In case you missed the information about landmark roles in the former books best to read this article from the Paciello
Group and study this sample where you can easily see how the landmark roles are used
HTML5
There are several new form attributes and values in HTML5 The placeholder attribute for input and textarea elements is
one
ltinput name=email type=text placeholder=Place your email address heregt
The required attribute on the input select and textarea elements indicates that a value must be supplied
ltinput name=email type=text required placeholder=Place your email address heregt
With the autofocus attribute it is possible to specify that a form control should have input focus when the page loads It canbe applied to input button select and textarea and just to one object per document
ltinput name=email type=text required autofocus placeholder=Place your email address heregt
The type attribute has new values for the input element search tel url email result in automatically stripping of linebreaks andor whitespaces For the tel attribute on mobile the numerical keyboard should automatic appear
ltinput name=email type=email required autofocus placeholder=Place your email address heregt
Read more about forms at
Learning to love forms by Aaron Gustafson
A Form of Madness Chapter 9 of Mark Pilgrims Dive Into HTML5
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1819
9 Dos and donts
Best Practices
These general dos and donts are here to help you get into good habits and can be used as checklist for the first assignment ofthis course If you follow the various guidelines your code will be much more robust and efficient is more likely to work
cross-browser and give confidence to other professionals that you really know what youre doing If youre already familiar
with a lot of the ideas here so much the better but its worth at least a quick read through to make sure
HTML
Use a validator to check your code (for instance the W3C Validator)
Choose your doctype preferably HTML5Donrsquot forget to add the charset meta tag for HTML5 (versus the content-type meta tag together with the UTF-8
charset in XHTML)
Keep the head section small and clean dont stuff it with redundant informationWrite your HTML5 code according the following XHTML rules lower case for element names and attributes enclose
attribute values in double quotation marks and close the elements
Do not use empty elements spacer images break tags and non-breaking spaces to create white space for layout
purposes layout needs to be done in CSSAvoid inline styles (ie style attributes on HTML elements)
Do not include any design attributes in your markup (HTML) such as the now depreacted center and font elements
Open external links by default in the same window (ie dont use the target attribute on hyperlinks) allow the user todecide if the external link should be openened in a new window And if you really cannot resist to open the external link
in a new window make this clear to the user beforehand
Use HTML5 CSS3 and javascript according the approach of progressive enhancementPlace scripts in an external file for ease of maintenance and re-use actually dont use any javascript at all inside the
HTML
Place preferable all javascript in just one external file with a link to it on the last line in the bodyNo JavaScript pop-ups
Semantics
Use HTML5 structural semantical elements like headernav main section article aside footer etc and
dont forget to add the HTML5 shim or an other solution to solve the fact that IE8 and lower dont support these
elements Avoid untitled sections (check the document outlines in the browser) and use headings in the recommended way
(see the HTML5 book in this lecture for more)
Make use of the role attribute to benefit screen readersUse tables for tabular data only never for forms and other layout purposes
Use a list for the menu (see List Tutoral for more)
Use label elements for forms (see Use the label element to make your HTML forms accessible for more)
Use em and strong only to (sporadically) emphasize text otherwise use i and b to mark it as offset or use CSS tomake text italic or bold
CSS
Use relative sizes for text or em
For reasons of flexibility use CSS for uppercase text dont write text in uppercase in HTML (of course this does not
count for capitalized text)
Be aware that display none will also hide the content for screen readers So if you first place a heading for thebenefit of screen readers and next hide it with display none this will not be very productive Better use another
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug
2732014 Preliminary Material Coding for the Web
httpclassroomw3devcampuscommodbooktoolprintindexphpid=1581 1919
technique like described in this article from Zeldman
For the benefit of all people that use the tab key for navigation make a (good) habit of always styling afocus Thismeans to define an afocus variant for each ahover selectors like this ahover afocus aactive
Layout
A good starting point is always to keep it simple stay as close to the flow of the page as you can only generate HTML and
CSS that is really needed and avoid an overkill of divs
Use an external stylesheet for all CSS
Let the content generate the height of the site donrsquot set a fixed height
Start with the flow of the web page next use float and only use position if float cannot do the job in this orderUse relative sizes for layout or em
Donrsquot rely on javascript (donrsquot use it for links and buttons) just use it to add extra functionality that can be missed if JS
is disabled (according the principles of Progressive Enhancement)
Developer Tools
There are several good developer tools available that offer you indispensable help like Chris Pedericks Web Developer Tool
and Firebug for Firefox Chrome and Safari have native developer tools in Safari you need to activate them by turning on the
Developer menu in Safari Preferences If you dont use them yet they are worth checking out
Summary of the Links Mentioned Above
W3C Validator
HTML5 shim (and maybe you should read this article too)
Landmark Roles
List Tutoral
Use the label element to make your HTML forms accessible
Tab key navigation sample
Web Developer Tool Bar
Firebug