Monthly Archives: July 2014

Joe Harrison – Responsive Logos

Consider this: use multiple versions of your logo for different screen sizes. Responsive Design for Logos.


An exploration in scalable logo design.

What happens when you create multiple versions of a logo for different size contexts? We’ve been doing this in print for ages–why not use the concept in web responsive design?

For example, the Coke logo goes from “Drink Coca-Cola / Coke” to “Coca-Cola” to “Coca-Cola minus the curved line to “Coke”.


Following the visual refresh in iOS 7, OS X Yosemite provides a cleaner-looking interface including new system font and icons

OS X Yosemite’s consistent and simple icons push design interfaces forward


There is a lot more to the new icons than just a fresh coat of paint — the visual language extends far beyond just the gradients.

The flat dock is back–let’s rejoice.

Icon designs stick to a grid to provide visual consistency.

Icons have a shape hierarchy. The circle for apps: “lightweight pieces of software, entertainment, or consumer-focused products.” The square for system-related utilities. The tilted rectangle for applications that help you get the work done.

Lighting effects are richer and more refined.

Read more from the source:

Select styles with CSS only – JS Bin

Styling selects is a dirty business but Todd Parker has some beautiful examples


How this works: This styles a native select consistently cross-platform with only minimal CSS. The native select is then styled so it is essentially invisible (no appearance, border, bg) leaving only the select’s text visible. There is a wrapper around the select that has the majority of the button styles (gradient, shadow, border, etc.). We then add the custom arrow via a pseudo element to the right.

Firefox doesn’t allow you to consistently style away the select arrow so we’re setting the select width to 110% and clipping it with overflow:hidden on the parent. We then add extra right padding on the native select so the text won’t run over the custom arrow or be clipped by the wrapper. These style rules are targeted to Firefox with some pretty ugly scoping but it lets better browsers have a cruft-free experience. Older IE and Opera fall back to the native select.

View demo at

Slideshare: The future of media queries?

New media queries proposed in CSS4 paint a vision of the future: WebKit running on everything with a screen


Included in the proposal are media queries for pointer accuracy, ability to hover, light level and scrolling vs. paging.

Is this the right focus? It would be great if there was a focus for mapping HTML to native controls: iOS, Android, watches, Google Glass, etc.

Presented at Responsive Day Out in Brighton on June 27, 2014.

Read more from the source: