2 Thinking in CSS How to Build Great Looking Sites.
-
date post
19-Dec-2015 -
Category
Documents
-
view
216 -
download
0
Transcript of 2 Thinking in CSS How to Build Great Looking Sites.
![Page 1: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/1.jpg)
![Page 2: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/2.jpg)
Thinking in CSS
How to Build Great Looking Sites
![Page 3: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/3.jpg)
Why Bother?
Standards are the key to free and open communication
Look deeper: standards drive everything online
Better standards support is driving Ajax and Web 2.0 style Web applications
Plus: big, big savings!
![Page 4: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/4.jpg)
Technically Speaking…
The W3C creates specifications & recommendations, not standards
Only a few W3C technologies are actually standardized via ISO & IETF processes
What we refer to as “web standards” are de facto standards
![Page 5: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/5.jpg)
The Cornerstones
So what standards are important?
(X)HTML, XML, CSS, ECMAscript, DOM
Also GIF, JPG, PNG, MP3…
Photo credit: http://flickr.com/photos/zerega/204055320/
![Page 6: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/6.jpg)
Out of the Sixties…
The web’s roots go back 40 years!
HTML came from SGML
SGML also was the parent of XML, which brought XHTML
![Page 7: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/7.jpg)
7
Tables Became the Way to Layout
They were really developed to display data, not design
But then: border=“0”
Grid system for element placement
Designers were able to use the table grid for design
The days of “slice n’ dice” nested table layouts began
![Page 8: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/8.jpg)
Difficult Tools
A broken web was prolonged by site-building tools
Dreamweaver, GoLive, FrontPage, et al made things worse by trying to make things easier
Today’s tools are far more standards aware - Expression, Visual Studio all contain standards-oriented tools
Photo credit: http://flickr.com/photos/doeth/255053686/
![Page 9: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/9.jpg)
9
Enter CSS
CSS 1.0 was published in 1996
IE 3.0 had the first strong implementation of CSS 1
CSS 2.0 was published in 1998
CSS became widely used for fonts and colors
CSS for layout has emerged slowly despite its benefits
![Page 10: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/10.jpg)
Benefits of Standards
Why we care . . .
![Page 11: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/11.jpg)
11
Design Flexibility
More flexible options for imagery
Better typographic control
Flexible and useful layout options
Print options
Alternate device design options via “handheld” and other available media support
![Page 12: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/12.jpg)
12
Easier Site Maintenance
One style sheet, infinite pages
Design changes can be implemented very quickly
With a well structured HTML or XHTML document and CSS, refreshes and redesigns are far easier
![Page 13: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/13.jpg)
13
Better Technical Performance
External style sheets are cached by the browser
Use of intelligent markup and best practices can reduce file sizes to 50% or less than those using presentational HTML, inline and/or embedded scripts and style
This allows documents to load more quickly
The user has a more seamless, improved experience
![Page 14: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/14.jpg)
14
Return on Investment (ROI)
Semantic documents are smaller in size
Delivery of smaller documents and the caching factor of external style sheets demands far less from servers
Well optimized sites result in reduced HTTP requests
Well optimized sites also result in significant reduction of bandwidth
This can turn into real dollar savings, particularly for highly trafficked web sites
![Page 15: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/15.jpg)
15
Standards in the Workflow
Meaningful markup +
CSS for visual wireframing +
Scripting and interactive media =
Interactive prototypes
Interactive prototypes provide shorter development cycles, reduced stress on designers and developers, and improved ability to demonstrate to clients how sites will actually work
![Page 16: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/16.jpg)
Critical Knowledge Areas
Avoiding Pitfalls When Using Standards
![Page 17: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/17.jpg)
17
Technology for Design - Challenges with CSS Adoption
CSS is a technical and complex language
It was written by technologists, not designers
Terminology in CSS is different than design terminology
No true visual tools for CSS layout
High learning curve
Implementation in browsers/user agents has been an ugly, complex, problematic (insert your feelings here) mess!
![Page 18: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/18.jpg)
18
Meaningful Markup: Structure & Semantics
Effective CSS is an integrated rather than separated technology
Must be applied to documents that are semantic (meaningful)
Must be applied to properly structured documents
Must be applied according to best practices
![Page 19: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/19.jpg)
19
The Holy Trinity of CSS: Cascade, Inheritance, Specificity
Understand the rules of the Cascade
Understand Inheritance (based on the document tree)
Understand the specificity algorithm
![Page 20: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/20.jpg)
The Cascade: Application hierarchy in CSS
The cascade determines how CSS is applied:
By type of style sheet Inline Embedded Linked
By source order
![Page 21: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/21.jpg)
Document tree
![Page 22: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/22.jpg)
CSS2 and CSS2.1 specificity clarified
http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified
The final specificity calculations then would be: p = 0, 0, 0, 1 p.warning = 0, 0, 1, 1 #content p.warning = 0, 1, 1, 1
![Page 23: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/23.jpg)
Inside the BoxUnderstanding the box model
Two box models exist: IE proprietary W3C
Managing this via DOCTYPE SWITCHING, hacks and filters is key to consistent x-browser design
![Page 24: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/24.jpg)
CSS LayoutPresent and future
CSS is actually limited in terms of layout:
We use floats, which were never meant for layout
Positioning with CSS is poorly described, but extremely useful
CSS 3.0 proposes a number of different layout and column modules
Implementations will take time
![Page 25: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/25.jpg)
CSS and Cross-Browser DesignMaking sites interoperable across browsers
Choices for managing browsers:
Hacks and workarounds Conditional comments Dean Edward’s IE7 Scripts
http://dean.edwards.name/IE7/
![Page 26: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/26.jpg)
Rediscovering True DesignShifting to modern processes
Contemporary methods and techniques:
Improved typography Imaginative imagery New opportunities to break out of
boxy, limited design
![Page 27: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/27.jpg)
![Page 28: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/28.jpg)
![Page 29: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/29.jpg)
![Page 30: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/30.jpg)
![Page 31: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/31.jpg)
Expression Helps!
Features within Expression Web Related to Standards
![Page 32: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/32.jpg)
Being Compatible
Quick reporting on compatibility
Check against specific markup DTDs
(or let the DOCTYPE be the guide)
Check CSS against W3C standards or browser-specific schema
![Page 33: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/33.jpg)
Style Checks
Great tools built right in
Check for orphaned rules
Get a breakdown of where a page’s acting rules are located
![Page 34: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/34.jpg)
Instant Validation
It’s constantly checking for problems
Unbalanced tags are flagged immediately
More comprehensive reports are a click away
Built-in validation equal to or better than available online tools
![Page 35: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/35.jpg)
Visual Representation
The box model made plain
One of the hardest things to explain to newcomers is how margins work
With the visualization in Expression, it’s a snap!
Code is highlighted as well
![Page 36: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/36.jpg)
Style Creation
New styles made easy
Dialogs preview style changes for you
Some provide handy references!
Properties grouped into logical ‘topics’
Granted, there’s a lot to deal with here, but that’s CSS for you…
![Page 37: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/37.jpg)
Give yourself a head start on accessibility
Set up a report and get explanations
Accessibility Checks
![Page 38: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/38.jpg)
Accessible Reporting
Easy-print reports for later reference
Generate your reports as XHTML documents
Print and check off points as you hit them
You can even style the reports your way!
![Page 39: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/39.jpg)
Questions & Answers
![Page 40: 2 Thinking in CSS How to Build Great Looking Sites.](https://reader038.fdocuments.net/reader038/viewer/2022110322/56649d3b5503460f94a160a2/html5/thumbnails/40.jpg)