Eddie Machado: Crafting your Toolset
Eddie Machado was speaking at Handheld Conference about building the Handheld website, these are my notes from his talk.
- organising content and sketcing
- Prototype and early layout
- Fleshing out layouts and iterating
- More iterations and launch
Give your clients homework. Try and think of everything they need, the ones that don't know what they need are the ones that are a problem. Started with a design persona - personality traits and voice, visaul lexicon. Start gathering everyting even if you only think you may need it.
Sketch everything, don't start coding just yet. Sketech as much as you can even if it's annoying. Share everything - don't hold out for the big reveal. Things move faster if you share. Find a general theme, other things will then start falling into place. Mock elements of the theme up to get a clearer view of how it's actually going to work.
Figure out what you can and can't do and be honest about it. This helps you when you are working with other people, it sets clear boundaries.
Gather everything you need and hand in your homework.
Establish your colour scheme, typography.
Prototype and early layouts - this is the fun part. CSS pre-processors take some of the pain out of CSS. Organise your source files into a logical folder structure, this makes it much easier to find things later on. Grab some icons - used an icon font and some Sass functions to generate the CSS to add them to the site.
Grids - we used Gridset. We created the breakpoints based on our core style element - a picture frame. Gridset produces CSS and Sass for you to work with.
Mobile layout: small pictures and minimal UI chrome. 600up started introducing other elements - including the speaker description. The mobile view hid the speaker description with display: none :-(
Fleshing out layouts and iterating. JavaScript was used to enhance. The speaker video was added on hover over the image, however some browsers don't auto play and/or support hover. Solution was to create custom elements and use JS to create our own custom functionality to deal with this.
Browser testing can be fun. We wanted to make sure the site was speedy on mobile by keeping the page weight down. Used JS to conditionally load background images. On desktop it was still 1.5MB and 69 requests.
Everybody approaches their own problems their own way.