Smashing Daily #28: Hyphens, Subpixels, Shiny Things

In this edition of The Smashing Daily we have an incredible article with an almost invisible (but very important) technique, articles on JavaScript, CSS, accessibility, design and workflow, an an amazing collection of shiny things. Enjoy!

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.

Good text layout2

CSS media queries in JavaScript, Part 23
Media queries in JavaScript… we often need them, but how do they work? Nicholas Zakas wrote this second article on a rather complex subject.

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.

Contentchoreography5

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.

Subpixel layout coming to WebKit8
Subpixels layout is a good thing, and Lennart Schoors explains why, in yet another handy bite-sized Bricss.

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.

Last Click

Shiny Demos11
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!

Shiny demos14

Previous Issues15

For previous Smashing Daily issues, check out the Smashing Daily Archive16.

Footnotes

  1. 1 http://www.smashingmagazine.com/2012/05/02/applying-macrotypography-for-readable-web-page/
  2. 2 http://www.smashingmagazine.com/2012/05/02/applying-macrotypography-for-readable-web-page/
  3. 3 http://www.nczonline.net/blog/2012/01/19/css-media-queries-in-javascript-part-2/
  4. 4 http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
  5. 5 http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
  6. 6 http://lea.verou.me/2012/04/background-attachment-local/
  7. 7 http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do
  8. 8 http://bricss.net/post/22718920352/subpixel-layout-coming-to-webkit
  9. 9 http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/
  10. 10 http://www.456bereastreet.com/archive/201204/automatic_line_breaks_in_narrow_columns_with_css_3_hyphens_and_word-wrap/
  11. 11 http://www.shinydemos.com/
  12. 12 http://www.shinydemos.com/hixie-keyboard/
  13. 13 http://www.shinydemos.com/color-picker/
  14. 14 http://www.shinydemos.com/
  15. 15 www.smashingmagazine.com/the-smashing-daily-archive/
  16. 16 www.smashingmagazine.com/the-smashing-daily-archive/

Vasilis van Gemert is the Principal Front-end Developer at Mirabeau in The Netherlands and a board member of Fronteers. His aim is to close the gap between design and (front-end) development. He believes the excess of knowledge he has can be better used by others, by more creative and smarter people. You can follow him on Twitter.

Advertising
  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top