I’ve written the following manifesto to inform and back the way we
work with the modern device. It’s a primer in the very best web
- Good Quality Design is our Top Priority
- You are a Designer, no matter what your role
- Constantly revise, improve and change your process
- Accessibility and Usability are core to design, not afterthoughts
- Speed is important, responsiveness affects user perception
- Be a researcher, learning new approaches is as important as improving current ones
- You are the authority on your field, ignore the guidelines when you think it necessary
The Modern Device
Whether it’s a laptop, a tablet or a mobile phone, whatever we design is interactable.
Interactable means not static. It’s an alive medium. The small details are important.
Design uses familiarity as a hint to the user. It hints at interactibility. Giving the user feedback through visual cues helps them and you.
An example: the button.
- At the visual design level it should look like a button.
- When interacted with it should act like a button.
- In code it should be a button (this is especially important for web, so that it is more accessible).
The Web and it’s Technology
The modern web is not a version. It is a constantly evolving set of
features that we can exploit to convey information to our user. Modern
browsers are undergoing constant improvement. We can and should exploit
this, but not to the detriment of our less-enabled users.
On HTML5, CSS3 and ES5+
These tools can make our pages rich with graphic flair, animation, multimedia, interaction and input. Touch, location, storage, canvas, audio, video – these are all means for meeting an end: the communication of information to our user.
If a feature is introduced in XBrowser, but is not available to users of YBrowser then it should be used as an enhancement not a core feature. Nowadays most browser features can be reliably detected, you should employ feature detection as an aid to allowing enhancement.
Implementing a Design
The visual/graphic designers role is to give a vision for the look and feel of a website.
However, this vision may not be completely achievable and is often not flexible enough for the web. Instead it is the front-end developers role to interpret this vision into code.
With modern web techniques it is not necessary to employ the photoshop chop method of implementing design.
Images should be used where one might expect images (such as logos or graphics). Where possible use CSS to implement the style of a website. Deciding when an image is appropriate, or when css is appropriate is the front-end developers job. They should take into account network transfer speed, rendering time and visual lag due to animations and effects.
Most of the time our user is using a web browser as we expect it, but sometimes that isn’t the case. We should try our best to cater to every audience, but understand that a different experience is not necessarily a bad experience.
This means that users on different devices should receive unique experiences designed to meet their needs. Whether this is differences in layout, presentation or functionality.
A user on a mobile phone should be able to perform the tasks they expect a mobile phone to perform. A user with an old browser does not need the most modern interface we can build, as long as what they do get can serve their purpose.
The process of developing and coding is as much a design process as any other. Code should look visually structured and appealing. It should function in a sane, but exciting way.
Best practices can and should be ignored so as to facilitate a superior implementation.
Development speed is the most important part of development. The second most important being quality. Balance these aspects well. Use tools to help improve both, some of these tools are practices, some are actually tools.
All code should be managed.
We find that we constantly need to collaborate. So we use tools to facilitate this collaboration. This may be as simple as paper to draw wireframes. We’re always respectful of others’ views and opinions and never play ‘devils advocate’. We don’t know everything about our field, we’re always looking for external viewpoints to guide our decisions.
Just because it is unfamiliar, does not mean it is bad. Learn and understand anothers approach before passing judgement. This stands doubley for code.
We think that you have to enjoy what you are doing, there is
The things we use:
- GitHub allows for storing, collaborating and managing code
- Modernizr detects common modern browser functions
- HTML5 Boilerplate gives you a great set of HTML+CSS defaults
- This is a good list of Browser Polyfills
- Less Framework implements Media Queries for Responsive Design
- Ruby on Rails speeds up Web Development
- SASS makes CSS easier to manage
- FontSquirrel allows you to build @font-face declarations for custom fonts
- TextMate is a great visual text-editor. Also see: vim
- Heroku reduces time to deploy and improves programmer productivity
- Instapaper allows you to read links later, to stop from distracting you now – keeping up to date with technology is important
- Google PageSpeed tester is a good set of default tests to run to allow you to see page speed
- OS X gives you a quick (and sometimes dirty)
unix. It has a real, very usable graphical interface with powerful unixunderpinnings.
The things we read:
- Dive into HTML5 is a web book about everything HTML5
- _Why Archive an archive of writings by the most influential Ruby programmer – read ‘Why’s Poignant Guide to Ruby’ at least
- Hacker News to keep you up to date
- Rails Guides the best way to learn Rails
- Responsive Web Design an article by A List Apart
- Nicolas Gallagher runs a great blog about modern CSS practices
- The Pragmatic Bookshelf sell some of the best programming related books that exist
- The HTML5 Specification in a readable format