Design and stuff

Facebook Twitter
Sketch | The designer’s toolbox unite & subtract Instead of drawing complex shapes by hand, build them by combining basic shapes using our flexible boolean operations. Oh, and we’ve got proper rounded corners on rectangles of course... Sketch | The designer’s toolbox
Pictos Pictos See Examples Load Speed & File Size: Typically, you use image sprites to render icons on the web. If you have a hover state and an active (pressed) state for those icons, your sprite will be three times larger than it needs to be. By using a font instead you can load in the icons once and use CSS to change their look for hover and active states.
cork grips | Page 2 cork grips | Page 2 Wandawega Souvenir Dispenser Camp Wandawega was clever enough to re-purpose a cigarette machine to dispense small Wisconsin-related souvenirs. More details about each special little item can be found here. PDW City Fenders
Make it good. As front-end engineers, our job is ultimately to produce and deliver the front-end “experience.” That is, in addition to the core service (eg., a photo sharing site) which you are providing, you are also responsible for replicating and maintaining the quality of the visual aesthetic, including attention to detail in your UI. Making it really good. On UI Quality (The Little Things): Client-side Image Resizing On UI Quality (The Little Things): Client-side Image Resizing

Fluid Images — Unstoppable Robot Ninja

Fluid Images — Unstoppable Robot Ninja (Hello! If you think this article’s interesting, you might check out my ALA article on responsive web design.) I’ve always hated publishing.

Responsive Web Design

The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Responsive Web Design
Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. Over the past few years, this sort of thinking has become more common.

Fluid Grids

Fluid Grids
Important note, updated: Apple has released very limited information about the iPad at the Safari Dev Center. This article is written on the assumption that previous guidelines for Safari on iPhone OS apply to version 3.2 and the iPad. Step 0: Design for 980 pixels and do nothing The width of the iPad screen when held in portrait orientation is 768 pixels. Since many pages (like the NYT, which Jobs has demoed) are wider than that, the iPad scales down pages. The NYT website is automatically scaled down to fit on the iPad screen. How to fit your website for the Apple iPad « x7 Labs How to fit your website for the Apple iPad « x7 Labs
Dimensions of the iPhone Display
Detect retina displays with javascript Written by Brian Cray on May 5th, 2011 I've been trying a way to detect a device's DPI for mobile design. While I haven't yet, I did at least find a way to detect whether the user is using a retina display. Detect retina displays with javascript
Detect Apple’s Retina display and load specific CSS stylesheet - [ ]
Making your app real-time is a huge boost and WebSockets give you the ability to add bi-directional communication over a persistent connection to your application to increase interactivity and user engagement. web-socket-js is a natural polyfill for the JavaScript WebSocket API transferring data through Flash Sockets when WebSockets aren't available. To use native WebSockets in versions of Firefox before 11, the prefixed MozWebSocket should be used. The protocol backing the Web Socket API has become an IETF standard, but Safari did not implement that version until Safari 6. To support Safari 5, the WebSocket server needs to support both -76 and the RFC6455 versions, or you can use Flash or Java sockets (if available). The -76 version has a possible security problem for users behind buggy transparent proxies. HTML5 Please - Use the new and shiny responsibly

HTML5 Please - Use the new and shiny responsibly

A Design Primer for Engineers For a word that can so vastly change the fortunes of a company, it’s worth noting that no generally accepted definition of the word design exists. This means when your boss stands up in front of the team at that all-hands and says, “We’ll have a design-centered culture,” there’s a good chance he’s saying nothing at all. But you keep hearing this word. More importantly, you hear the urgency behind the word. You hear that choosing to design a thing is an important thing to do and the person saying it is also important, so you nod vigorously while silently thinking, “I have no fucking idea what you’re talking about and I’m pretty sure neither do you.”