SlideShare uma empresa Scribd logo
1 de 62
Baixar para ler offline
Atlanta Web Design Group, July ‘09




Jeff Croft
July 25th, 2009
Atlanta Web Design Group


Grids, CSS, Standards,
and Tomfoolery
Atlanta Web Design Group, July ‘09




Introduction
Atlanta Web Design Group, July ‘09




I’m Jeff Croft.
Atlanta Web Design Group, July ‘09




  What do I do?
• Design and develop web and mobile sites and applications for
  Blue Flavor and its clients.

• Support and evangelize Django, an open source, Python-based
  web application framework that originated at The World
  Company, my former employer.

• Write about design, web design, Django, Mac nerdery, and
  whatever else strikes my fancy at jeffcroft.com.
Atlanta Web Design Group, July ‘09




Who are you?
Atlanta Web Design Group, July ‘09




What are grids?
Atlanta Web Design Group, July ‘09




“A typographic grid is a two-
 dimensional structure made up of a
 series of intersecting vertical and
 horizontal axes used to structure
 content. The grid serves as an
 armature on which a designer can
 organize text and images in a rational,
 easy to absorb manner”
Wikipedia
Atlanta Web Design Group, July ‘09
Atlanta Web Design Group, July ‘09




(Very) brief history
of the grid
Atlanta Web Design Group, July ‘09




  Die neue Typographie
• Written by Jan Tschichold in 1928

• Condemned serif typefaces and
  centered text, and helped to codify
  other modern design rules.

• By the time it was translated to English
  in the mid-40s, Tchichold had largely
  abandoned the modernist principles he
  helped create.

• However, his ideas were very influential
  to other designers, such as Josef
  Müller-Brockmann, Max Bill, and Emil
  Ruder, who helped create the
  “International Typographic Style,” or
  “Swiss Style” in the 1950s.
Atlanta Web Design Group, July ‘09
Atlanta Web Design Group, July ‘09
Atlanta Web Design Group, July ‘09
Atlanta Web Design Group, July ‘09
Atlanta Web Design Group, July ‘09




Why grids?
Atlanta Web Design Group, July ‘09




Order.
Structure.
Hierarchy.
Organization.
Atlanta Web Design Group, July ‘09




Design is all about
communication. In order to
communicate well, we must
bring order to the data we are
trying to represent.
Atlanta Web Design Group, July ‘09




Different types of grids
Atlanta Web Design Group, July ‘09




Single-column
                              From Thinking With Type
                              by Ellen Lupton
                              http://www.papress.com/thinkingwithtype/
Atlanta Web Design Group, July ‘09




Single-column grids can
work great on the web from a
purely functional perspective,
but rarely fit into practical
web situations.
Atlanta Web Design Group, July ‘09




Multi-column
                             From Thinking With Type
                             by Ellen Lupton
                             http://www.papress.com/thinkingwithtype/
Atlanta Web Design Group, July ‘09




Multi-column grids are the
most common kinds of grids
we see on the web, and are
highly effective.
Atlanta Web Design Group, July ‘09




Modular
                        From Thinking With Type
                        by Ellen Lupton
                        http://www.papress.com/thinkingwithtype/
Atlanta Web Design Group, July ‘09




Modular grids are rarely used
on the web, because web
content tends to be dynamic
vertically. However, they can
be used to great effect in
some situations.
Atlanta Web Design Group, July ‘09




Some examples from our
work at Blue Flavor
Atlanta Web Design Group, July ‘09


              China8 Project
              Modular grid
Atlanta Web Design Group, July ‘09


              China8 Project
              Modular grid
Atlanta Web Design Group, July ‘09


              Seed Magazine
              Modified modular grid
Atlanta Web Design Group, July ‘09


              Seed Magazine
              Modified modular grid
Atlanta Web Design Group, July ‘09


              The New York Review of Books
              Multi-column grid
Atlanta Web Design Group, July ‘09


              The New York Review of Books
              Multi-column grid
Atlanta Web Design Group, July ‘09


              BlueFlavor.com
              Multi-column grid
Atlanta Web Design Group, July ‘09


              BlueFlavor.com
              Multi-column grid
Atlanta Web Design Group, July ‘09




Typographic baseline grids
Atlanta Web Design Group, July ‘09




“...the total amount of vertical space
 consumed by each departure from the
 main text should be an even multiple
 of the base leading.”

Robert Bringhurst
The Elements of Typographic Style
Atlanta Web Design Group, July ‘09




What is a baseline grid?
In most traditional typography, all elements (body text, headers,
images, etc.) on the page are set according to an invisible grid
of horizontal lines, spaced evenly, running all the way down the
page. Usually, the distance between these lines is equal to the
line height of the body text.
Atlanta Web Design Group, July ‘09




  For example:
  If we are using 12 pixel tall text and an 18 pixel tall line height
  (usually referred to as 12/18), we might:

• Set h1 elements at 24/36 (18 * 2 = 36)

• Set h2 elements at 18/18 with 9px of padding above and below
  (18 + 9 + 9 = 36)

• Craft images that are exactly 360px tall, and give them 8px of
  padding and a 1px border on the top and bottom (360 + 8 + 8
  + 1 + 1 = 378)

• Set callouts and sidebars at 10/18.

• Add 18px of margin both above and below bulleted lists.
Atlanta Web Design Group, July ‘09




An Article Apart
                     http://www.alistapart.com/articles/
                     settingtypeontheweb

                     Wilson Miner’s A List Apart article Setting Type on the
                     Web to a Baseline Grid is a well-written, concise, and
                     complete description of how to achieve a consistent
                     baseline grid on the Web.
Atlanta Web Design Group, July ‘09


              Baseline grid example
              from Wilson Miner’s A List
              Apart article on the topic.

              Note that all text aligns to
              the grid lines, even that
              which follows interruptions
              such as images and
              headers, and even that
              which has a smaller font
              size, such as the callouts.
Atlanta Web Design Group, July ‘09




Incremental leading
There are cases in which you may not be able to stick to the
baseline grid on a line-by-line basis. For example, imagine your
line height is 18 pixels and your base text size is 12 pixels. You
may set a callout or sidebar with smaller text, like 10 pixels.
Here, you may find that 18 pixels is too much line-height.

In this case, you can make the line-height smaller, but in such a
way that it lines up with the baseline grid every x number of
lines, rather than every single line.

For example, you can arrange your smaller text such that five
lines of it are exactly the same height as four lines of base text.
Atlanta Web Design Group, July ‘09




Mark Boulton’s incremental
leading lesson
                        http://www.markboulton.co.uk/journal/
                        comments/incremental_leading/

                        Mark Boulton wrote the seminal piece on using
                        incremental leading with CSS, as a response to Wilson’s
                        A List Apart article.
Atlanta Web Design Group, July ‘09




  A few more points on
  baseline grids
• Baseline grids can be crafted with relatively-sized text, too—but
  the math is a bit more complicated.

• Creating a background image with your grid lines to be used
  during development can be a big help.

• So can Syncotype, a bookmarklet from Rob Goodlatte.
  http://www.robgoodlatte.com/2007/07/31/syncotype-your-
  baselines/

• Not always 100% achievable when dealing with images coming
  out of CMSes that aren’t of predictable size—but it’s still an
  admirable goal, and getting most of the way there will still be a
  dramatic improvement to your page.
Atlanta Web Design Group, July ‘09




Grids are systems.
Atlanta Web Design Group, July ‘09




While a grid can be useful for
laying out a single page,
they’re most effective when
thought of as a system for
use over an entire work (such
as a website).
Atlanta Web Design Group, July ‘09




Tools that can help
Atlanta Web Design Group, July ‘09




Many CSS frameworks
include a grid component
that makes crafting complex
multi-column grids on the
web quite simple.

They also usually include a
basic baseline grid setup.
Atlanta Web Design Group, July ‘09




  CSS frameworks with grid components
• Blueprint: http://code.google.com/p/blueprintcss/

• Yahoo UI: http://developer.yahoo.com/yui/grids/

• YAML: http://www.yaml.de/en/

• 960.gs: http://960.gs/
Atlanta Web Design Group, July ‘09




More recent CSS generating
tools create a syntax on top
of CSS that gives you
advanced features, and a
complier than “dumbs down”
your code to a standard CSS
file.

Features include variables,
mixins, nesting rules, and
mathematical operations.
Atlanta Web Design Group, July ‘09




  CSS generation tools
• Less (Ruby): http://lesscss.org/

• Sass (Ruby): http://haml.hamptoncatlin.com/docs/rdoc/classes/
  Sass.html

• CleverCSS (Python): http://sandbox.pocoo.org/clevercss/
Atlanta Web Design Group, July ‘09




That’s about it on grids.
Atlanta Web Design Group, July ‘09




Takeaway: Grids help provide
structure, organization, and
order to the data we present
on our sites. A little grid love
will go along way in the
overall elegance of your site.
Atlanta Web Design Group, July ‘09




Questions? Comments?
Atlanta Web Design Group, July ‘09




Okay, let’s talk standards.
Atlanta Web Design Group, July ‘09




Are we using web standards?
Atlanta Web Design Group, July ‘09




HTML 4? HTML 5? XHTML?
Atlanta Web Design Group, July ‘09




What about CSS3 that isn’t
supported in all browsers?

How do we feel about -moz
and -webkit namespaces?
Atlanta Web Design Group, July ‘09




Do you validate your markup?

Do you validate other
people’s markup?
Atlanta Web Design Group, July ‘09




What comes first: the
standard or the browser
implementation?
Atlanta Web Design Group, July ‘09




How are we handling browser
support? What do you
“support?”
Atlanta Web Design Group, July ‘09




The new “browser wars”—
good or bad?
Atlanta Web Design Group, July ‘09




Anything else?
Atlanta Web Design Group, July ‘09




Thanks, yo. Let’s get drunk.

Mais conteúdo relacionado

Último

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 

Último (20)

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 

Grids, CSS, Standards, And Tomfoolery

  • 1. Atlanta Web Design Group, July ‘09 Jeff Croft July 25th, 2009 Atlanta Web Design Group Grids, CSS, Standards, and Tomfoolery
  • 2. Atlanta Web Design Group, July ‘09 Introduction
  • 3. Atlanta Web Design Group, July ‘09 I’m Jeff Croft.
  • 4. Atlanta Web Design Group, July ‘09 What do I do? • Design and develop web and mobile sites and applications for Blue Flavor and its clients. • Support and evangelize Django, an open source, Python-based web application framework that originated at The World Company, my former employer. • Write about design, web design, Django, Mac nerdery, and whatever else strikes my fancy at jeffcroft.com.
  • 5. Atlanta Web Design Group, July ‘09 Who are you?
  • 6. Atlanta Web Design Group, July ‘09 What are grids?
  • 7. Atlanta Web Design Group, July ‘09 “A typographic grid is a two- dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner” Wikipedia
  • 8. Atlanta Web Design Group, July ‘09
  • 9. Atlanta Web Design Group, July ‘09 (Very) brief history of the grid
  • 10. Atlanta Web Design Group, July ‘09 Die neue Typographie • Written by Jan Tschichold in 1928 • Condemned serif typefaces and centered text, and helped to codify other modern design rules. • By the time it was translated to English in the mid-40s, Tchichold had largely abandoned the modernist principles he helped create. • However, his ideas were very influential to other designers, such as Josef Müller-Brockmann, Max Bill, and Emil Ruder, who helped create the “International Typographic Style,” or “Swiss Style” in the 1950s.
  • 11. Atlanta Web Design Group, July ‘09
  • 12. Atlanta Web Design Group, July ‘09
  • 13. Atlanta Web Design Group, July ‘09
  • 14. Atlanta Web Design Group, July ‘09
  • 15. Atlanta Web Design Group, July ‘09 Why grids?
  • 16. Atlanta Web Design Group, July ‘09 Order. Structure. Hierarchy. Organization.
  • 17. Atlanta Web Design Group, July ‘09 Design is all about communication. In order to communicate well, we must bring order to the data we are trying to represent.
  • 18. Atlanta Web Design Group, July ‘09 Different types of grids
  • 19. Atlanta Web Design Group, July ‘09 Single-column From Thinking With Type by Ellen Lupton http://www.papress.com/thinkingwithtype/
  • 20. Atlanta Web Design Group, July ‘09 Single-column grids can work great on the web from a purely functional perspective, but rarely fit into practical web situations.
  • 21. Atlanta Web Design Group, July ‘09 Multi-column From Thinking With Type by Ellen Lupton http://www.papress.com/thinkingwithtype/
  • 22. Atlanta Web Design Group, July ‘09 Multi-column grids are the most common kinds of grids we see on the web, and are highly effective.
  • 23. Atlanta Web Design Group, July ‘09 Modular From Thinking With Type by Ellen Lupton http://www.papress.com/thinkingwithtype/
  • 24. Atlanta Web Design Group, July ‘09 Modular grids are rarely used on the web, because web content tends to be dynamic vertically. However, they can be used to great effect in some situations.
  • 25. Atlanta Web Design Group, July ‘09 Some examples from our work at Blue Flavor
  • 26. Atlanta Web Design Group, July ‘09 China8 Project Modular grid
  • 27. Atlanta Web Design Group, July ‘09 China8 Project Modular grid
  • 28. Atlanta Web Design Group, July ‘09 Seed Magazine Modified modular grid
  • 29. Atlanta Web Design Group, July ‘09 Seed Magazine Modified modular grid
  • 30. Atlanta Web Design Group, July ‘09 The New York Review of Books Multi-column grid
  • 31. Atlanta Web Design Group, July ‘09 The New York Review of Books Multi-column grid
  • 32. Atlanta Web Design Group, July ‘09 BlueFlavor.com Multi-column grid
  • 33. Atlanta Web Design Group, July ‘09 BlueFlavor.com Multi-column grid
  • 34. Atlanta Web Design Group, July ‘09 Typographic baseline grids
  • 35. Atlanta Web Design Group, July ‘09 “...the total amount of vertical space consumed by each departure from the main text should be an even multiple of the base leading.” Robert Bringhurst The Elements of Typographic Style
  • 36. Atlanta Web Design Group, July ‘09 What is a baseline grid? In most traditional typography, all elements (body text, headers, images, etc.) on the page are set according to an invisible grid of horizontal lines, spaced evenly, running all the way down the page. Usually, the distance between these lines is equal to the line height of the body text.
  • 37. Atlanta Web Design Group, July ‘09 For example: If we are using 12 pixel tall text and an 18 pixel tall line height (usually referred to as 12/18), we might: • Set h1 elements at 24/36 (18 * 2 = 36) • Set h2 elements at 18/18 with 9px of padding above and below (18 + 9 + 9 = 36) • Craft images that are exactly 360px tall, and give them 8px of padding and a 1px border on the top and bottom (360 + 8 + 8 + 1 + 1 = 378) • Set callouts and sidebars at 10/18. • Add 18px of margin both above and below bulleted lists.
  • 38. Atlanta Web Design Group, July ‘09 An Article Apart http://www.alistapart.com/articles/ settingtypeontheweb Wilson Miner’s A List Apart article Setting Type on the Web to a Baseline Grid is a well-written, concise, and complete description of how to achieve a consistent baseline grid on the Web.
  • 39. Atlanta Web Design Group, July ‘09 Baseline grid example from Wilson Miner’s A List Apart article on the topic. Note that all text aligns to the grid lines, even that which follows interruptions such as images and headers, and even that which has a smaller font size, such as the callouts.
  • 40. Atlanta Web Design Group, July ‘09 Incremental leading There are cases in which you may not be able to stick to the baseline grid on a line-by-line basis. For example, imagine your line height is 18 pixels and your base text size is 12 pixels. You may set a callout or sidebar with smaller text, like 10 pixels. Here, you may find that 18 pixels is too much line-height. In this case, you can make the line-height smaller, but in such a way that it lines up with the baseline grid every x number of lines, rather than every single line. For example, you can arrange your smaller text such that five lines of it are exactly the same height as four lines of base text.
  • 41. Atlanta Web Design Group, July ‘09 Mark Boulton’s incremental leading lesson http://www.markboulton.co.uk/journal/ comments/incremental_leading/ Mark Boulton wrote the seminal piece on using incremental leading with CSS, as a response to Wilson’s A List Apart article.
  • 42. Atlanta Web Design Group, July ‘09 A few more points on baseline grids • Baseline grids can be crafted with relatively-sized text, too—but the math is a bit more complicated. • Creating a background image with your grid lines to be used during development can be a big help. • So can Syncotype, a bookmarklet from Rob Goodlatte. http://www.robgoodlatte.com/2007/07/31/syncotype-your- baselines/ • Not always 100% achievable when dealing with images coming out of CMSes that aren’t of predictable size—but it’s still an admirable goal, and getting most of the way there will still be a dramatic improvement to your page.
  • 43. Atlanta Web Design Group, July ‘09 Grids are systems.
  • 44. Atlanta Web Design Group, July ‘09 While a grid can be useful for laying out a single page, they’re most effective when thought of as a system for use over an entire work (such as a website).
  • 45. Atlanta Web Design Group, July ‘09 Tools that can help
  • 46. Atlanta Web Design Group, July ‘09 Many CSS frameworks include a grid component that makes crafting complex multi-column grids on the web quite simple. They also usually include a basic baseline grid setup.
  • 47. Atlanta Web Design Group, July ‘09 CSS frameworks with grid components • Blueprint: http://code.google.com/p/blueprintcss/ • Yahoo UI: http://developer.yahoo.com/yui/grids/ • YAML: http://www.yaml.de/en/ • 960.gs: http://960.gs/
  • 48. Atlanta Web Design Group, July ‘09 More recent CSS generating tools create a syntax on top of CSS that gives you advanced features, and a complier than “dumbs down” your code to a standard CSS file. Features include variables, mixins, nesting rules, and mathematical operations.
  • 49. Atlanta Web Design Group, July ‘09 CSS generation tools • Less (Ruby): http://lesscss.org/ • Sass (Ruby): http://haml.hamptoncatlin.com/docs/rdoc/classes/ Sass.html • CleverCSS (Python): http://sandbox.pocoo.org/clevercss/
  • 50. Atlanta Web Design Group, July ‘09 That’s about it on grids.
  • 51. Atlanta Web Design Group, July ‘09 Takeaway: Grids help provide structure, organization, and order to the data we present on our sites. A little grid love will go along way in the overall elegance of your site.
  • 52. Atlanta Web Design Group, July ‘09 Questions? Comments?
  • 53. Atlanta Web Design Group, July ‘09 Okay, let’s talk standards.
  • 54. Atlanta Web Design Group, July ‘09 Are we using web standards?
  • 55. Atlanta Web Design Group, July ‘09 HTML 4? HTML 5? XHTML?
  • 56. Atlanta Web Design Group, July ‘09 What about CSS3 that isn’t supported in all browsers? How do we feel about -moz and -webkit namespaces?
  • 57. Atlanta Web Design Group, July ‘09 Do you validate your markup? Do you validate other people’s markup?
  • 58. Atlanta Web Design Group, July ‘09 What comes first: the standard or the browser implementation?
  • 59. Atlanta Web Design Group, July ‘09 How are we handling browser support? What do you “support?”
  • 60. Atlanta Web Design Group, July ‘09 The new “browser wars”— good or bad?
  • 61. Atlanta Web Design Group, July ‘09 Anything else?
  • 62. Atlanta Web Design Group, July ‘09 Thanks, yo. Let’s get drunk.