Smashing Daily #28: Hyphens, Subpixels, Shiny Things
“Applying Macrotypography For A More Readable Web Page1”
Here’s an interesting article about macrotypography and how it can have a positive influence on readability. The article is filled with examples. The weird thing is that it is pretty hard to see the differences in each step of the process—but if you compare the initial design to the end result, the difference is clear. A very good article on design by Nathan Ford. Every Web designer should definitely read it and understand it.
“Content Choreography in practice4”
A while ago Trent Walton wrote about content choreography, the idea that the source order of a Web page might not always be in the optimal visual order. Jordan Moore experimented a bit with this idea and created a nice demo which uses flexbox.
“Pure CSS scrolling shadows with background-attachment: local6”
Here’s a great visual CSS trick you can use when you have a section of your page that may or may not scroll, depending on the content. Lea Verou explains how it works. Looks great, and it works in many modern browsers.
“Mocking Up Is Hard To Do7”
The people at Bearded have decided to stop making mock-ups in Photoshop. In this article they explain why, and how they are doing it now. I especially like the first reason they give as to why mock-ups in Photohsop are attractive.
“Hiding visible content from screen readers with aria-hidden9”
Hiding content from everybody is easy (we know how to hide content from sighted users while showing it to screen readers). But how do you hide content from screen readers while keeping it visible in graphic browsers? Roger Johansson explains.
“Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap10”
On international websites, on websites where content changes a lot and on websites with a fluid of responsive layout you want to be able to use hyphens to break words. This used to be impossible (or at least, that’s what we thought). Roger Johansson explains how it works.
The Opera Developer Relations Team created this great collection of shiny demos—things that you can do with current Web technologies in (many) modern Web browsers. There’s some excellent stuff in here—as you might expect—like the hilarious Hixie Keyboard12, and the incredible Real Life Color Picker13 which creates a pallet using your webcam (probably only works in Opera). Some amazing things in here, well worth your time!
- 1 http://www.smashingmagazine.com/2012/05/02/applying-macrotypography-for-readable-web-page/
- 2 http://www.smashingmagazine.com/2012/05/02/applying-macrotypography-for-readable-web-page/
- 4 http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
- 5 http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
- 6 http://lea.verou.me/2012/04/background-attachment-local/
- 7 http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do
- 8 http://bricss.net/post/22718920352/subpixel-layout-coming-to-webkit
- 9 http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/
- 10 http://www.456bereastreet.com/archive/201204/automatic_line_breaks_in_narrow_columns_with_css_3_hyphens_and_word-wrap/
- 11 http://www.shinydemos.com/
- 12 http://www.shinydemos.com/hixie-keyboard/
- 13 http://www.shinydemos.com/color-picker/
- 14 http://www.shinydemos.com/
- 15 www.smashingmagazine.com/the-smashing-daily-archive/
- 16 www.smashingmagazine.com/the-smashing-daily-archive/