“- Don’t hav a logotype that takes up 50% of the screen
- Make sure some of your content is visible on the first screen, otherwise users will have a hard time understanding that they have in fact navigated to a new page.
- Use a mobile device for your design and mockup work to visualize how little space you have to play with. Also, display browser chrome on your mock ups.”
Height matters! – Anders M. Andersen
Here’s an excellent list of things to keep in mind when designing for a small device. I’m beginning to see more and more folks talking about the height of a device, instead of just the width, which is a great trend. These tips should help most designs stay usable, even on very short screens.
I somehow missed this great presentation on the future-friendly web by Brad Frost earlier this year. Lots of great stuff in here!
7 Form Tactics That Drive Users Crazy
- Insisting that passwords have certain characteristics
- Insisting upon perfect formatting
- Vague error messages
- Having to re-enter all your data just because you messed one thing up
- Poorly coded drop-down menus
- Requiring information that has no business being required
- No clear indication that the information was submitted
Excellent little round up of form behaviors that are sadly still seen on the web.
Be sure to also check out Luke Wroblewski’s great post Web Application Form Design for more tips and best practices.
“Over the last year, NPR says its total page view growth has increased by more than 80% due to its API, which was designed with the COPE philosophy, allowing NPR to efficiently distribute its content virtually anywhere, including NPR stations, partners and the general public.”
That’s a pretty huge jump, and all because they combined responsive web design and content first design methodologies.
Crafting the Front-end
Old school markup
Let’s take a step back. Before we fret about creating a divinely pure modular CSS framework, we need to know the site’s design and what it is made of. The best way to gain this knowledge is to go old school. Print out every comp, mockup, wireframe, sketch or whatever you have. If there are sections of pages that are hidden until some user action takes place, or if the page has multiple states, be sure that you have everything that could become visible to the user on paper.
Once you have your wedge of paper designs, lay out all the pages on the floor, or stick them to the wall if you can, arranging them logically according to the site hierarchy, by user journey, or whatever guidelines make most sense to you. Once you have the site laid out before you, study it for a while, familiarizing yourself with every part of every interface. This will eliminate nasty surprises late in the project when you realize you’ve duplicated something, or left an interface on the drawing board altogether.
Now that you know the site like it’s your best friend, get out your pens or pencils of choice and attack it. Mark it up like there’s no tomorrow. Pretend you’re a spy trying to identify communications from an enemy network hiding their messages in newspapers. Look for patterns and similarities, drawing circles around them. These are your modules. Start also highlighting the differences between each instance of these modules, working out which is the most basic or common type that will become the base definition from which all other representations are extended.
This simple but empowering exercise will equip you for your task of actually crafting, instead of just building, the front-end. Without the knowledge gained from this kind of research phase, you will be blundering forward, improvising as best you can, but ultimately making quality-compromising mistakes that could have been avoided.
Multi-Safari
These special versions of Safari use the original Web Kit framework that came with them, bundled inside the application. They will mimic original Safari rendering and javascript behaviours. HTTP requests and cookies however are still handled by the system and may not work exactly the same.
Useful thing of the day.
Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock.
(via decodering)
Screenfly is a super handy tool for testing websites on different sized screens. Definitely a link to keep handy if you ever write media queries.
Our Best Practices Are Killing Us
Excellent presentation on CSS and specificity wars.
Paper.js
Paper.js — The Swiss Army Knife of Vector Graphics Scripting.
Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
(via decodering)
