Smashing Daily #46: Processes, Pitchforks, Images

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!

Design Process In The Responsive Age1

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.

The Responsive Design Workflow2

Teaching Javascript3

Here’s an interesting take by Michelle Levesque on teaching JavaScript to kids: dive straight into making things. That’s actually how I learned how to write JavaScript, and I still consider it one of my biggest handicaps—I don’t exactly understand how all those things I play with actually work.

Web Development: On Frameworks, Testing, CSS Performance And Maintainability4

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.

Let’s Put Down The Pitchforks And Get Some Perspective5

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.

Off Canvas Multi-Device Layouts6

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.

Some Responsive Layout Experiments7

JavaScript Shim Of iOS’s Window.Orientation + Orientationchange Events For Other (Typically Mobile) Browsers—Gist8

If you need a script to test the orientation of a device, here’s one by Rich Tibbett.

Why HTML5 Urgently Needs An HTML Adaptive Images Mechanism9

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.

MVCSS10

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!

Last Click

Symbolset11

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!

A Very Clever Opentype Font12

Previous Issues13

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

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.

  1. 1

    Reader-friendly design supprots reader-friendly communication!Roger has provided a potentially far-reaching service with this easily referenced and applied set of 16 best visual design practices. Far-reaching in the sense that prospects are not the only potential beneficiaries of such reader-friendly design.I’m thinking about the impact the application of these practices would have on parent communication if they were applied to notes home, newsletters, fund-raising materials, handbooks, program notes, etc. by teachers and school staff.Other Groups & Next Actions?1. Think of a group with whom communication could be improved.2. Identify the authors/preparers of the communication.3. Send them the link to this article with a personal note of encouragement.What other groups of recipients and authors come to mind?

    0

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