Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

delete old article

  • Loading branch information...
commit c02bb34452efa0129e1446d1a1232e43578edfa5 1 parent c936c98
@dodola authored
Showing with 0 additions and 14,511 deletions.
  1. +0 −197 _posts/2009-12-22-typographic-work-planner.md
  2. +0 −151 _posts/2010-01-26-a-reconsiderationin-defence-of-b-and-i-or-people-fear-what-they-dont-understand.md
  3. +0 −136 _posts/2010-01-26-a-suitable-alternativeon-proper-use-of-alt-attributes.markdown
  4. +0 −24 _posts/2010-01-27-the-importance-of-proper-punctuation.markdown
  5. +0 −80 _posts/2010-01-30-the-three-types-of-dash.md
  6. +0 −184 _posts/2010-01-31-iphone-css-tips-for-building-iphone-websites.markdown
  7. +0 −359 _posts/2010-02-02-css-bar-charts-styling-data-with-css3-and-progressive-enhancement.markdown
  8. +0 −86 _posts/2010-02-04-upside-down-domainsregistering-an-international-domain-name.markdown
  9. +0 −112 _posts/2010-02-11-mutiple-column-lists-using-one-ul.markdown
  10. +0 −123 _posts/2010-02-19-typographic-phrases-or-how-to-turn-sayings-geeky.markdown
  11. +0 −31 _posts/2010-02-24-type-tipsquick-tips-on-all-things-web-typography.markdown
  12. +0 −36 _posts/2010-02-28-suzanna-haworth-redesign.markdown
  13. +0 −48 _posts/2010-02-28-usability-in-everyday-items.markdown
  14. +0 −83 _posts/2010-03-02-a-quick-note-on-border-radius.markdown
  15. +0 −113 _posts/2010-03-02-moving-forward-is-holding-us-back.markdown
  16. +0 −58 _posts/2010-03-08-30-days-without-an-iphone.markdown
  17. +0 −135 _posts/2010-04-07-building-sites-without-using-ids-or-classes.markdown
  18. +0 −122 _posts/2010-08-09-semantics-and-sensibility.markdown
  19. +0 −105 _posts/2010-08-31-zebra-striping-rows-and-columns.markdown
  20. +0 −106 _posts/2010-09-05-set-then-unset.markdown
  21. +0 −51 _posts/2010-09-16-a-quick-counter-to-the-digital-agencies-of-the-future.markdown
  22. +0 −79 _posts/2010-09-27-keeping-code-clean-with-content.markdown
  23. +0 −40 _posts/2010-09-29-css-wizardry-personal-content-and-getting-things-for-free.markdown
  24. +0 −28 _posts/2010-10-04-in-response-to-invisible-captcha-to-prevent-form-spam.markdown
  25. +0 −223 _posts/2010-10-05-designing-in-the-browser-leads-to-better-quality-builds.markdown
  26. +0 −19 _posts/2010-10-06-good-developers-vs-good-salespeople.markdown
  27. +0 −56 _posts/2010-10-11-hyperbolic-title-using-the-word-sexy-to-describe-some-code.markdown
  28. +0 −28 _posts/2010-10-19-things-are-changing-at-css-wizardry.markdown
  29. +0 −35 _posts/2010-10-20-i-hate-that-i-love-writer.markdown
  30. +0 −83 _posts/2010-10-20-unsung-heroes.markdown
  31. +0 −650 ...le-progressively-enhanced-mobile-optimised-progress-bar-bonus-style-the-numbers-in-an-ordered-list.markdown
  32. +0 −87 _posts/2010-11-29-design-and-education.markdown
  33. +0 −44 _posts/2010-11-30-improving-css-tooltips.markdown
  34. +0 −209 _posts/2010-12-02-let-it-snow.markdown
  35. +0 −32 _posts/2010-12-02-tweet-this.markdown
  36. +0 −158 _posts/2010-12-06-css-camel-case-seriously-sucks.markdown
  37. +0 −45 _posts/2010-12-08-the-implementation-appreciation-rule.markdown
  38. +0 −60 _posts/2010-12-18-simplified-page-borders-in-pure-css.md
  39. +0 −86 _posts/2010-12-20-remote-controlled-hyperlinks-or-multiple-links-in-one-hyperlink.md
  40. +0 −84 _posts/2010-12-21-media-queries-handier-than-you-think.md
  41. +0 −62 _posts/2010-12-21-mo-robust-paragraph-indenting.md
  42. +0 −48 _posts/2011-01-05-a-new-year-a-new-css-wizardry.markdown
  43. +0 −187 _posts/2011-01-06-the-real-html5-boilerplate.md
  44. +0 −34 _posts/2011-01-07-scrolling-overflowed-content-in-ios.markdown
  45. +0 −41 _posts/2011-01-10-a-new-year-a-new-css-wizardry-ii.markdown
  46. +0 −96 _posts/2011-01-11-html-elements-tags-and-attributes.markdown
  47. +0 −137 _posts/2011-01-12-maximising-hit-area-for-usability.markdown
  48. +0 −38 _posts/2011-01-18-client-respect.markdown
  49. +0 −315 _posts/2011-01-23-html5-and-text-level-semantics.markdown
  50. +0 −30 _posts/2011-01-23-link-recreating-the-lukes-beard-social-icons-with-css3.markdown
  51. +0 −70 _posts/2011-01-23-using-the-body-element-as-a-wrapper.markdown
  52. +0 −83 _posts/2011-01-29-create-a-centred-horizontal-navigation.md
  53. +0 −56 _posts/2011-01-31-forget-responsive-web-design.md
  54. +0 −25 _posts/2011-02-03-announcing-in-focus.markdown
  55. +0 −35 _posts/2011-02-06-in-focus-a-case-study.markdown
  56. +0 −118 _posts/2011-02-09-css-powered-ribbons-the-clean-way.md
  57. +0 −414 _posts/2011-02-17-creating-a-pure-css-dropdown-menu.markdown
  58. +0 −232 _posts/2011-02-17-pure-css3-accordion.md
  59. +0 −255 _posts/2011-02-22-mobile-business-card.markdown
  60. +0 −46 _posts/2011-03-01-problems-with-the-sans-serif-hack.md
  61. +0 −224 _posts/2011-03-14-coding-up-a-semantic-lean-timeline.md
  62. +0 −23 _posts/2011-03-14-link-technical-web-typography-guidelines-and-techniques.markdown
  63. +0 −77 _posts/2011-03-15-ideas-of-march.markdown
  64. +0 −21 _posts/2011-04-20-introducing-inuit-css.markdown
  65. +0 −88 _posts/2011-05-18-on-negative-hovers.md
  66. +0 −37 _posts/2011-05-24-jquery-placeholder-plugin-polyfill.markdown
  67. +0 −63 _posts/2011-05-31-font-sizing-with-rem-could-be-avoided.md
  68. +0 −145 _posts/2011-06-03-annotated-figures-in-html5-and-css.md
  69. +0 −25 _posts/2011-06-05-dibi-2011.markdown
  70. +0 −75 _posts/2011-06-11-introducing-igloos-inuit-css-gets-plugins.markdown
  71. +0 −47 _posts/2011-06-18-styling-alt-text-on-images.md
  72. +0 −113 _posts/2011-06-19-what-is-inuit-css.markdown
  73. +0 −74 _posts/2011-06-20-namespacing-fragment-identifiers.md
  74. +0 −48 _posts/2011-06-28-fluid-grid-calculator.markdown
  75. +0 −67 _posts/2011-07-16-responsive-images-right-now.md
  76. +0 −25 _posts/2011-07-25-net-magazine-awards-nominee.markdown
  77. +0 −38 _posts/2011-07-31-borders-on-responsive-images.md
  78. +0 −14 _posts/2011-07-31-hry-rbrts-me.markdown
  79. +0 −62 _posts/2011-08-02-more-logo-markup-tips.md
  80. +0 −48 _posts/2011-08-08-updated-cv.markdown
  81. +0 −142 _posts/2011-08-18-good-developers-are-illusionists.markdown
  82. +0 −198 _posts/2011-08-23-building-better-grid-systems.md
  83. +0 −25 _posts/2011-08-24-two-titillating-table-tips.markdown
  84. +0 −79 _posts/2011-09-11-when-using-ids-can-be-a-pain-in-the-class.md
  85. +0 −101 _posts/2011-09-13-do-designers-need-to-code.md
  86. +0 −46 _posts/2011-09-17-ordered-and-numbered-lists-the-differences.md
  87. +0 −180 _posts/2011-09-17-writing-efficient-css-selectors.md
  88. +0 −140 _posts/2011-09-22-the-nav-abstraction.md
  89. +0 −128 _posts/2011-10-16-the-island-object.md
  90. +0 −166 _posts/2011-10-18-reset-restarted.md
  91. +0 −58 _posts/2011-10-25-build-along-testing-the-water.md
  92. +0 −112 _posts/2011-10-27-the-css-wizardry-build-along-is-go.markdown
  93. +0 −220 _posts/2011-10-31-fully-fluid-responsive-css-carousel.md
  94. +0 −62 _posts/2011-11-02-sam-penrose-design-process-and-write-up.md
  95. +0 −36 _posts/2011-11-03-css-wizardry-build-along-1.md
  96. +0 −117 _posts/2011-11-05-build-along-1-reflection-and-reasoning.md
  97. +0 −85 _posts/2011-11-08-create-a-notched-current-state-nav.md
  98. +0 −130 _posts/2011-12-07-measuring-and-sizing-uis-2011-style.md
  99. +0 −42 _posts/2011-12-11-on-html-and-css-best-practices.md
  100. +0 −38 _posts/2012-02-12-breaking-good-habits-the-digital-barn.md
  101. +0 −185 _posts/2012-02-29-pragmatic-practical-font-sizing-in-css.md
  102. +0 −198 _posts/2012-03-13-hacker-news-rebuttal.md
  103. +0 −17 _posts/2012-04-16-comments-on-css-wizardry.md
  104. +0 −36 _posts/2012-04-17-introducing-faavorite.md
  105. +0 −304 _posts/2012-04-20-my-html-css-coding-style.md
  106. +0 −222 _posts/2012-04-28-the-single-responsibility-principle-applied-to-css.md
  107. +0 −89 _posts/2012-04-29-front-trends-2012.markdown
  108. +0 −139 _posts/2012-05-15-keep-your-css-selectors-short.md
  109. +0 −128 _posts/2012-06-12-single-direction-margin-declarations.md
  110. +0 −212 _posts/2012-06-21-the-open-closed-principle-applied-to-css.md
  111. +0 −87 _posts/2012-07-16-quasi-qualified-css-selectors.md
  112. +0 −159 _posts/2012-07-17-shoot-to-kill-css-selector-intent.md
  113. +0 −24 _posts/2012-07-19-video-breaking-good-habits-front-trends-2012.markdown
  114. +0 −50 _posts/2012-08-07-tags-in-css-files.md
  115. +0 −46 _posts/2012-09-10-canvas-conf-2012.markdown
  116. +0 −134 _posts/2012-09-30-inuit-css-v4-oocss-sass-and-more.markdown
  117. +0 −47 _posts/2012-10-14-announcing-pr-ofile-me.md
  118. +0 −52 _posts/2012-10-16-a-classless-class-on-using-more-classes-in-your-html.md
  119. +0 −328 _posts/2012-11-20-code-smells-in-css.md
  120. +0 −159 _posts/2012-12-06-my-git-workflow-for-inuit-css.md
  121. +0 −40 _posts/2012-12-09-open-sourceome.md
  122. +0 −158 _posts/2012-12-21-a-new-css-wizardry.md
  123. +0 −30 _posts/2013-01-15-discussion-via-branch.md
  124. +0 −608 _posts/2013-01-20-front-end-performance-for-web-designers-and-front-end-developers.md
  125. +0 −203 _posts/2013-01-23-your-logo-is-still-an-image-and-so-is-mine.md
  126. +0 −229 _posts/2013-01-25-mindbemding-getting-your-head-round-bem-syntax.md
  127. +0 −113 _posts/2013-01-29-you-know-your-context-on-critical-thinking-and-thinking-for-yourself.md
  128. +0 −278 _posts/2013-02-06-responsive-grid-systems-a-solution.md
  129. +0 −70 _posts/2013-02-07-introducing-csswizardry-grids.md
  130. +0 −39 _posts/2013-03-18-net-award-nominee.md
View
197 _posts/2009-12-22-typographic-work-planner.md
@@ -1,197 +0,0 @@
----
-comments: true
-date: 2009-12-22 11:17:25
-layout: post
-slug: typographic-work-planner
-title: Typographic work planner
-wordpress_id: 49
-categories:
-- Web Development
-tag:
-- CSS
-- CSS3
-- Design
-- Development
-- HTML
-- Semantics
----
-
-No one likes being told what to do, especially if it’s work related, but nevertheless jobs need done. Why present boring stuff in a boring way? If you’re going to be told what to do, at least soften the blow by being told nicely. Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff.
-
-## Typographic work planner markup:
-
-The rich, semantic markup is as follows. Notice the use of the more semantic elements and attributes such as `summary=""`, `colgroup`, `scope=""`, `caption` and more...
-
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-
- <title>Typographic work planner</title>
-
- <link rel="stylesheet" type="text/css" href="css/style.css" />
- </head>
- <body id="home">
- <div id="wrapper">
- <table summary="An overview of upcoming and recently completed work ?
- by employees">
- <caption>Work schedule</caption>
- <colgroup>
- <col id="date" />
- <col id="user" />
- <col id="dec" />
- </colgroup>
- <thead>
- <tr>
- <th scope="col">Date</th>
- <th scope="col">User</th>
- <th scope="col">Description</th>
- </tr>
- </thead>
- <tfoot>
- <tr>
- <td colspan="3">Sense Internet Ltd work planner</td>
- </tr>
- </tfoot>
- <tbody>
- <tr>
- <td class="date">20 December, 2009</td>
- <td class="user">Harry Roberts</td>
- <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
- rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
- in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
- </tr>
- <tr>
- <td class="date">20 December, 2009</td>
- <td class="user">Joe Whitley</td>
- <td class="desc">Suspendisse venenatis. Donec eleifend ?
- dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
- magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
- tristique senectus et netuset malesuada fames ac turpis egestas. ?
- Curabitur sodales gravida tellus.</td>
- </tr>
- <tr>
- <td class="date">21 December, 2009</td>
- <td class="user">Harry Roberts</td>
- <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
- rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
- in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
- </tr>
- <tr>
- <td class="date">21 December, 2009</td>
- <td class="user">Joe Whitley</td>
- <td class="desc">Suspendisse venenatis. Donec eleifend ?
- dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
- magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
- tristique senectus et netuset malesuada fames ac turpis egestas. ?
- Curabitur sodales gravida tellus.</td>
- </tr>
- <tr>
- <td class="date">21 December, 2009</td>
- <td class="user">Sam Penrose</td>
- <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
- rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
- in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
- </tr>
- <tr class="today">
- <td class="date">22 December, 2009</td>
- <td class="user">Joe Whitley</td>
- <td class="desc">Suspendisse venenatis. Donec eleifend ?
- dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
- magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
- tristique senectus et netuset malesuada fames ac turpis egestas. ?
- Curabitur sodales gravida tellus.</td>
- </tr>
- <tr class="today">
- <td class="date">22 December, 2009</td>
- <td class="user">Sam Penrose</td>
- <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
- rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
- in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
- </tr>
- <tr class="today">
- <td class="date">22 December, 2009</td>
- <td class="user">Joe Whitley</td>
- <td class="desc">Suspendisse venenatis. Donec eleifend ?
- dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
- magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
- tristique senectus et netuset malesuada fames ac turpis egestas. ?
- Curabitur sodales gravida tellus.</td>
- </tr>
- </tbody>
- </table>
- </div>
- </body>
- </html>
-
-### In detail...
-
-There are a few things in the table you may not have seen before, briefly, they are:
-
-* **`summary=""`:** This is an attribute which provides a brief overview of the table and its contents/purpose.
-* **`caption`:** This is a table specific caption, essentially a heading/title explicitly for the table.
-* **`colgroup` and `col`:** This is an essentially invisible element that just adds semantic meaning to the table. It defines the columns and can—in some browsers—be used to style them.
-* **`scope="col"`:** This is an attribute which tells the browser whether the `th` is a title for a column or a row. This then obviously makes the other possible attribute value `row`.
-* **`tfoot`:** This is a table footer and contain pretty much anything you like. It must however appear _before_ the `tbody`.
-
-## Typographic work planner CSS:
-
-The CSS used to create the work planner is pretty basic, with a dash or progressive enhancement added via some CSS3. [View the full CSS file with reset etc.](http://csswizardry.com/demos/typographic-work-planner/css/style.css)
-
- table{
- margin-bottom:20px;
- }
- td,th{
- border-bottom:1px solid #ccc;
- }
- tbody tr{
- background:#fff;
- }
- tbody tr:nth-of-type(even){
- background:#ffc;
- }
- th,tfoot,caption{
- font-family:Helvetica, Arial, Verdana, sans-serif;
- font-size:1.6em;
- font-weight:bold;
- }
- th,td{
- padding:10px 0;
- }
- caption{
- font-size:2.4em;
- position:absolute;
- left:-9999px;
- }
- .date{
- width:160px;
- padding:10px 15px 10px 5px;
- font-family:Georgia, "Times New Roman", Times;
- font-size:1.6em;
- font-style:italic;
- }
- .user{
- width:460px;
- padding-right:20px;
- font-family:Helvetica, Arial, Verdana, sans-serif;
- font-size:4.8em;
- font-weight:bold;
- }
- .desc{
- width:280px;
- font-size:1.2em;
- }
- tbody tr.today{
- background:#ff8;
-
- text-shadow:1px 1px 1px rgba(0,0,0,0.3);
- }
- tfoot{
- color:#666;
- }
- tfoot td{
- padding:10px 5px;
- }
-
-**[Typographic work planner demo](http://csswizardry.com/demos/typographic-work-planner/)**
View
151 ...-01-26-a-reconsiderationin-defence-of-b-and-i-or-people-fear-what-they-dont-understand.md
@@ -1,151 +0,0 @@
----
-comments: true
-date: 2010-01-26 23:06:10
-layout: post
-slug: a-reconsiderationin-defence-of-b-and-i-or-people-fear-what-they-dont-understand
-title: 'A reconsideration—in defence of &lt;b&gt; and &lt;i&gt; (or: people fear what they don’t
- understand)'
-wordpress_id: 306
-categories:
-- Web Development
-tag:
-- HTML
-- Semantics
-- Web Standards
----
-
-The other day, I got to thinking about the HTML elements `<b>` and `<i>`, and wondered if they were still _viably_ usable in production code. I’ve personally never used them before but I was aware that they existed and were still very much valid XHTML markup (even in the Strict `DOCTYPE!`). Wondering whether I’d avoided two elements for three years unnecessarily, I did some digging.
-
-## What the facts state
-
-`<b>` and `<i>` _are_ still valid, and as XHTML is just an XML serialisation of HTML, pretty much all the elements apparent in the HTML spec are true of the XHTML spec too--it is, pretty much, just the way in which these elements are written that makes them different in XHTML.
-
-## Twitter
-
-With the help of [@smashingmag](http://twitter.com/smashingmag) I turned to [Twitter](http://twitter.com/csswizardry) and my knowledgeable followers and asked the question:
-
-> Using `<i>` and `<b>` in (valid) XHTML (strict)… your thoughts on this would be much appreciated. #upcomingBlogPost Cheers all! **[@csswizardry](http://twitter.com/csswizardry)**
-
-Most of the answers I got said petty much the same thing: use `strong` and `em` ... `b` and `i` are deprecated. While this is largely true, there are some myths that need dispelling.
-
-* `strong` and `em` are _not_ the same as bold and italics. strong is strong emphasis and em is emphasis. **It is purely through convention that these two elements happen to adopt either bold or italicised appearances.**
-* `b` and `i` are _not_ deprecated in any way in HTML or XHTML. **They are still in existence, still valid and still (in the right places) usable.**
-
-
-### Some replies
-
-A few choice replies I received which are, on the whole, representative of everyone’s thoughts:
-
-> strong and em make more sense, especially when taking screen readers into account. **[@CreativeNotice](http://twitter.com/CreativeNotice)**
-
-Or so you’d think, see below...
-
-* * *
-
-> I prefer `<strong>` `<em>` because of semantics. You want to put emphasis, not just make text italic. **[@WeHelpDesign](http://twitter.com/wehelpdesign)**
-
-True, if you _do_ just want emphasis that is...
-
-* * *
-
-> Using `<i>` and `<b>` is just fine if it’s for visual bling without real semantic background. **[@levito](http://twitter.com/levito)**
-
-Ah, this is more like it!
-
-* * *
-
-> `<b>` and `<i>` tags describe presentation, not structural semantics. Rather style `<em>` and `<strong>` tags. **[@hornergraphic](http://twitter.com/hornergraphic)**
-
-A view that is seemingly shared by almost everyone else who responded.
-
-* * *
-
-### What about `strong` and `em`?
-
-The vast majority of people who replied were in favour of `strong` and `em` over `b` and `i`. Presuming all respondents were assuming the question was ‘What are your thoughts on using `b` and `i` to represent strong emphasis and emphasis, and thus replace `strong` and `em`?’ then they’d have all been spot on correct. However, `b` and `i` and `strong` and `em` are totally separate things. `b` and `i` assume no semantic value, meaning literally bold and italic respectively. `strong` and `em` however have nothing to do with bold or italics. As previously mentioned, it is through convention only that the default styling for each is so.
-
-`strong` and `em` are ‘spoken word’ type elements, where they represent a change in tone only. This means that their styling is in no way linked to their naming, it is just that us, as people, are familiar with italicised prose sounding more stressed--or emphasised--than surrounding text. This is where the importance of aforementioned semantics and screenreaders come in. Or is it…?
-
-#### The screenreader fallacy
-
-Screenreaders _don’t_ use `strong` and `em`!
-
-The common belief is that `strong` and `em`’s semantic meaning is used by screenreaders to alter tonality when reading content aloud, thus letting the user know that the copy is in fact meant to be understood in a different manner to any neighbouring text. This was something I too believed until the wonderfully knowledgeable [@pekingspring](http://twitter.com/pekingspring) pointed me toward [this article](http://www.paciellogroup.com/blog/?p=41) by [@stevefaulkner](http://twitter.com/stevefaulkner)--it turns out screenreaders _don’t_ use `strong` and `em` to alter tonality!
-
-This means that screenreaders see no semantic value in the `strong` and `em` element. However, they should be used _unconditionally_ where a change in tone is implied, whether a screenreader will understand this or not.
-
-
-### Where to use `<b>` and `<i>` then?
-
-One of my first thoughts was where to use these elements if indeed they are still usable. My initial idea was the use of `i` for markup up things that have to be italicised but the italics aren’t indicative of any tone. To quote the Penguin Guide to Punctuation:
-
-> Another use of italics … is to cite titles of complete works…
-
-Initially I thought this was the ideal use for the `i` element--something that had to be in italics, yet implied no tone of voice. It was such a good fit! However, [@pekingspring](http://twitter.com/pekingspring) came to my aid again and reminded me that the `cite` element is for this exact purpose. That was that idea gone.
-
-Another possible usage for the `i` element was gleaned from the [Typography Manual](http://typographyapp.com/) iPhone app, which states:
-
-> Italics should be used for single letters in a sentence referred to as letters. [for] example ‘The letter _j_ appears too large.’
-
-An idea I had for using `b` was somewhat linked to the `cite` element anyway. A common mistake is to markup the ‘author’ of a quote in `cite` tags. This is of course incorrect, but what _do_ you use? It’s not really a paragraph, so what is it? I did consider the `b` element for this, but I feel that such a piece of information does need a more semantic element to represent it.
-
-Friend and colleague [@simonwiffen](http://twitter.com/simonwiffen) has a very nicely written example usage for each, which I personally think are spot on. The following chunk of text is lifted directly from an internal document written by [@simonwiffen](http://twitter.com/simonwiffen):
-
-* * *
-
-**1.4.3 Strong, emphasis, bold and italic**
-
-`<strong>` (strong emphasis) and `<em>` (emphasis) should be used as opposed to `<b>` (bold) and `<i>` (italic) unless the bold or italic is required without any semantic context (for example in a product name).
-
-**Examples**
-
-Remember **you must** check this box
-
- <p>Remember <strong>you must</strong> check this box.</p>
-
-You should _really_ try to validate your pages
-
- <p>You should <em>really</em> try to validate your pages</p>
-
-Read more about <b>Splash<i>down</i>!™</b> below
-
- <p>Read more about <b>Splash<i>down</i>!™</b> below</p>
-
-* * *
-
-Succinct and, in my opinion, pretty hard to argue with.
-
-#### HTML5 has it sussed
-
-I won’t be using HTML5 for a long while yet, but that’s another story altogether…
-
-Ideally I’d like to retrofit the HTML5 specification’s definitions of each for use right now in XHTML, however I’m not sure I’d be comfortable going ahead with doing such a thing, coding to one spec whilst picking my favourite bits of another.
-
-##### The `<b>` element in HTML5
-
-<blockquote><p>The `b` element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.</p>
-<b class="source"><a href="http://dev.w3.org/html5/spec/Overview.html#the-b-element">HTML5</a></b></blockquote>
-
-##### The `<i>` element in HTML5
-
-<blockquote><p>The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.</p>
-<b class="source"><a href="http://dev.w3.org/html5/spec/Overview.html#the-i-element">HTML5</a></b></blockquote>
-
-### A go-between in the meantime?
-
-There will always be the argument that instead of using `b` and `i` you could or should use something like <span class="italics"> or <span class="bold"> so as to avoid using insemantic elements, however a class name like that is more insemantic than an in-spec HTML element. Not to mention the fact that a `span` with a `class` applied is far more cumbersome than a 'pre-made' piece of HTML.
-
-### The resolve?
-
-So which is worse?
-
-* Using `i` to mark up emphasised text
-* Using `em` to mark up italicised and non-emphasised text
-* Using `i` to mark up purely italicised text
-* Using `<span class="italics">` to mark up italicised text
-
-Special thanks to the following for help with this article: [@smashingmag](http://twitter.com/smashingmag), [@pekingspring](http://twitter.com/pekingspring), [@stevefaulkner](http://twitter.com/stevefaulkner), [@simonwiffen](http://twitter.com/simonwiffen) and all [my Twitter followers](http://twitter.com/csswizardry/followers).
-
-I think that the fact that `b` and `i` are still in the spec, are valid (even in strict) and are being carried over to HTML5 (albeit slightly redefined) indicates that there is still a very real place for them in web development right now. The frequency with which they'll be used is slim at best, but they should not be ruled out, and at the very least not misunderstood. I'm not going to make the leap myself just yet, but they are there, they are usable, and one day I might just use them.
-
-What are you going to do?
View
136 _posts/2010-01-26-a-suitable-alternativeon-proper-use-of-alt-attributes.markdown
@@ -1,136 +0,0 @@
----
-comments: true
-date: 2010-01-26 16:03:03
-layout: post
-slug: a-suitable-alternativeon-proper-use-of-alt-attributes
-title: A suitable alternative—on proper use of alt attributes
-wordpress_id: 318
-categories:
-- Web Development
-tag:
-- Accessibility
-- Images
-- Semantics
----
-
-Images in HTML come with a mandatory attribute used to _textually_ describe the information displayed _visually_ through the image. The `alt` attribute ([not tag](http://csswizardry.com/eta)) is used by screenreaders etc to tell users who can't view the actual image what it represents. It is also used in any circumstance where images can't be loaded (slow connections, broken URIs etc).
-
-
-
-
-
-
-
-## When not to use it
-
-
-
-
-You should never _not_ use an `alt` attribute, rather leave it empty, thus: `alt=""`
-
-
-
-
-The only time you can really get away with _not_ having a complete `alt` attribute is if the image holds no context or information that the user needs to be aware of. This is usually the case when the image is purely decorational, though it may be argued that the image should therefore be added through CSS in the spirit of separating style and content. By that token it is fairly safe to say that there should never be an instance in which you leave an `alt` attribute empty.
-
-
-
-
-
-## You're using it, but not quite right...
-
-
-
-
-The next best scenario is that you are using images correctly, for their correct purpose and are using `alt` attributes, but they don't really do as much as they should. A lot of the time I come across images that have less than ideal `alt` attributes.
-
-
-
-
-![A photograph of an abandoned car](http://csswizardry.com/wp-content/uploads/2010/01/car.jpg)
-
-
-
-
-Image sourced via Google Images--original author unknown.
-
-
-
-
-One example might be the above image of a car. This, while technically correct, is not ideal: `<img src="/img/car.jpg" alt="Car" />`. All this tells the user is 'Car'. It doesn't say whether it's a picture with the word car in it, or whether it's a picture of a car. A much better `alt` attribute would be `alt="A photograph of an abandoned car"` (as used in my code).
-
-
-
-
-### Other poor uses
-
-
-
-
-Another real-world example of poor `alt` attribute usage is actually on [CNN's website](http://www.cnn.com/). On their home page today (26 January, 2010) they have a series of headlines with accompanying images. The code for such a pairing looks like this:
-
-
-
-
- <code><img height="68" border="0" width="120" alt="Haiti's swanky club ->
- now home to misery" src="http://i.cdn.turner.com/cnn/2010/WORLD/ ->
- americas/01/26/haiti.camp/tzvids.haiti.aid.cnn.jpg"> ->
- … Haiti's swanky club now home to misery</code>
-
-
-
-
-This is wrong on two counts:
-
-
-
-
-
-
- 1. A screenreader will read out to the user Haiti's swanky club now home to misery … Haiti's swanky club now home to misery. Every image/headline pairing on the page is laid out like this, meaning in every instance a user using a screenreader will hear the headline twice. This will surely soon get annoying.
-
-
- 2. Secondly, the image was actually of earthquake survivors holding a large bag, nothing to do with clubs and, unfortunately, far from swanky.
-
-
-
-
-## Using the attribute properly
-
-
-
-
-On the [BBC's home page](http://www.bbc.co.uk/) however (on the same date) they are using `alt` attributes perfectly. They have an image of a woman wearing a veil, alongside the article's headline France report back face veil ban. The image's `alt` attribute: `alt="A woman wears a full-length veil in Lyon, 25 January"`.
-
-
-
-
-
-## The biggest no-no of all
-
-
-
-
-One thing which consistently winds me up is the ridiculously bad practice of stuffing `alt` attributes with keywords. `alt` attributes are an accessibility feature, end of. They are _not_ a way of slipping in keywords out of sight, and any attempt to do so is irresponsible and incredibly bad practice. The only time 'keywords' may be validly placed in `alt` attributes is if it's explicitly related to the image; for example: `<img src="/img/product.jpg" alt="A photograph of Mike's Carpets' ProClean™ carpet cleaner" />`.
-
-
-
-
-
-## How to do it properly
-
-
-
-
-Writing proper `alt` text is incredibly simple, yet a little more time consuming than the 'Car' cop-out. All you need to do is write out in full exactly what the image shows. If it's an elephant giving a donkey a piggy-back don't be lazy and use `alt="Elephant and a donkey"`. Instead, write out `alt="A photograph of an African elephant giving a donkey a piggy back across a swamp"`.
-
-
-
-
-Also, for any pages that use similar images repeatedly but are slightly different to one another, make sure your alt attributes reflect these differences. A good example would be [my portfolio page](http://csswizardry.com/portfolio/). Instead of using `alt="Screenshot"` over and over again I used text like `alt="Screenshot of Suzanna Haworth’s website"` and `alt="Screenshot of RAAMaudio UK Ltd."` etc.
-
-
-
-
-
-This is one of the most basic aspects of web development, but one that too many people are still getting wrong.
View
24 _posts/2010-01-27-the-importance-of-proper-punctuation.markdown
@@ -1,24 +0,0 @@
----
-comments: true
-date: 2010-01-27 11:44:38
-layout: post
-slug: the-importance-of-proper-punctuation
-title: The importance of proper punctuation
-wordpress_id: 462
-categories:
-- Writing
-tag:
-- Punctuation
-- Writing
----
-
-This is a short (and cheeky) post on the necessity of using proper punctuation
-&ndash; particularly the hyphen &ndash; and how it can completely alter the
-meaning of your sentence, often with ill effect. This morning, for one reason or
-another, I was reminded of a conversation I had with
-[@nofunnyname](http://twitter.com/nofunnyname) last week on the subject of him
-buying a car. He said:
-
-> I need to get an old ass banger.
-
-So, is that ‘old-ass banger’, or ‘old ass-banger’? You decide ;)
View
80 _posts/2010-01-30-the-three-types-of-dash.md
@@ -1,80 +0,0 @@
----
-comments: true
-date: 2010-01-30 17:07:43
-layout: post
-slug: the-three-types-of-dash
-title: The three types of dash
-wordpress_id: 477
-categories:
-- Typography
----
-
-Unbeknown to many, there are <del>three main</del> many types of dash, and one
-of the most common typographical mistakes is to use the wrong dash for the wrong
-job. There are actually <del>three</del> several different types of dash and
-each have their own uses. The ‘dash’ you see on your keyboard is actually a
-hyphen which is used as a ‘catch all’ glyph which is used for several purposes.
-The only reason for this is that there’s just not enough room on a keyboard for
-so many different dashes.
-
-## The em dash &mdash;
-
-The em dash (`&mdash;`)--so named because it is the width of a capital
-‘M’&mdash;is used to delimit a separate clause in a sentence&mdash;rather like
-this&mdash;or similar sub-clause structures. Often used in its place however is
-the hyphen (-). Looking at the two side by side the difference is quite clear:
-
-### Proper em dashes:
-
-The em dash (--), or m dash, m-rule, etc., often demarcates a parenthetical thought--like this one--or some similar interpolation.
-
-### Improper hyphens:
-
-The em dash (&mdash;), or m dash, m-rule, etc., often demarcates a parenthetical
-thought - like this one - or some similar interpolation.
-
-### Spaces around em dashes
-
-The proper setting of em dashes seems somewhat unclear. The ideal way to set
-them is with hair spaces (`&#8202;`) either side&#8202;&mdash;&#8202;like this.
-However, IE6 doesn’t support the hair space leaving the options of either fully
-spaced &mdash; like this, or unspaced&mdash;like this.
-
- Various means of spacing em dashes
-
- Fully Spaced
- Hair Spaced
- Un Spaced
-
- This -- is an em -- dash.
-
- This -- is an em -- dash.
-
- This--is an em--dash.
-
-## The en dash &ndash;
-
-The en dash (`&ndash;`)--so named because it is half the width of a capital 'M' (an 'n')--has altogether different uses to the em dash. The en dash is used in ranges, for example:
-
-* 6&ndash;10 years
-* July 10&ndash;August 1 2009
-* pp. 40&ndash;42
-* §§ 12&ndash;13
-
-Read [more specific guidelines](http://en.wikipedia.org/wiki/Dash#En_dash) on Wikipedia.
-
-## The hyphen
-
-The purpose of the hyphen (-) is to join two words--for example 'front-end'--and to separate syllables when splitting a long word over two lines. As previously mentioned, the hyphen is often misused in place of both the above.
-
-### The minus
-
-There is also a separate dash for the minus symbol. The proper entity for a minus symbol is simply `&minus;`.
-
-## More reading
-
-A reader of the old CSS Wizardry left me with a link to [one of his own articles](http://garyjones.co.uk/development/hyphens) covering a few _further_ variations of each.
-
- *[§§]: sections
- *[pp.]: pages
- *[IE6]: Internet Explorer 6
View
184 _posts/2010-01-31-iphone-css-tips-for-building-iphone-websites.markdown
@@ -1,184 +0,0 @@
----
-comments: true
-date: 2010-01-31 20:17:10
-layout: post
-slug: iphone-css-tips-for-building-iphone-websites
-title: iPhone CSS—tips for building iPhone websites
-wordpress_id: 489
-categories:
-- Web Development
-tag:
-- CSS
-- iPhone
----
-
-With the rapid rise in mobile browsers, it has probably never been more important to ensure your sites can be handled on these platforms. By far one of the most popular such browsers is Mobile Safari on the iPhone &ndash; this is one of the easiest browsers to develop for: it runs on Webkit (meaning a lot of rich CSS3 support) and it's only ever on one resolution and on one OS.
-
-**N.B.** This article addresses iPhone development and iPhone development only. There is no reason why you cannot or should not develop for other mobile devices and platforms, Apple or otherwise. _This just happens to be an iPhone only post_.
-
-The practical upshot of this is that you need to do no cross-browser testing, and can use all the [CSS3](/css3/) you like. This post will show you some of the basics of developing and designing websites for the iPhone and Mobile Safari.
-
-## To start
-
-The first thing to remember when developing a site to be displayed on an iPhone is that it is _very_ similar to designing a print stylesheet. _You need to linearise everything._ Make sure you have one column and everything is read in one line &ndash; straight from top to bottom. This will also put your markup writing skills to the test.
-
-Some people don't agree with browser sniffing, but you need to detect the iPhone somehow.
-
-This first bit of code is a PHP browser sniffing snippet, the actual CSS we'll use is not brought through via any server side code, we'll use some CSS media queries for that. What we'll use this code for is serving the markup with an iPhone specific meta tag and to shorten the current page's title.
-
- <?php
- $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
- if ($browser == true){
- $browser = 'iphone';
- }
- ?>
-
-What the above code does is sees if the user agent contains any instance of 'iPhone' using [the `strpos` PHP function](http://uk2.php.net/strpos). Place this piece of code at the very top of your header include, before any other markup. In order to action something if the browser _is_ an iPhone, simply use the following bit of PHP logic in the place you want it to be initiated:
-
- <?php if($browser == 'iphone'){ ?>DO THIS<?php } ?>
-
-We want people to save your site to their home screen...
-
-Now, to put that snippet to use. We want to do two things with this little piece of PHP.
-
-### Saving to the homescreen &ndash; shortening the page title
-
-First off, we'd like users to be able to save a link to your site on their home screen, this is simple enough, they simply need to select to do so from within the browser. However, if you look at the title of my home page alone, it's quite long: CSS Wizardry &ndash; CSS, Web Standards, Typography, and Grids by Harry Roberts. This would never fit underneath an icon without being shortened, so we need to serve a different title to the iPhone only. To achieve this we us the PHP snippet like so:
-
- <?php if($browser == 'iphone'){ ?>
- <title>Short iPhone only title</title>
- <?php }else{ ?>
- <title>Regular title</title>
- <?php } ?>
-
-Now, both when browsing and saving your site to their home screen, a user will only ever see the shortened version.
-
-#### The home screen icon
-
-Actually making the icon is very simple. All you need to do is upload a 57x57px icon (usually a larger version of your favicon) to your server root. The icon must be named `apple-touch-icon.png`, and the iPhone will sort the rest out. See [my icon](http://csswizardry.com/apple-touch-icon.png).
-
-### Stopping user pinch-zooming
-
-The second use for the PHP snippet is to serve the iPhone a meta tag which disables the user pinch-zoom that Mobile Safari offers:
-
- <?php if($browser == 'iphone'){ ?>
- <meta name="viewport"
- content="width=device-width,
- minimum-scale=1.0, maximum-scale=1.0" />
- <?php } ?>
-
-This means that, once we've linearised the content and sorted the font sizing, the user will only ever have to traverse down your page, much like a native app.
-
-## Beginning styling
-
-Some developers prefer to redirect iPhone users to a totally different version of the site &ndash; we won't be doing that.
-
-We could use the PHP snippet to serve the iPhone a whole new stylesheet, or even send the user to a whole new site, rather like Twitter does ([m.twitter.com](http://m.twitter.com/)). However, there's a simpler way to do it using some CSS media queries. The advantage of this is that you're simply reusing old content and pre-written markup, and only ever using one CSS file.
-
-The first thing you need to do is make sure the HTML link element that points to your main stylesheet does **not** have a `media` attribute:
-
- <link rel="stylesheet" href="/path/to/style.css">
-
-Next, we're going to use [Quick Tip #15](http://csswizardry.com/quick-tips/#tip-15) that I wrote on my Quick Tips page. This means that we can just add our iPhone styles directly onto the end of the main stylesheet, and inherit all the styles set for desktop viewing:
-
- /*--- Main CSS here ---*/
-
- /*------------------------------------*\
- $IPHONE
- \*------------------------------------*/
- @media screen and (max-device-width: 480px){
- /*--- iPhone only CSS here ---*/
- }
-
-Now any CSS before the media query will be used across all platforms, but anything between the query will be used by any screen media with a maximum screen size of 480px (i.e. an iPhone).
-
-### Things to remember
-
-There are a few key things to remember when developing CSS for the iPhone:
-
-* Avoid explicit absolute widths &ndash; where possible you should use percentage widths.
-* Linearise everything &ndash; where possible, remove all floats. We want no content side-by-side unnecessarily.
-
-The first thing to do is to set the `-webkit` proprietary CSS `-webkit-text-size-adjust` on the body which will resize the text for you, meaning you shouldn't have to touch any font sizes yourself. Also, if your body copy is set in a sans font such as Arial, now is your chance to use some Helvetica &ndash; for normal sites, Helvetica should not be used as body copy as it renders hideously on a PC. Take advantage of the fact that you can guarantee its presence and quality on an iPhone. Change your `font-family`:
-
- /*--- Main CSS here ---*/
-
- /*------------------------------------*\
- $IPHONE
- \*------------------------------------*/
- @media screen and (max-device-width: 480px){
- body{
- -webkit-text-size-adjust:none;
- font-family:Helvetica, Arial, Verdana, sans-serif;
- padding:5px;
- }
- }
-
-Above, I also added a small padding to make sure nothing touches the edge of the browser. All wrapper and content `div`s from here on in should be set to `width:100%;` making them the whole width of the screen, minus 10px.
-
-### Structure
-
-Now, as all layouts differ I am going to assume a similar one to mine, a simple two column set up with a logo and menu in the header. If your layout is different I am sure you can quite easily retrofit it. As I mentioned before, remove all stylistic `float`s and set all widths to `100%`. If you are using `div`s sensibly (i.e. for large bodies of content and not for nav items) this code should see you right for linearising the content:
-
- @media screen and (max-device-width: 480px){
- body{...}
- div{
- clear:both!important;
- display:block!important;
- width:100%!important;
- float:none!important;
- margin:0!important;
- padding:0!important;
- }
- }
-
-That will force all `div`s to rest one on top of the other, full width and in order. You have begun linearising all your content.
-
-### The navigation
-
-If you have a navigation menu in which all the items are floated and made horizontal, insert the following:
-
- @media screen and (max-device-width: 480px){
- body{...}
- div{...}
- #nav,#nav li{
- float:none!important;
- clear:both!important;
- margin:0 0 20px 0!important;
- display:block;
- padding:0;
- text-align:left!important;
- width:100%;
- }
- #nav{
- border:1px solid #ccc;
- padding:5px;
- border-radius:5px;
- }
- #nav li{
- margin:0!important;
- }
- #nav li a{
- display:block;
- }
- }
-
-This then will give you a vertical navigation menu which has a 100% width and the actual links themselves have a larger hit area (applied via `display:block;`), meaning that it's prominent at the top of each page and easier for users to select single items.
-
-### Images
-
-As images inherently have a set pixel width (i.e. their own width) there is a high chance that they will break out of the wrapper area (as a lot of images will be above 480px wide). To combat this simply add the following:
-
- @media screen and (max-device-width: 480px){
- body{...}
- div{...}
- #nav,#nav li{...}
- img{
- max-width:100%;
- height:auto;
- }
- }
-
-Other than elements very specific to my site, that is pretty much [all the CSS I use to quickly size and linearise my content](/wp-content/themes/default/style.css). Any elements specific to your own site will obviously need considering on a case-by-case basis, but if you remember to not set absolute widths and to always linearise your content then it should be a doddle. Oh and it's a great time to use some guaranteed [CSS3](/css3/).
-
-Do you have an iPhone version of your site? Have you any more tips you'd like to add? Please do so in the comments below.
View
359 _posts/2010-02-02-css-bar-charts-styling-data-with-css3-and-progressive-enhancement.markdown
@@ -1,359 +0,0 @@
----
-comments: true
-date: 2010-02-02 23:59:27
-layout: post
-slug: css-bar-charts-styling-data-with-css3-and-progressive-enhancement
-title: CSS bar charts—styling data with CSS3 and progressive enhancement
-wordpress_id: 601
-categories:
-- Web Development
-tag:
-- CSS3
-- Data Visualisation
-- Progressive Enhancement
----
-
-Bar charts in CSS are neither very new, or very difficult. Using some pretty basic styling you can force lists etc into resembling graphs and charts fairly easily. Such charts, in their most basic form, work perfectly well in displaying and presenting the data they represent. However, using some rich CSS3 and progressive enhancement, you can really start pushing the display and presentation of these normally boring documents to the next level. They are also an ideal way in which to demonstrate the power and ability of progressive enhancement.
-
-
-
-
-
-## [View demo](/demos/graphs/)
-
-
-
-
-
-
-
-**Look at the site in IE8, _then_ Firefox, _then_ Safari/Chrome.** Keep refreshing.
-
-
-
-
-I have created [a demo page](/demos/graphs/) which simply represents three items of data expressed as percentages. It is not the data itself or the numbers we are concerned with here--it is the proof of concept. The fact that this can be done on my made up data shows that you can do it too, on real life information.
-
-
-
-
-
-## Progressive enhancement
-
-
-
-
-At [Venturelab](http://venturelab.co.uk/), we decided to use progressive enhancement as a matter of course. CSS3 and designing in the browser all the way!
-
-
-
-
-Progressive enhancement is, in my opinion, one of the most exciting schools of thought web development has seen in years (though I _have_ only been in the web for three...). It is the idea whereby any non-essential features (i.e. anything whose absence will have no adverse effect on the usability or accessibility of a website) are added to the website in a _progressive_ manner--often through CSS3.
-
-
-
-
-The benchmark example is rounded corners; to apply these through old means, for example with images, would have taken a developer a substantial amount of time--time the client is paying for. It seems silly now to think that way-back-when, putting rounded corners on a `div` might have taken upward of 30 minutes, when we can apply it in about 5 seconds using `-moz-border-radius:5px;`.
-
-
-
-
-It really is a no brainer--anyone visiting the site in a browser with no CSS3 support will see square corners. Does this matter? Of course it doesn't. No one visits a site to look solely at the design--they visit for content. Does it matter to them what shape the corners of your RSS button are? No again. Progressive enhancement saves you time, and your client money.
-
-
-
-
-
-### Isn't this just graceful degradation?
-
-
-
-
-Graceful degradation = building for the best and getting worse; progressive enhancement = building to cater the worst and getting better...
-
-
-
-
-The line between progressive enhancement and graceful degradation is fine but significant. Graceful degradation is the idea that you'd build a site for, say, Firefox, then selectively break and _downgrade_ it in the likes of IE(6). Progressive enhancement takes a much more positive attitude in that you build _for_ IE(6) and then selectively _upgrade_ it in browsers like Firefox and Safari. It's no longer starting great and getting worse, it's now starting great and getting better.
-
-
-
-
-
-### Internet Explorer
-
-
-
-
-**N.B.** Only tested in IE8 as this is not a final solution, rather a proof-of-concept.
-
-
-
-
-Internet Explorer(8)'s take on my bar charts is as you'd expect from any browser, it renders it perfectly well, providing clear, accessible content, with a flawless UX and perfectly usable. _This is not bad!_ We don't need to downgrade anything, this is our starting point. It looks good and it functions perfectly. If you did as above and visited in IE8 first, you wouldn't know that there were round corners missing--because that _doesn't_ matter.
-
-
-
-
-
-![A screenshot of the CSS bar chart in Internet Explorer 8](http://csswizardry.com/wp-content/uploads/2010/02/ie.gif)
-
-
-
-
-
-### Firefox
-
-
-
-
-Next up is Firefox, where we add some round corners to the blue bars, and also a very subtle drop shadow (`text-shadow:;`) on the text. This is no more usable than before, the content is no more accessible than in IE, but it _does_ look a tad nicer.
-
-
-
-
-
-![A screenshot of the CSS bar chart in Firefox](http://csswizardry.com/wp-content/uploads/2010/02/firefox.gif)
-
-
-
-
-
-### Safari/Chrome
-
-
-
-
-It is in Webkit based browsers such as Safari and Chrome that the real magic happens. Webkit's proprietary CSS is above and beyond that of any other rendering engine...
-
-
-
-
-
-![A screenshot of the CSS bar chart in Safari](http://csswizardry.com/wp-content/uploads/2010/02/safari.gif)
-
-
-
-
-
-What if I couldn't be bothered opening Photoshop to make a subtle gradient `.gif` for the bars? No worries, use Webkit's gradient CSS. A little reflection might look nice on the bars too, but I don't fancy any superfluous markup or `.png`s to fiddle with. Ah great, Webkit has a bit of reflection CSS too.
-
-
-
-
-However, for the real show-piece, the Webkit animation. I'm not using any Javascript libraries anywhere else in the page so I don't fancy pulling a whole one in for something that won't really be missed if it's not there. I hear Webkit has animations... magic!
-
-
-
-
-
-## The code
-
-
-
-
-Now that's the theory covered, let's look at what does all this stuff... Please note, I have used some PHP to randomise the values used by the bars of the chart. As a result, some CSS appears in the source code of the PHP file, and the rest in [the page's CSS file](http://csswizardry.com/demos/graphs/css/style.css). The code shown in the examples below is condensed into one large chunk.
-
-
-
-
-### The markup
-
-
-
-
-The markup simply comprises of one uncluttered `dl`. The reasoning behind a definition list is that each item is a title, followed by some information about that title. Not only is this semantically correct, it's a nice set of elements to be working with to achieve the layout we've got.
-
-
-
-
- <code><dl id="chart">
- <dt>Sales increase this week</dt>
- <dd><span id="data-one">47%</span></dd>
- <dt>Revenue increase this week</dt>
- <dd><span id="data-two">59%</span></dd>
- <dt>Profit increase this week</dt>
- <dd><span id="data-three">26%</span></dd>
- </dl></code>
-
-
-
-
-
-That's all there is to it.
-
-
-
-
-
-### The CSS, CSS3 and progressive enhancement
-
-
-
-
- <code><span class="code-comment">/*------------------------------------*\
- CHART
- \*------------------------------------*/</span>
- #chart{
- width:520px;
- }
- #chart dt{
- width:160px;
- float:left;
- margin:0 20px 5px 0;
- padding:2px 0;
- display:inline;
- font-weight:bold;
- text-align:right;
- }
- #chart dd{
- width:339px;
- border-right:1px solid #ddd;
- float:left;
- margin-bottom:5px;
- display:inline;
- }
- #chart dd span{
- color:#fff;
- background:#09f;
- text-align:center;
- padding:2px 0;
- display:block;
-
- text-shadow:1px 1px 1px rgba(0,0,0,0.2);
- -moz-border-radius:2px;
- -webkit-border-radius:2px;
- border-radius:2px;
- background:-webkit-gradient(linear, left top, ->
- left bottom, from(#09f), to(#077fd0));
- -webkit-box-reflect:below 0 ->
- -webkit-gradient(linear, left top, ->
- left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25)));
- }
- #data-one{
- width:47%;
- }
- #data-two{
- width:59%;
- }
- #data-three{
- width:26%;
- }
- #data-one{
- -webkit-animation-name:bar-one; <span class="code-comment">/* Give the bar an animation with a
- unique name */</span>
- }
- #data-two{
- -webkit-animation-name:bar-two; <span class="code-comment">/* Give the bar an animation with a
- unique name */</span>
- }
- #data-three{
- -webkit-animation-name:bar-three; <span class="code-comment">/* Give the bar an animation with a
- unique name */</span>
- }
- #data-one,#data-two,#data-three{ <span class="code-comment">/* Define animation styles for all three
- bars at once */</span>
- -webkit-animation-duration:0.5s; <span class="code-comment">/* Animation duration in seconds */</span>
- -webkit-animation-iteration-count:1; <span class="code-comment">/* Amount of times to loop */</span>
- -webkit-animation-timing-function:ease-out; <span class="code-comment">/* Ease in, out etc. */</span>
- }
- @-webkit-keyframes bar-one{
- 0%{ <span class="code-comment">/* Define bar-one styles at 0% (0 seconds) */</span>
- width:0%;
- }
- 100%{ <span class="code-comment">/* Define bar-one styles at 100% (0.5 seconds) */</span>
- width:47%;
- }
- }
- @-webkit-keyframes bar-two{
- 0%{ <span class="code-comment">/* Define bar-two styles at 0% (0 seconds) */</span>
- width:0%;
- }
- 100%{ <span class="code-comment">/* Define bar-two styles at 100% (0.5 seconds) */</span>
- width:59%;
- }
- }
- @-webkit-keyframes bar-three{
- 0%{ <span class="code-comment">/* Define bar-three styles at 0% (0 seconds) */</span>
- width:0%;
- }
- 100%{ <span class="code-comment">/* Define bar-three styles at 100% (0.5 seconds) */</span>
- width:26%;
- }
- }</code>
-
-
-
-
-
-#### In detail
-
-
-
-
-There may well be some bits in there that you're not familiar with, particularly CSS animations. Basically, to animate an element you need to do a few things:
-
-
-
-
-
-
- 1. Assign the element an animation name. This name is the 'hook' to link an animation, defined later, to an element.
-
-
- <code>#data-one{
- -webkit-animation-name:bar-one;
- }</code>
-
-
-
-
-
- 2. Assign the element animation properties. Here you set things like duration, repetition and ease-in/out.
-
-
- <code>#data-one,#data-two,#data-three{
- -webkit-animation-duration:0.5s;
- -webkit-animation-iteration-count:1;
- -webkit-animation-timing-function:ease-out;
- }</code>
-
-
-
-
-
- 3. Set up the keyframes of the animation. Here you set the various points. Here we have one thing to animate through two states, so we simply set a beginning at 0% and and end at 100%. We could set at any percentage in between but as we just have a beginning and an end, we don't need to--Webkit sees to that.
-
-
- <code>@-webkit-keyframes bar-one{
- 0%{
- width:0%;
- }
- 100%{
- width:47%;
- }
- }</code>
-
-
-
-
-
-
-
-With regards the Webkit reflections, it may be a better idea to consult the [Surfin' Safari page on that](http://webkit.org/blog/182/css-reflections/), as anything I'd say would most likely be a poorly pulled off rehash.
-
-
-
-
-
-## Closing word
-
-
-
-
-So there you have it, a real life, justifiable and wholly appropriate application of CSS3 and progressive enhancement coupled with data visualisation. Don't be held back by the limitations of older browsers--relish in the opportunities new ones bring.
-
-
-
-
-And as a final bonus, [@VIPickering](http://twitter.com/VIPickering) requested [this (view in Safari/Chrome)](/demos/graphs/index2.php)... enjoy.
View
86 _posts/2010-02-04-upside-down-domainsregistering-an-international-domain-name.markdown
@@ -1,86 +0,0 @@
----
-comments: true
-date: 2010-02-04 15:44:17
-layout: post
-slug: upside-down-domainsregistering-an-international-domain-name
-title: Upside down domains—registering an international domain name
-wordpress_id: 672
-categories:
-- Web Development
-tag:
-- Domains
----
-
-Earlier today I registered the domain [http://ʎɹɹɐɥ.com](http://ʎɹɹɐɥ.com). Or did I? Upon reading [an article by Sam Brown](http://sam.brown.tc/entry/417/how-to-register-an-international-domain-name), which in turn linked to [an article by John Sutherland](http://sneeu.com/blog/2010/1/how-register-international-domain-name/) explaining how to register such domains, I wanted one. There are a few levels to this trickery. There's the 'Oh I totally understand how this works!', or there's the 'I don't want to know how it works, I just want it!' level.
-
-
-
-
-
-## I just want one!
-
-
-
-
-Okay, I didn't actually register` http://ʎɹɹɐɥ.com/`, I registered what you might call its alias: `http://xn--jna6b0ca7h.com`. So, by that token, you find the upside down version of your domain (mine being `harry`) via this [upside down letter converter](http://www.sevenwires.com/play/UpsideDownLetters.html), paste the result (mine being `ʎɹɹɐɥ`) into [this IDN converter](http://mct.verisign-grs.com/conversiontool/) and add whatever domain extension (mine being .com) to the resulting string (mine being `xn--jna6b0ca7h`). You then register the outcome, and you can access it via the upside down version! `http://ʎɹɹɐɥ.com/` is just an alias of `http://xn--jna6b0ca7h.com/` in a sense...
-
-
-
-
-
-If you view the source of this page you'll see the markup actually links to `http://ʎɹɹɐɥ.com/` but resolves to `http://xn--jna6b0ca7h.com/` in the status bar when you hover it.
-
-
-
-
-
-## I want details!
-
-
-
-
-If you want to actually understand the technicalities behind it, you ought to read the two articles linked previously.
-
-
-
-
-
-## Why would I need this?
-
-
-
-
-You don't, but it is cool, right? Although, you could use it as a pretty nifty short-URL for your blog on Twitter like Daring Fireball's awesome [http://?df.ws](http://?df.ws) one.
-
-
-
-
-
-### Which leads me on to...
-
-
-
-
-You don't have to have an upside down domain, you can use glyphs in there too. Grab some glyphs from [CopyPasteCharacter](http://copypastecharacter.com/) and pop those into the converter too.
-
-
-
-
-
-### Registering your domain
-
-
-
-
-This is not a plug...
-
-
-
-
-I've heard reports of people being asked about languages for the IDNs from their registrar of choice. I went with [Heart Internet](http://www.heartinternet.co.uk/) and registered `http://xn--jna6b0ca7h.com/` no trouble, just as if it was a regular domain.
-
-
-
-
-
-Be sure to comment it you buy/have bought one yourself.
View
112 _posts/2010-02-11-mutiple-column-lists-using-one-ul.markdown
@@ -1,112 +0,0 @@
----
-comments: true
-date: 2010-02-11 23:44:02
-layout: post
-slug: mutiple-column-lists-using-one-ul
-title: Multiple column lists using one &lt;ul&gt;
-wordpress_id: 701
-categories:
-- Web Development
-tag:
-- CSS
-- HTML
-- Lists
----
-
-This is a quick, simple tutorial on how to create multiple column lists by only using one `ul`. Often is the case when you'd want multiple lists side-by-side, but you end up using markup like `<ul class="col">` in order to get several lists sat next to each other. However, by simply floating `li`s left and setting their width to the correct percentage (two columns = `li{width:50%;}` and so on), you can attain a multiple column list pretty easily.
-
-
-
-
-
-## [View demo](http://csswizardry.com/demos/multiple-column-lists/)
-
-
-
-
-
-
-
-The trick here is to force the list to break at the right point. If you want two columns, you need to float the list items left and set them at 50% width, therefore the list items will only ever fit two side-by-side, then begin again on the row beneath. By that token, three columns would require a width of 33% and floated left, four would be 25% and so on.
-
-
-
-
-
-## The code
-
-
-
-
-Both the markup and CSS for this is incredibly simple, nothing fancy, no CSS3, nothing progressive, just basic styling applied to lean markup.
-
-
-
-
-### The markup
-
-
-
-
-The markup for this is just a simple `ul`, thus:
-
-
-
-
- <code><ul id="double"> <span class="code-comment"><!-- Alter ID accordingly --></span>
- <li>CSS</li>
- <li>XHTML</li>
- <li>Semantics</li>
- <li>Accessibility</li>
- <li>Usability</li>
- <li>Web Standards</li>
- <li>PHP</li>
- <li>Typography</li>
- <li>Grids</li>
- <li>CSS3</li>
- <li>HTML5</li>
- <li>UI</li>
- </ul></code>
-
-
-
-
-
-And to make this into a multiple column list:
-
-
-
-
-
- <code>ul{
- width:760px;
- margin-bottom:20px;
- overflow:hidden;
- border-top:1px solid #ccc;
- }
- li{
- line-height:1.5em;
- border-bottom:1px solid #ccc;
- float:left;
- display:inline;
- }
- #double li { width:50%;} <span class="code-comment">/* 2 col */</span>
- #triple li { width:33.333%; } <span class="code-comment">/* 3 col */</span>
- #quad li { width:25%; } <span class="code-comment">/* 4 col */</span>
- #six li { width:16.666%; } <span class="code-comment">/* 6 col */</span></code>
-
-
-
-
-
-## When to use this
-
-
-
-
-Use this wisely... It displays content in an ambiguous manner and should not be used where order of reading is imperative.
-
-
-
-
-This method should only be used if the lists content doesn't require any specific ordering as the markup is written linearly and the list is displayed in a matrix. As you can see, the way the content is displayed means it can be read across»down»across or down»up»down. This means that the way you write your content is not necessarily the way it will be read. In [my example](/demos/multiple-column-lists/) this isn't an issue, as the content can safely be read in any order.
View
123 _posts/2010-02-19-typographic-phrases-or-how-to-turn-sayings-geeky.markdown
@@ -1,123 +0,0 @@
----
-comments: true
-date: 2010-02-19 09:46:28
-layout: post
-slug: typographic-phrases-or-how-to-turn-sayings-geeky
-title: 'Typographic phrases (or: how to turn sayings geeky)'
-wordpress_id: 780
-categories:
-- Typography
-- Web Development
-- Writing
-tag:
-- Design
-- Development
-- Writing
----
-
-A while ago I had the idea to express some old sayings in a silly, geeky way, using code and logic to express logically, the meaning behind some well known phrases. I got Illustrator fired up last night and decided to finally got a few made. They're kind of obvious really, even a non-developer brain can make sense of them, and deciphering the saying is pretty simple, but I think they're cool nonetheless.
-
-
-
-
-
-## Many hands make light work
-
-
-
-
-![Many hands make light work](http://csswizardry.com/wp-content/uploads/2010/02/many-hands.jpg)
-
-
-
-
-
-There are lots of contradictions in sayings and phrases. Like this one, if many hands do make light work, then how does this next one work?
-
-
-
-
-
-## Too many cooks spoil the broth
-
-
-
-
-![Too many cooks spoil the broth](http://csswizardry.com/wp-content/uploads/2010/02/too-many-cooks.jpg)
-
-
-
-
-
-## A stitch in time...
-
-
-
-
-![A stitch in time saves nine](http://csswizardry.com/wp-content/uploads/2010/02/a-stitch-in-time.jpg)
-
-
-
-
-
-## While the cat is away...
-
-
-
-
-![While the cat is away the mice will play](http://csswizardry.com/wp-content/uploads/2010/02/while-the-cat-is-away.jpg)
-
-
-
-
-
-## Absence makes the heart grow fonder vs. time is a great healer
-
-
-
-
-![Absence makes the heart grow fonder vs. time is a great healer](http://csswizardry.com/wp-content/uploads/2010/02/absence.jpg)
-
-
-
-
-
-This one is another glaring contradiction, so I decided to combine the two into one poster.
-
-
-
-
-
-## Out of sight, out of mind
-
-
-
-
-![Out of sight, out of mind](http://csswizardry.com/wp-content/uploads/2010/02/out-of-sight.jpg)
-
-
-
-
-
-## Two wrongs don't make a right
-
-
-
-
-This one doesn't really follow the code paradigm, but I thought I'd include it anyway.
-
-
-
-
-![Two wrongs don't make a right](http://csswizardry.com/wp-content/uploads/2010/02/two-wrongs.jpg)
-
-
-
-
-
-Got any more that would work in this way? Leave any suggestions in the comments.
-
-
-
-
-Also, I do realise that, programmatically, not all of these posters make perfect sense. For example, `$cooks > 'enough'` doesn't really work in a programming sense... It's just a bit of fun!
View
31 _posts/2010-02-24-type-tipsquick-tips-on-all-things-web-typography.markdown
@@ -1,31 +0,0 @@
----
-comments: true
-date: 2010-02-24 09:42:13
-layout: post
-slug: type-tipsquick-tips-on-all-things-web-typography
-title: Type tips—quick tips on all things web typography
-wordpress_id: 805
-categories:
-- Projects
-- Typography
-tag:
-- Design
-- Tips
-- Tricks
----
-
-Yesterday I released [Type Tips](/type-tips/), a collection of short and simple tips to take your web typography to the next level. The project has been some time in the making, with me first mentioning it [back in early January](http://twitter.com/csswizardry/status/7560350672). For one reason or another I only got started on the project last night, but I ploughed through and released a first version within a few hours.
-
-
-
-
-
-[![A screenshot of type tips](http://csswizardry.com/wp-content/uploads/2010/02/type-tips.jpg)](/type-tips/)
-
-
-
-
-
-
-
-I hope Type Tips comes in useful for you, and that the information in there is of some notable value. If you do like it, please share it by tweeting the link, I'd appreciate it. Any other thoughts? Just drop me a comment...
View
36 _posts/2010-02-28-suzanna-haworth-redesign.markdown
@@ -1,36 +0,0 @@
----
-comments: true
-date: 2010-02-28 17:40:52
-layout: post
-slug: suzanna-haworth-redesign
-title: Suzanna Haworth Photography redesign
-wordpress_id: 834
-categories:
-- Portfolio
-- Web Development
-tag:
-- Design
-- Development
-- Photography
-- Redesign
-- Wordpress
----
-
-Having only put the first version of Suze's site live [a few months ago](http://csswizardry.com/2009/12/suzanna-haworth-photography/), we both decided it needed a whole new approach. Originally a static site, built with my own PHP framework, it relied on manual updates from me, which meant that for the sake of efficiency updates had to happen once there was enough content to upload; ergo not very often. After porting CSS Wizardry over to Wordpress and being very impressed, I decided that was the best approach for Suze too. This meant she could update her own site as often as she wanted.
-
-
-
-
-
-[![A screenshot of Suzanna's new site](http://csswizardry.com/wp-content/uploads/2010/02/suze-site.jpg)](http://suzannahaworth.com/)
-
-
-
-
-
-Also, [follow Suze on Twitter](http://twitter.com/suzehaworth).
-
-
-
-
-As the site was built very quickly, we are adapting it as it grows and fixing any bugs as they happen. Let me know if you find anything astray. Anyway, enough talking, [go look for yourselves](http://suzannahaworth.com/)!
View
48 _posts/2010-02-28-usability-in-everyday-items.markdown
@@ -1,48 +0,0 @@
----
-comments: true
-date: 2010-02-28 17:04:19
-layout: post
-slug: usability-in-everyday-items
-title: Usability in everyday items
-wordpress_id: 815
-categories:
-- Usability
----
-
-Yesterday when <del>being dragged around shops by</del> out shopping with my girlfriend [Suzanna](http://suzannahaworth.com/), we were walking down a shampoo/haircare isle when I asked 'Is it shampoo or conditioner where the lid is on the bottom of the bottle, as opposed to the top?' Suze answered my question with 'Conditioner has the lid on the bottom, shampoo on the top, but I don't know why'. I knew why...
-
-
-
-
-
-## The shampoo lid
-
-
-![A photograph of matching bottles of shampoo and conditioner, illustrating lid differences](http://csswizardry.com/wp-content/uploads/2010/02/shampoo.jpg)
-
-
-Imagine the scenario, you're a girl with long hair and you're washing it in the shower. Your hair is in your eyes, and covered in shampoo. Opening your eyes would lead to some serious stinging! You reach down and below you, by your feet, you have two identical bottles--except they're not identical... One has its lid on the top and the the other has its lid on the bottom. As long as you've learnt which one's which, as my girlfriend clearly has, you know without having to open your eyes which bottle you have hold of. This is a really ingenious piece of usability, yet so so simple.
-
-
-
-
-
-
-
-## The vacuum cleaner
-
-
-
-
-Another great bit of usability I saw was in Suzanna's vacuum cleaner. It has a retractable cable which rests inside the body of the cleaner when it's being stored. When pulling the cable out to plug it in, when you are roughly a metre away from reaching its furthest limit of extension, you see a yellow marker on it. This indicates that something must be about to happen, and then when you pull that extra metre out, there is a red marker to signify that this is a far as the cable will extend. This means that there's no chance of accidentally pulling the cable out too far and damaging it if under the impression that there's more wire in there. Simple, but _so_ helpful.
-
-
-
-
-
-### The lesson?
-
-
-
-
-A lot of the time, the best way to make something usable is to imagine yourself using it--what would _you_ want out of it? Because nine times out-of ten someone else would appreciate that feature too.
View
83 _posts/2010-03-02-a-quick-note-on-border-radius.markdown
@@ -1,83 +0,0 @@
----
-comments: true
-date: 2010-03-02 10:34:55
-layout: post
-slug: a-quick-note-on-border-radius
-title: A quick note on border radius
-wordpress_id: 853
-categories:
-- Web Development
-tag:
-- Border Radius
-- CSS3
----
-
-This is a quick post concerning the `border-radius` CSS3 property, and the syntax behind it. After coming across [this site](http://www.border-radius.com/) earlier today via [Twitter](http://twitter.com/csswizardry) I remembered my initial frustrations with lack of uniformity across user agents and their required syntax in order to create round corners; Firefox requiring a different format to Webkit and the CSS3 spec was pretty annoying.
-
-
-
-
-
-
-
-However, it's not all that bad. As border-radius.com would have you believe, the syntax to create an element with top-left and bottom-right corners with a 50px round, and top-right and bottom-left corners with 10px rounds would be:
-
-
-
-
-
- <code>-webkit-border-radius: 50px;
- -webkit-border-top-right-radius: 10px;
- -webkit-border-bottom-left-radius: 10px;
- -moz-border-radius: 50px;
- -moz-border-radius-topright: 10px;
- -moz-border-radius-bottomleft: 10px;
- border-radius: 50px;
- border-top-right-radius: 10px;
- border-bottom-left-radius: 10px;</code>
-
-
-
-
-
-Wrong, you can actually use the `border-radius` shorthand to nail this in three lines:
-
-
-
-
-
- <code>-moz-border-radius:50px 10px 50px 10px;
- -webkit-border-radius:50px 10px 50px 10px;
- border-radius:50px 10px 50px 10px;</code>
-
-
-
-
-
-The syntax follows the following rule: `border-radius:top-left top-right bottom-right bottom-left;`. I've tested this in Firefox (`-moz-border-radius`), Webkit (`-webkit-border-radius`) and Opera (`border-radius`) and [it works just fine](http://csswizardry.com/demos/border-radius/).
-
-
-
-
-
-## Addendum
-
-
-
-
-You'd think Webkit would just be Webkit, right? Wrong. This works in Chrome but _not_ Safari. I've had reports that Safari 4.0.4 (I guess it's _not found it_, get it? Oh never mind.) doesn't work. Useful...
-
-
-
-
-Still, this version will work, and is still considerably shorter:
-
-
-
-
-
- <code>-webkit-border-radius: 50px;
- -webkit-border-top-right-radius: 10px;
- -webkit-border-bottom-left-radius: 10px;
- -moz-border-radius:50px 10px 50px 10px;
- border-radius:50px 10px 50px 10px;</code>
View
113 _posts/2010-03-02-moving-forward-is-holding-us-back.markdown
@@ -1,113 +0,0 @@
----
-comments: true
-date: 2010-03-02 22:03:28
-layout: post
-slug: moving-forward-is-holding-us-back
-title: Moving forward is holding us back
-wordpress_id: 840
-categories:
-- Web Development
-tag:
-- Accessibility
-- iPhone
-- Optimisation
----
-
-For years, web developers have been looking forward to that next feature, that new and monumental shift which has allowed them to break away from the shackles of obsolescence and adopt new and forward thinking technologies. But it is beginning to come full circle--that thirst for new technology has slowly brought us back to square one, reimposing the constraints that we have, for years, tried to rid ourselves of. _Moving forward is holding us back_.
-
-
-
-
-
-
-
-Okay, okay. That was a very alarmist intro. There is no web developers' apocalypse around the corner (not that I know of anyway, please don't take anything I say about the apocalypse as read. I don't want that responsibility.), nor are we going to have to regress to using tables and spacer GIFs again. The real issue here is that with all this new technology that keeps emerging and exciting web developers is unwittingly reimposing the restrictions of yesteryear...
-
-
-
-
-
-## Screen resolutions
-
-
-
-
-Remember trying to break away from 800x600px?
-
-
-
-
-With the movement toward a more mobile web, screen resolutions are in fact getting smaller. The iPhone's maximum resolution is 480px, increasingly popular netbooks are set at about 1024px wide. Such a shift toward mobile and portable devices mean that screen sizes are actually getting _smaller_.
-
-
-
-
-In my opinion, [iPhones and other mobile devices should be handled separately](http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/), serving them device specific CSS. Netbooks on the other hand are still 'desktop' machines like any other. Their smallness is their key feature, and at 1024px horizontal resolution, they aren't that small anyway...
-
-
-
-
-With [the 960 Grid System](http://960.gs/), and [an optimum line length of 52-78 characters](http://csswizardry.com/type-tips/#tip-09), sticking to 1024px shouldn't be that difficult anyway. I believe that although desktop monitor sizes are generally getting larger, other equally important technologies are creeping up, and as responsible developers you should cater for them. Sure you may want to start adopting [the 1080 grid](http://sam.brown.tc/entry/379/the-new-massive-blue), which is all well and good if you know your audience, but to cater for the majority, we're _not ready to burst 1024 yet_.
-
-
-
-
-
-## Connection speeds
-
-
-
-
-Remember building for 56k dial up connections? (I don't)
-
-
-
-
-Where permanent and fixed connections are getting much faster, connections to mobile devices through means such as 3G are _much_ slower. The ability to optimise sites to be fast loading over such connections is getting more important. As edge-case resolutions are getting smaller, edge-case connections are getting slower. Much slower.
-
-
-
-
-
-### A word on Flash
-
-
-
-
-Remember [2Advanced](http://www.2advanced.com/)? A site of yesteryear...
-
-
-
-
-Flash seems to be dying a death anyway these days, slowly being superseded by Javascript and Canvas et al. However, what was once a fantastically powerful technology has been ousted completely from Apple's _i_ products, making in an inviable option for content which needs to be universally accessible.
-
-
-
-
-
-### A real life example?
-
-
-
-
-Anyone with an iPhone will know what I mean--spending any amount of time on an iPhone loading poorly optimised sites is a real grind, and via some sensible optimisation these problems can be easily alleviated.
-
-
-
-
-However, a more interesting example might be the one that happened to myself... When [we first started at Venturelab](http://csswizardry.com/2010/01/pastures-newfrom-sense-to-venturelab/) we really were building the company from the ground up. For the first few weeks we were without desktop machines _and_ internet. I was working on a 10.1″ netbook with a screen resolution of 1024x600px, and over a poor 3G connection via a dongle.
-
-
-
-
-> "Accessibility isn't just about disabilities, it's about varying degrees of ability to access content."
-
-
-
-
-Working in this manner really made me wonder whether enough people are delivering content in a manner which is accessible on numerous levels. Accessibility isn't just about disabilities, it's about varying degrees of ability to access content. As responsible developers your content should be accessible through a full spectrum of means and in an acceptable manner.
-
-
-
-
-All it takes is some decent optimisation (which is also set to reap SEO benefits) and a reasonable page layout and you're already halfway there.
View
58 _posts/2010-03-08-30-days-without-an-iphone.markdown
@@ -1,58 +0,0 @@
----
-comments: true
-date: 2010-03-08 12:15:17
-layout: post
-slug: 30-days-without-an-iphone
-title: 30 days without an iPhone
-wordpress_id: 1077
-categories:
-- Personal
-tag:
-- Insurance
-- iPhone
----
-
-As of 6 February, 2010, I have been without my iPhone. It's been
-unbelievably difficult for me, as a web developer and geek, to
-properly function without it. You do not realise how reliant
-everyone is upon technology until you lose it. Unsurprisingly it is
-really quite hard going from having the whole internet at your
-call and fingertips, to going to a big, archaic pre-iPhone piece
-of rubbish. If this experience taught me one thing though, I am
-very dependent on technology, simply just to wile away the time;
-even sat in bed, my iPhone was a major part of me seeing what
-revelations the web had in store.
-
-
-
-
-
-
-
-## Do I need an iPhone?
-
-
-
-
-Of course I don't, but I do have one, and that's what I'm used to. However, after a few days I kind of got used to, and almost enjoyed (_almost_) not being connected to the internet, the internet that I spend 8+ hours a day sat connected to.
-
-
-
-
-
-### The problem
-
-
-
-
-Sure, the first few days were okay. And I had bought into a policy whereby the damaged item is replaced in 48 hours. I rang up and was told the it would in fact take 10-12 days. It took 30. Anyone who owns an iPhone surely knows that that just isn't easy.
-
-
-
-
-The insurers name? Read the opening paragraph again, closely ;) Shh...
-
-
-
-
-Anyway, anyone [following](http://snapbird.org/csswizardry/timeline/iphone) [me](http://snapbird.org/csswizardry/timeline/insurance) [on Twitter](http://twitter.com/csswizardry) will know that this whole farce has really wound me up, with error after error on the insurers part. You will also know that I have refused to name them. This was for the sake of professionalism, while ever they were messing around, and I was keeping it amicable, they were 100% in the wrong, nothing could come back to me, nor could my actions influence theirs (i.e. me being rude making them even slower etc.). It didn't really work to my advantage, but still, better that than be a rude shouty b*stard to them, eh?
View
135 _posts/2010-04-07-building-sites-without-using-ids-or-classes.markdown
@@ -1,135 +0,0 @@
----
-comments: true
-date: 2010-04-07 12:17:09
-layout: post
-slug: building-sites-without-using-ids-or-classes
-title: Building sites without using IDs or classes
-wordpress_id: 1216
-categories:
-- Web Development
-tag:
-- CSS
-- CSS3
-- HTML
-- Semantics
----
-
-This morning, for one reason or another, I decided to have a go at coding up a page without using any IDs or classes in my markup, and therefore none in my CSS. I'm not sure why I tried it, I guess I just did... In order to make it a fairly painless job I dove straight into the browser and coded up a simple header, footer, two column layout. [View the demo](/demos/sites-without-ids-classes/) and be sure to view the source.
-
-
-
-
-
-
-
-Using a combination of more advanced selectors such as sibling and `nth-of-type` you can target elements based on their position in the markup rather than a given name. The practical upshot of this is that your markup is much leaner and cleaner, removing class and ID names has a notable impact.
-
-
-
-
-
-## Using advanced selectors
-
-
-
-
-For a complete list please see [http://www.w3.org/TR/css3-selectors/](http://www.w3.org/TR/css3-selectors/)
-
-
-
-
-The more advanced selectors take information about an element to determine whether it matches a certain criteria, for example `body>div` will target a `div` that is a direct and immediate descendant of the `body`; `p+p` will target a paragraph immediately preceded by a paragraph.
-
-
-
-
-On this basis, you could select (for example) your main content `div` by knowing that it's the second `div` in your content wrapper: `body>div div:nth-of-type(2)`. Broken down we have:
-
-
-
-
-
-
- * `body`--sets the root
-
-
- * `>div`--the first `div` inside the body (the wrapper `div`)
-
-
- * `div:nth-of-type(2)`--the second `div` in the wrapper (just after the header `div`).
-
-
-
-
-
-## Why I think this won't catch on
-
-
-
-
-For the time being, let's completely disregard that Internet Explorer completely disregards these selectors...
-
-
-
-
-As you can see from the above example, targeting the single, lone, unique content `div` has taken two advanced selectors and 27 bytes. The selectors are fixed, the content `div` will always have to be the second `div` in the `div` that is an immediate child of the `body`. This is incredibly restrictive. Surely `#content{…}` is far better than `body>div div:nth-of-type(2){…}`…?
-
-
-
-
-For the sake of ease, instead of rambling about pros and cons, I've simply drawn up a list of advantages and disadvantages:
-
-
-
-
-### Advantages:
-
-
-
-
-
-
- * Leaner markup.
-
-
- * Promotes more sensible structuring of code.
-
-
- * Promotes semantics.
-
-
-
-
-### Disadvantages:
-
-
-
-
-
-
- * Difficult syntaxes to remember.
-
-
- * Extremely restrictive--elements are styled based on their location meaning that any moving/restructuring means all styles tied to an element are lost. This leads me on to...
-
-
- * The CSS is no longer just describing style, it also describes structure. CSS is a styling language, not a markup one.
-
-
- * Arbitrary elements such as images and `div`s that change depending on page content (blog posts for example) aren't fixed enough to be styled based on their structure. This means that any variable content will require IDs and classes anyway, so you might as well us them across the board as opposed to a mix of with and without.
-
-
- * Difficult to understand. I wrote [the CSS for the demo page](/demos/sites-without-ids-classes/css/style.css) and I'm having a hard enough time doing the calculations to work out what does what. Imagine inheriting that!
-
-
- * Jenga. As soon as you alter your markup, the structure dependent CSS will come falling down too, what might be the first child might become the second, making the second child the third and so on, creating a domino effect.
-
-
-
-
-### Final word
-
-
-
-
-While the more advanced CSS(3) selectors are impressive, and incredibly powerful, they aren't flexible enough to allow any large dependency upon them. That, and they're more awkward to understand than the tried and tested ID/class 'hooks' we know and use. There are far too many downsides to make cleaner markup a big enough plus-side in my opinion... Oh, and Internet Explorer doesn't seem to honour any of them, but that can't have come as much of a surprise.
View
122 _posts/2010-08-09-semantics-and-sensibility.markdown
@@ -1,122 +0,0 @@
----
-comments: true
-date: 2010-08-09 16:34:46
-layout: post
-slug: semantics-and-sensibility
-title: Semantics and sensibility
-wordpress_id: 1309
-categories:
-- Web Development
-tag:
-- HTML
-- Markup
-- Semantics
----
-
-For a while now, sensible naming conventions and semantics have been confused. Things such as `class="left"` or `class="clear"` have been deemed insemantic, whereas in reality, semantics really doesn't stretch that far… Let me illustrate with some code examples:
-
-
-
-
-
-## Insemantic code
-
-
-
-
-The following code is just plain wrong, it's insemantic, using the wrong elements for the wrong job:
-
-
-
-
- <code><div class="nav-link"><a href="/">Home</a></div>
- <div class="nav-link"><a href="/about/">About</a></div>
- <div class="page-title">About</div>
- <div>This is some page text about some stuff...</div></code>
-
-
-
-
-
-## Insensible code
-
-
-
-
-This code is perfectly semantic, it just uses some silly classes:
-
-
-
-
- <code><div class="border">
- <h2 class="red">This is a heading</h2>
- </div></code>
-
-
-
-
-
-## Semantics concerns itself with elements...
-
-
-
-
-...and not the names assigned to them. Using the correct element for the correct job is as far as semantics goes. Standards concerning naming of those elements is all about _sensibility_.
-
-
-
-
-
-Semantics sets a standard from which it is very difficult to stray. Headings are marked up with a `<h1-6>`, a list with `<ul/ol/dl>` and so on. You cannot, however, define a convention for naming the IDs and classes of these. `<div id="contact">`, `<div id="kontact">` and `<div id="contact-info">` all bear different names, but are all equally as semantic. All three are examples of semantic _and_ sensible code.
-
-
-
-
-
-However, take the following examples: `<div id="bottom">`, `<div id="lower-area">` and `<div id="b">`. These examples exhibit semantic code, but with insensible namings.
-
-
-
-
-
-### Be sensible, for our sake
-
-
-
-
-Semantics should be adhered no matter what--web standards are good. Naming however is totally down to you, you can call your elements whatever you wish. `<div id="a">`, `<div id="b">` and `<div id="c">` are all possible, but not sensible.
-
-
-
-
-
-> "Always code like you're working in a team, even when you're not."
-
-
-
-
-
-I have actually seen markup like this, and the developer's reasoning was 'I like to keep my markup as lean as possible, and I know what `a`, `b` and `c` do'.
-
-
-
-
-While this is all correct, and passable, it's not really very sensible. He might know what `a`, `b` and `c` do, but what about the person who inherits the project? For all his justification of code bloat was somewhat advanced (_really_ decreasing markup size), the impression the next guy to see his code will have will be 'WTF was this guy thinking?!' Always code like you're working in a team, even when you're not.
-
-
-
-
-
-## Final word
-
-
-
-
-
-> "An ID/class should be as short as possible but as long as necessary.--[Jens Meiert](http://meiert.com/en/blog/20090617/maintainability-guide/)
-
-
-
-
-
-Semantics and sensibility are not the same. Anyone who tells you that `class="left"` is insemantic is wrong. Be semantic and be sensible. Pick names which are descriptive. An ID/class should be as short as possible but as long as necessary.
View
105 _posts/2010-08-31-zebra-striping-rows-and-columns.markdown
@@ -1,105 +0,0 @@
----
-comments: true
-date: 2010-08-31 20:54:01
-layout: post
-slug: zebra-striping-rows-and-columns
-title: Zebra-striping rows and columns
-wordpress_id: 1343
-categories:
-- Web Development
-tag:
-- CSS
-- Tables
-- Usabiliy
----
-
-Zebra-striping tables is certainly not a new thing; it has been done and discussed for years. They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another. I say allegedly, there has been research into their effectiveness, conducted by [Jessica Enders](http://twitter.com/Formulate) over at [A List Apart](http://www.alistapart.com/articles/zebrastripingdoesithelp/) which proved pretty inconclusive.
-
-
-
-
-
-Striping a table's alternate rows couldn't be simpler. By programatically adding a class of `odd` or suchlike to every other `<tr>` you can then apply styles to this row (usually a pale background colour) and create zebra-stripes. An even better method would be to ditch the extraneous class and use the `nth-of-type` selector, thus:
-
-
-
-
-
- <code>tbody tr:nth-of-type(odd){
- background:rgba(255,255,136,0.5); <span class="code-comment">/* Pale yellow with 50% opacity */</span>
- }</code>
-
-
-
-
-
-What the `nth-of-type selector` is doing here is looking for every odd `<tr>` in the `<tbody>`, that is to say the 1st, 3rd, 5th, 7th and so on.
-
-
-
-
-
-By understanding this, we can apply that logic to create zebra-striped columns, too. Thus:
-
-
-
-
-
- <code>tbody td:nth-of-type(odd),
- thead th:nth-of-type(odd){
- background:rgba(255,255,136,0.5);
- }</code>
-
-
-
-
-
-**Above:** Here we target every other <th> in the <head>, and <td> in the <tbody>.
-
-
-
-
-
-We can also combine the two, to create a table where every other row and every other column is striped simultaneously, and by using the `rgba()` colour declaration we can effectively layer the stripes, therefore showing where they cross over. The code for this simply combines the two:
-
-
-
-
-
- <code>tbody td:nth-of-type(odd),
- tbody tr:nth-of-type(odd),
- thead th:nth-of-type(odd){
- background:rgba(255,255,136,0.5);
- }</code>
-
-
-
-
-
-## [You wanna see a demo?](/demos/zebra-striping/)
-
-
-
-
-Sure thing, [here you go...](/demos/zebra-striping/)
-
-
-
-
-
-## Addendum
-
-
-
-
-After questions about browser support, I have decided to add a little onto the article...
-
-
-
-
-The selectors involved here are only supported in CSS3 capable browser, that is to say pretty much anything but Internet Explorer. However, due to zebra-striping's negligible benefits and inherently progressive nature, I don't feel that it is a feature that is important enough to warrant full cross-browser support. Research shows that tables are just as usable without zebra-striping as with, therefore in IE et al, the user is not receiving a sub-par experience.
-
-
-
-
-Of course if you do want to support Internet Explorer, you can always revert to programmatically adding an `odd` class to `<tr>`, `<th>` and `<td>` elements.
View
106 _posts/2010-09-05-set-then-unset.markdown
@@ -1,106 +0,0 @@
----
-comments: true
-date: 2010-09-05 17:53:29
-layout: post
-slug: set-then-unset
-title: Set then unset (or reset...?)
-wordpress_id: 1364
-categories:
-- Web Development
-tag:
-- CSS
----
-
-There are countless tutorials on the Internet that preach about exactly how you should write your CSS. From trying to enforce single-line syntax, to specifying the number of spaces you should use and where, I wholeheartedly disagree with any articles of this kind. Your CSS can look however you choose, it just has to be readable, sensible and efficient.
-
-
-
-A method I've recently become fond of requires the mass setting and tactical unsetting of style rules across elements. I've been toying with a way of explaining this method for a few days now, but I just can't think of a way to word it. I'll have to rely on code examples, instead...
-
-Take the following, long winded way of styling a `<h1>` and a `<h2>`:
-
-
-
- <code>h1{
- font-family:Helvetica, Arial, sans-serif;
- font-size:2em;
- font-weight:bold;
- margin-bottom:20px;
- }
- h2{
- font-family:Helvetica, Arial, sans-serif;
- font-size:1.5em;
- font-weight:bold;
- margin-bottom:20px;
- }</code>
-
-
-
-This of course could be written as the much more condensed:
-
-
-
- <code>h1,h2{
- font-family:Helvetica, Arial, sans-serif;