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
practices.
Overview
- 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.
Polyfills are a technique for giving older browsers features or functionality of newer browsers. These should be employed wherever useful. If they adversely affect the speed of a webpage it is perhaps worth redesigning some part of each browsers experience to fit around the constraints of the device.
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.
Responsive Design
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.
Code Practices
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.
Collaboration
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.
Have fun!
We think that you have to enjoy what you are doing, there is no point being bored. If you are bored you are probably doing the wrong thing. Do what you enjoy instead. 🙂
The Tools
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
- CoffeeScript speeds up JavaScript development and improves Clarity
- 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 optimisations
- OS X gives you a quick (and sometimes dirty) unix. It has a real, very usable graphical interface with powerful unix underpinnings.
The Knowledge
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