In this edition of The Smashing Daily we have links about accessibility, responsive design workflow, working with complex CSS, about other ways to look at responsive layouts, and there’s even a clever font that replaces words with symbols. Enjoy!
This is an excellent presentation about the responsive design process by Pon Kattera. It’s the hardest part of responsive design, but I think it’s also the most exciting part. Be sure to click through this presentation if you want to have some good insights as to what modern Web development and design means.
Here are some thoughts by Jens O. Meiert on HTML and CSS development for bigger, complex websites. I especially like the points made when he writes about testing and maintainability.
We should put things in perspective when we point to websites that are not accessible, says Karl Groves. A large amount of errors doesn’t always mean that a website is completely useless.
The default layout for small screens is a simple representation of the code hierarchy: elements stacked on-top of each other in a single column. This works great for focused pages with not too much content, but pages with lots of content will become too long. People do scroll, but will they scroll for a mile? Luke Wroblewski thought of some alternative responsive layout patterns that place some parts of the content outside of the canvas. Definitely worth looking at.
If you need a script to test the orientation of a device, here’s one by Rich Tibbett.
We need a responsive image solution in HTML, but why exactly do we need it? There are several clever scripts out there, why not just use those? Bruce Lawson explains.
CSS is pretty easy to start with, but it’s very hard to write in a maintainable way for larger websites. There are several good methods that might help you—like OOCSS, SMACSS and BEM. And here’s another one: MVCSS, MVC-based style sheets. Looks good!
A ligature is a combination of two or more letters. It is used in classic typography for recurring combinations of characters. Symbolset uses a modern version of ligatures where whole words are replaced with an icon. Very clever!
- 1 http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
- 2 http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
- 4 http://meiert.com/en/blog/20120620/web-development-on-frameworks-testing-and-css-performance-and-maintainability/
- 5 http://www.karlgroves.com/2012/06/21/lets-put-down-the-pitchforks-and-get-some-perspective/
- 6 http://www.lukew.com/ff/entry.asp?1569
- 7 http://www.lukew.com/ff/entry.asp?1569
- 8 https://gist.github.com/2966043
- 9 http://www.brucelawson.co.uk/2012/html5-urgently-needs-adaptive-images-mechanism/
- 10 http://symbolset.com/
- 11 http://symbolset.com/
- 12 www.smashingmagazine.com/the-smashing-daily-archive/
- 13 www.smashingmagazine.com/the-smashing-daily-archive/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.