ux design - engageengage.ug/engage.nsf/pages/2012_slides_a/$file/blug-css3... · 2018-10-07 · ux...
TRANSCRIPT
![Page 1: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/1.jpg)
UX Design how CSS3 and HTML5 can help
Steve Mc Donagh
Tuesday, 27 March 12
![Page 2: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/2.jpg)
Who is Steve McDonagh?Maths NerdWannabe Rock StarRegistered Nurse25+ Years in as an IBM Midrange IT Geek15 years almost exclusively in the Lotus PortfolioPast President of my local Art Society Underground Comic ArtistPainter
Tuesday, 27 March 12
![Page 3: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/3.jpg)
So you probably have no reason to listen to me ........
other than I sort ofknow what I am doing
Tuesday, 27 March 12
![Page 4: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/4.jpg)
Design isthinking made visual”
“
Saul Bass1920 - 1996
Tuesday, 27 March 12
![Page 5: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/5.jpg)
“To design is to devise. It is a process and a way of thinking.”
A design is the result of the process of designing. As a people-centred, problem-solving process, design is a strategic tool, and a way to address challenges
facing both public and private organisations.
Tuesday, 27 March 12
![Page 6: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/6.jpg)
Design matters!Tuesday, 27 March 12
![Page 7: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/7.jpg)
so...are you just a developeror are you a designer?
Tuesday, 27 March 12
![Page 8: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/8.jpg)
Design PrincipalsBalanceRhythmProportionDominanceUnity
Tuesday, 27 March 12
![Page 9: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/9.jpg)
Balance
HorizontalVertical
andRadial
Symmetries balance well
Tuesday, 27 March 12
![Page 10: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/10.jpg)
Balance
Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights.
Tuesday, 27 March 12
![Page 11: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/11.jpg)
Rhythm
Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.
Tuesday, 27 March 12
![Page 12: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/12.jpg)
Rhythm
Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
Tuesday, 27 March 12
![Page 13: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/13.jpg)
Rhythm
Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.
Tuesday, 27 March 12
![Page 14: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/14.jpg)
Proportion
Every element exists in a relationship of scale between one element and another.
Notice how the smaller elements above seem to recede into the background while the larger elements come to the front.
Tuesday, 27 March 12
![Page 15: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/15.jpg)
Dominance
Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where and how the eye travels when looking at a design.
Tuesday, 27 March 12
![Page 16: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/16.jpg)
UnityThe brain will add in details you omitclosing the design without addition of other elements
The eyes will naturally follow dominant lines of perspective until something of a greater dominance catchs the attention
The brain will accept objects of a similar shape and colour as a group.Notice how much easier it is to group and define the shapes on the left
Tuesday, 27 March 12
![Page 17: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/17.jpg)
Design TipsContrast or oppositionPositive and negative spaceRule of ThirdsVisual CentreColour and typography
Tuesday, 27 March 12
![Page 18: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/18.jpg)
Contrast and OppositionElements within your design with either contrast or oppose each other. Learn to balance this to maximize the dynamic tension in your design.
Postive and negative spaceThe elements on your page are the positive space in your design the space that is left is the negative space. You need to achieve a balance between the two.
Visual CentreThe visual centre of your design is slightly above and to the right of the actual centre. This tends to be the natural placement of the viewer’s focus.
Tuesday, 27 March 12
![Page 19: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/19.jpg)
Question -Why does
Bill Buchanlook
normal?Tuesday, 27 March 12
![Page 20: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/20.jpg)
1
1.62
Tuesday, 27 March 12
![Page 21: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/21.jpg)
ΦIs everywhere!The rule of Thirds
Tuesday, 27 March 12
![Page 22: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/22.jpg)
Tuesday, 27 March 12
![Page 23: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/23.jpg)
Grids!
Grids!
Grids!Tuesday, 27 March 12
![Page 24: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/24.jpg)
ColorTuesday, 27 March 12
![Page 25: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/25.jpg)
http://colorschemedesigner.com/Tuesday, 27 March 12
![Page 26: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/26.jpg)
Colour Wheel
Complimentary
Split ComplimentaryAnalogus
Complimentary
Warm & Cold Split
Complementary colors are tricky to use in large doses, but work well when you want something to stand out.Complementary colors are really bad for text.
Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.
This color scheme has the s a m e s t r o n g v i s u a l c o n t r a s t a s t h e c o m p l e m e n t a r y c o l o r scheme, but has less tension.
The split-complimentary color scheme is often a good choice for beginners, because it is difficult to mess up.
Tuesday, 27 March 12
![Page 27: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/27.jpg)
Complimentary
Do not design for IE6!
Design from the content out
Semantics give meaning
The world is just one big list
Greyframe or Wireframe your ideas
Interactive prototypes rule
GET CREATIVE
Design Tips
Tuesday, 27 March 12
![Page 28: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/28.jpg)
Complimentary
“An appropriate design strategy allows every user to consume as much visual and interactive richness as their environment can support. This approach builds a rich experience on top of an accessible core, without compromising that core”
Nate Koechley
Tuesday, 27 March 12
![Page 29: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/29.jpg)
Complimentary
Look at your content (or what you content is going to be) and rather than force the content to behave inside the design. Let the content lead the design
Optimise you content order on any given page with an outline just like an author writing a book would.
Start by giving each of the elements of your project a semantic name.
You will find the content will soon starts to define its own structure
Tuesday, 27 March 12
![Page 30: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/30.jpg)
Complimentary
In markup, “semantics” means how that element describes the content it contains.
This list has no order
An ordered list of top selling items
A top-level heading
A comment from a happy customer
<UL> <OL> <H1> and <BLOCKQUOTE>
See the content as meaningful elements. Looking at naked data and moving outwards towards the design without that sudden dive in to presentational hacks to get it to work
Tuesday, 27 March 12
![Page 31: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/31.jpg)
Complimentary
The world is one big listEvery where you look in the real world there are lists, lot and lots of lists
There are 50+ HTML elements and only 3 types of list however strip away the style and you will find <UL>s <OL>s and <DL>s all over the place. In groups of links, in menus, in tabbed navigations and even in forms as an aid to layout input elements and their labels
Tuesday, 27 March 12
![Page 32: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/32.jpg)
Complimentary
Prototype !
Prototype !
Prototype !
Tuesday, 27 March 12
![Page 33: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/33.jpg)
ComplimentaryTuesday, 27 March 12
![Page 34: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/34.jpg)
ComplimentaryTuesday, 27 March 12
![Page 35: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/35.jpg)
Complimentary
Image free visual effects
Multiple-Column Layouts
Box Transformations
Unique Downloadable Fonts
Additional powerful selectors
Script free transitions and animations
New Media Queries
CSS3 - What’s New
Tuesday, 27 March 12
![Page 36: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/36.jpg)
ComplimentaryTuesday, 27 March 12
![Page 37: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/37.jpg)
ComplimentaryTuesday, 27 March 12
![Page 38: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/38.jpg)
ComplimentaryTuesday, 27 March 12
![Page 39: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/39.jpg)
ComplimentaryTuesday, 27 March 12
![Page 40: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/40.jpg)
ComplimentaryTuesday, 27 March 12
![Page 41: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/41.jpg)
ComplimentaryTuesday, 27 March 12
![Page 42: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/42.jpg)
ComplimentaryTuesday, 27 March 12
![Page 43: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/43.jpg)
ComplimentaryTuesday, 27 March 12
![Page 44: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/44.jpg)
ComplimentaryTuesday, 27 March 12
![Page 45: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/45.jpg)
ComplimentaryTuesday, 27 March 12
![Page 46: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/46.jpg)
ComplimentaryTuesday, 27 March 12
![Page 47: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/47.jpg)
Complimentary
Classes add bulk to your HTML
Markup may be controlled by a CMS or plugin
Your client may be in control of the content
You may not be allowed to touch the HTML
Classes can be time consuming
Attribute Selectors
Tuesday, 27 March 12
![Page 48: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/48.jpg)
Complimentary
img[alt] {border: 3px solid #0c0 }
Tuesday, 27 March 12
![Page 49: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/49.jpg)
Complimentary
CSS 2.1 Attribute selectorsCSS 2.1 Attribute selectors
[attr] Matches an element with the attr present regardless of its value
[attr=val] Matches and element whose attr is exactly VAL
[attr-=val] Matches an element whose ATTR is a list of space-separated list of words one of which is exactly VAL
[attr|=val] Matches an element whose ATTR is either exactly VAL or contains
VAL
Tuesday, 27 March 12
![Page 50: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/50.jpg)
Complimentary
CSS 3 New Attribute selectorsCSS 3 New Attribute selectors
[attr^=val] Matches an element where the ATTR starts with VAL
[attr$=val] Matches an element where the ATTR ends with VAL
[attr*=val] Matches and element where the ATTR contains VAL somewhere in the string
Tuesday, 27 March 12
![Page 51: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/51.jpg)
Complimentary
input:not([type=submit])
Don’t forget “NOT” Matching
Tuesday, 27 March 12
![Page 52: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/52.jpg)
Complimentary
*** TIP ***
If you get all confused about what a complex selector
will actually to try out this web resource
http://gallery.theopalgroup.com/selectoracle/
This will give you a plain English (or spanish) explanation of the your CSS code
Tuesday, 27 March 12
![Page 53: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/53.jpg)
Complimentary
The easy way of doing this in CSS
Tuesday, 27 March 12
![Page 54: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/54.jpg)
Complimentary
<ul><li><a href=‘files/MyPDF.pdf’>PDF Example</a>
</li><li><a href=‘files/MyDoc.doc’>DOC Example</a>
</l><li><a href=‘files/MyPPT.ppt’>PPT Example</a>
</li></ul>
Create the list
Tuesday, 27 March 12
![Page 55: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/55.jpg)
Complimentary
ul a {display:block;
min-height: 20px;
padding-left: 25px;
background-repeat: no-repeat;
background-position: 0px 3px;}
Style the list <A>’s to accept the images
Tuesday, 27 March 12
![Page 56: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/56.jpg)
Complimentary
a[href$=”.pdf”] {background-image: url(ico_pdf.png);}
a[href$=”.doc”] {background-image: url(ico_doc.png);}
a[href$=”.ppt”] {background-image: url(ico_ppt.png);}
Tuesday, 27 March 12
![Page 57: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/57.jpg)
Complimentary
You get greater control over element selection by combining selection criteria
a[href$=’.xls’][href*=‘dashboard’] { background-image: url(dash.png); }
Tuesday, 27 March 12
![Page 58: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/58.jpg)
Complimentary
http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js
Tuesday, 27 March 12
![Page 59: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/59.jpg)
Complimentary
Other use examplesStyle for languages using [lang=en]
Style for elements that have title set div[title]
Style for email links [href^=mailto]
Style for links to secure sites [href^=https]
Display images with the alt text as a captionimg[alt]:after { content: attr(alt) }
Tuesday, 27 March 12
![Page 60: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/60.jpg)
Complimentary
:root Always the root element of a document so always HTML
:nth-child() The nth child element of a parent starting from 1
:nth-last-child() The nth child element of a parent starting from the last upwards
:nth-of-type() The nth child element of a parent based on the type of the child
:nth-last-of-type() Same as nth-of-type except backwards
:first-child The first child of an element
:last-child The last child of an element
:first-of-type The first child of an element of a particular type
:last-of-type The last child of an element of a particular type
:only-child The only element of its type in the parent element
:empty Selects that have no children (or text) elements
New Structural Pseudo Classes
Tuesday, 27 March 12
![Page 61: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/61.jpg)
Complimentary
:nth-child() works by allowing you to select the child by its ordinal index
#MyList li:nth-child(5) - would select the 5th LI in the list with the ID MyList
alternately you can use a iterative expression based on an+b wherea = Cycle Sizen = is the counter starting at 0b = offset to start at
so #MyList li:nth-child(3n+1) will select
(3x0)+1 = 1 => First item(3x1)+1 = 4 => Fourth Item(3x2)+1 = 7 => Seventh Item(3x3)+1 =10 => Tenth Item
How the nth bit works
Tuesday, 27 March 12
![Page 62: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/62.jpg)
Complimentary
Alternating the styles of rows in a table is beloved of Notes Views and now can be styled with two lines of CSS using nth-child and two special keywords - odd and even#MyTable tr:nth-child(even) td {background-color: #00cc00; }#MyTable tr:nth-child(odd) td {background-color: #a9a9a9; }
Zebra Striping
You have a table and you have styled the left wall of each cell to have a border so what do you do with the right most cell that you want to have both?
#MyTable tr td:last-child {border-right: 1px solid #a9a9a9; }
Closing Structures
Tuesday, 27 March 12
![Page 63: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/63.jpg)
Complimentary
IE9 has support for these new pseudo classes all other IE’s do not
Use jQuery or MooTools or Dojo to get the same functionality.
Tuesday, 27 March 12
![Page 64: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/64.jpg)
Complimentary
<a href="#item1">item 1</a><a href="#item2">item 2</a><a href="#item3">item 3</a><a href="#default”> Default stuff</a>
<div class="items"> <p id="item1">... item 1...</p> <p id="item2">... item 2...</p> <p id="item3">...</p> <p id="default">....</p></div>
div.items p {display: none}div.items p:target {display: block}
:target
when an <a> link is clicked on the element being clicked becomes the :target element so using the above CSS the linked target element will appear
Tuesday, 27 March 12
![Page 65: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/65.jpg)
Complimentary
You can use media queries either directly in your CSS like this
@media screen and (max-width: 600px) { .class { background: #ccc; }}
Or you can jump to a separate external style sheet by using the query in the <head> section like this
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
@media Queries
Tuesday, 27 March 12
![Page 66: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/66.jpg)
Complimentary
width height device-width device-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolution scangrid
@media screen and (device-aspect-ratio: 16/9) AND {max-device-width: 320px)
They all have min- and max-
prefixes
Tuesday, 27 March 12
![Page 67: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/67.jpg)
Complimentary
HTML 5<!DOCTYPE html>
Tuesday, 27 March 12
![Page 68: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/68.jpg)
Complimentary
HTML5 is syntax compatible with both HTML4 and XHTML 1.0
HTML 5 syntax is served as text/html
HTML5 can use XML syntax (like XHTML 1.0)
Tuesday, 27 March 12
![Page 69: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/69.jpg)
Complimentary
The XHTML validator cared about uppercase/ lowercase, quotes around attributes and trailing
slashes.
In reality: the browsers never cared .... !
Tuesday, 27 March 12
![Page 70: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/70.jpg)
Complimentary
XHTML notationStill, I would personally advise you to use the
stricter XHTML notation, because of its consistency
Tuesday, 27 March 12
![Page 71: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/71.jpg)
<section>
★ The section element represents a generic section of a document or application.
★ A section, in this context, is a thematic grouping of content, typically with a heading.
ComplimentaryTuesday, 27 March 12
![Page 72: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/72.jpg)
Complimentary
<article>
★ a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication.
★ For example: a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, ...
Tuesday, 27 March 12
![Page 73: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/73.jpg)
Complimentary
<nav>
★ The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
★ Only sections that consist of major navigation blocks are appropriate for the nav element.
Tuesday, 27 March 12
![Page 74: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/74.jpg)
Complimentary
<aside>
★ Represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
★ Can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
Tuesday, 27 March 12
![Page 75: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/75.jpg)
Complimentary
<hgroup>
★ Represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
Tuesday, 27 March 12
![Page 76: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/76.jpg)
Complimentary
<header>
★ Represents a group of introductory or navigational aids.
★ Is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required.
★ Can also be used to wrap a section's table of contents, a search form, or any relevant logos.
Tuesday, 27 March 12
![Page 77: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/77.jpg)
Complimentary
<footer>
★ Represents a footer for its nearest ancestor sectioning content or sectioning root element.
★ Typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
★ Footers don’t necessarily have to appear at the end of a section, though they usually do.
Tuesday, 27 March 12
![Page 78: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/78.jpg)
Complimentary
<address>
★ Represents the contact information for its nearest article or body element ancestor.
★ Must not be used to represent arbitrary addresses (e.g. postal addresses), unless those are in fact the relevant contact information.
★ Typically, it would be included along with other information in a footer element.
Tuesday, 27 March 12
![Page 79: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/79.jpg)
Complimentary
<figure>
★ Represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
★ Can be used to annotate illustrations, diagrams, photos, code listings, etc, that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.
Tuesday, 27 March 12
![Page 80: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/80.jpg)
Complimentary
<figcaption>
★ Represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any.
Tuesday, 27 March 12
![Page 81: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/81.jpg)
Complimentary
<small>
★ The small element represents side comments such as small print.
★ Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
★ It is only intended for short runs of text.
Tuesday, 27 March 12
![Page 82: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/82.jpg)
Complimentary
<cite>
★ The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, etc).
★ This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.
★ A person’s name is not the title of a work and the element must therefore not be used to mark up people's names.
Tuesday, 27 March 12
![Page 83: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/83.jpg)
Complimentary
<q cite>
★ The q element represents some phrasing content quoted from another source.
★ Content inside must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.
Tuesday, 27 March 12
![Page 84: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/84.jpg)
Complimentary
<time datetime pubdate>
★ Represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
★ Way to encode modern dates and times in a machine-readable way
Tuesday, 27 March 12
![Page 85: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/85.jpg)
Complimentary
<time datetime pubdate>
★ The datetime attribute, if present, gives the date or time being specified. Otherwise, the date or time is given by the element's contents.
★ The pubdate attribute is a boolean attribute. If specified, it indicates that the date and time given by the element is the publication date and time of the nearest ancestor article element, or, if the element has no ancestor article element, of the document as a whole.
Tuesday, 27 March 12
![Page 86: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/86.jpg)
Complimentary
<time datetime="2007-10-05">October 5</time>
<p>I usually have a snack at <time>16:00</time>.</p>
<article> <h1>Small tasks</h1> <footer> Published <time pubdate>2009-08-30</time>. </footer> <p>I put a bike bell on his bike.</p></article>
Tuesday, 27 March 12
![Page 87: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/87.jpg)
Complimentary
<mark>
★ Represents a run of text in one document marked or highlighted for reference purposes.
★ Can for example be used to highlight words that match some search string.
Tuesday, 27 March 12
![Page 88: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/88.jpg)
<wbr>
★ Represents a line break opportunity.
<p>And so they sang: "RubyRubyRuby<wbr>Ruuubbbyyy"</p>
ComplimentaryTuesday, 27 March 12
![Page 89: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/89.jpg)
Complimentary
<canvas>
★ A resolution-dependent bitmap canvas
★ Basically a rectangle in your page where you can use JavaScript to draw anything you want.
★ Can be used for rendering graphs, game graphics or other visual elements on the fly.
★ Has two attributes: width and height
Tuesday, 27 March 12
![Page 90: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/90.jpg)
Complimentary
<video>
★ For embedding video into a webpage
★ One <video> element can link to multiple video files, and the browser will choose the first video it can actually play.
★ It is up to you to know which browsers support which containers and codecs.
Tuesday, 27 March 12
![Page 91: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/91.jpg)
Complimentary
<video>
★ There is no single combination of containers and codecs that works in all HTML5 browsers.
★ This is not likely to change in the near future.
★ To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.
Tuesday, 27 March 12
![Page 92: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/92.jpg)
<video>
<!-- Realistic example --><video width="320" height="240" controls> <source src="somefile.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" /> <source src="somefile.webm" type="video/webm; codecs='vp8, vorbis'" /> <source src="somefile.ogv" type="video/ogg; codes='theora, vorbis'" /> <!-- provide Flash player fallback here --></video>
★ The benefit of specifying the type attribute is that the browser will check it first.
★ If the browser decides it can’t play a particular video, it won’t download the file.
ComplimentaryTuesday, 27 March 12
![Page 93: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/93.jpg)
Complimentary
<input type=email>
★ Tells the browser not to submit the form, unless the user has entered a valid email address
★ multiple attribute is allowed, which means the field can be a list of comma-seperated valid email addresses
Tuesday, 27 March 12
![Page 94: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/94.jpg)
Complimentary
<input type=url>
★ Causes the browser to ensure that the entered field is a correct URL.
★ Browser may offer the user assistance and show a list of recently visited URLs.
Tuesday, 27 March 12
![Page 95: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/95.jpg)
Complimentary
<input type=date>
★ Dates were tricky for a user to enter and therefore we relied on JavaScript solutions for displaying a datepicker.
★ Browsers will display a (popup) calendar widget.
★ Browser will now also know what you mean. Previously, datepickers were just a collection of <div>s, <span>s, and links with lots of JavaScript behavior attached.
Tuesday, 27 March 12
![Page 96: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/96.jpg)
Complimentary
<!-- for calendar date pickers --><input type="date" />
<!-- for months --><input type="month" />
<!-- for weeks --><input type="week" />
<!-- for timestamps --><input type="time" />
<!-- for precise, absolute date/timestamps --><input type="datetime" />
<!-- for local dates and times --><input type="datetime-local" />
Tuesday, 27 March 12
![Page 97: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/97.jpg)
Complimentary
<input type=number>
★ Throws an error if the user doesn’t enter a numeric value.
★ Works with min, max and step attributes.
★ Browsers (such as Opera) can render it as a spinner control.
Tuesday, 27 March 12
![Page 98: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/98.jpg)
<input type=range>
★ Renders as a slider.
★ Used to be JavaScript driven elements, but now the responsability of creating accessibile sliders is moved from the developer to browser vendors.
ComplimentaryTuesday, 27 March 12
![Page 99: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/99.jpg)
Complimentary
<input type=search>
★ Expects a search term.
★ Attribute placeholder can be provided. This text will only display when the search field has no focus.
★ In Safari on Mac, it takes the default OS search box appearance. This can be overwritten:
input[type="search"] { -webkit-appearance: textfield; }
Tuesday, 27 March 12
![Page 100: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/100.jpg)
Complimentary
<input type=tel>
★ Expects a telephone number.
★ Doesn’t enforce numeric-only input.
★ As mobile phones “know” their own number, most of them might autocomplete this field.
★ The iPhone brings up a telephone input keyboard.
Tuesday, 27 March 12
![Page 101: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/101.jpg)
Complimentary
<input type=color>
★ Allows the user to input a color value via a picker.
★ Current support is very limited.
Tuesday, 27 March 12
![Page 102: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/102.jpg)
Complimentary
The list attribute
★ Hooks up with a new element <datalist>
★ Reminiscent of a select box, but user can input own values, if they don’t want to choose one on the predefined options.
★ The id of the <datalist> is referenced in the vaue of the list attribute.
★ It’s possible to dynamically repopulate the options as the user types and thus recreating a Google Suggest functionality.
Tuesday, 27 March 12
![Page 103: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/103.jpg)
Complimentary
The list attribute
<input id="salutation" type="text" list="salutations">
<datalist id="salutations"> <option label="Mr" value="Mr"> <option label="Ms" value="Ms"> <option label="Prof" value="Professor"></datalist>
Tuesday, 27 March 12
![Page 104: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/104.jpg)
Complimentary
<!-- placeholder attribute --><input type="search" placeholder="Zoeken..." />
<!-- required attribute --><input type="email" required />
<!-- multiple attribute (for multiple uploads or email addresses) --><input type="file" multiple />
<!-- pattern attribute (match input to custom regular expression) --><!-- you can include a hint: placeholder="9AAA" --><input pattern="[0-9][A-Z]{3}" title="A digit follow by three uppercase letters" />
Tuesday, 27 March 12
![Page 105: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/105.jpg)
Complimentary
Using HTML5
★ ModernizrModernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
★ HTML5 BoilerplateA rock-solid default for HTML5 awesome.
http://www.modernizr.com/
http://html5boilerplate.com/
Tuesday, 27 March 12
![Page 106: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/106.jpg)
Complimentary
Thanks for Listening!(I believe there is free beer next)
Twitter: @dominoyesmaybeEmail: [email protected]
Tuesday, 27 March 12
![Page 107: UX Design - Engageengage.ug/engage.nsf/pages/2012_Slides_a/$file/Blug-CSS3... · 2018-10-07 · UX Design how CSS3 and HTML5 can help Steve Mc Donagh Tuesday, 27 March 12](https://reader033.vdocuments.us/reader033/viewer/2022050115/5f4c1de941be1d024c017dd9/html5/thumbnails/107.jpg)
Complimentary
Thanks for Listening!(I believe there is free beer next)
Twitter: @dominoyesmaybeEmail: [email protected]
Tuesday, 27 March 12