A collection of notes from a trainee front end web developer

QM Learning

·

Follow

2 min read

·

Jan 9, 2021

--

Listen

Share

Decalogue

• Responsive
• Accessible
• Fast loading
• Fast operation
• Appropriate design
• Image files
• Google searchability
• Testing
• Brand name

Responsive

• Design for mobile first
• Design for desktop second
• Function over form
• CSS over JavaScript

Accessible

• Design for mobile first
• Size 14 font
• High contrast
• Large buttons for touchscreen compatibility
• Add titles and alt text to images
• Add titles to buttons for hover
• Add cursor hover to button and links
• Provide instant feedback to users
• Create a 404 page

Fast loading

• Minimise the number of files
• Minimise file size
• Lazy old images
• Load scripts last

Fast operation

• Use animations sparingly
• Efficient JavaScript functions

Appropriate design

• Determine brand culture and emotion
• Research similar brands
• Research current trends (Aaawards)
• Research AB testing results
• Create a colour and font scheme
• Create a logo
• Copy form and functions from other sites
• Uniqueness
• Draft the layout
• Implement
• Step back and review

Image files

• SVG for logos and simple graphics
• SVG for animations
• PNG for images with text and sharp lines
• JPG for photos
• Embed icons in CSS as background images

Google searchability

• Select a good URL
• Page names, descriptions and key words
• Appropriate H1, H2, … headings
• Add social images and links
• Run google developer speed tests

Testing

• Inspect total page size
• Run google developer speed tests

Brand Name

• Select a name
• Check URL availability (Always .com)
• Check gmail availability
• Check outlook availability
• Instagram, Twitter, Facebook, etc etc
• Ensure match to culture and emotion
• Check for conflicts and mispronunciation