Front end development
Lunch and Learn
Who are the FEDs?
I’m Matt Bridgeman, 1 of 3 front-end web developers at Abacus
We create and maintain HTML, CSS and JS across Abacus main products
We work closely with the design team
Front end 101
HTML - Mark-up language which makes up the content of a page
Plain text
HTML5 ★ Boilerplate Source code Docs Other projects The web’s most popular front-end template HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package. Download v5.2.0 See the CHANGELOG Get a custom build Save time. Create with confidence. ★ Analytics, icons, and more A lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icon; and docs covering dozens of extra tips and tricks. ★ Normalize.css and helpers Includes Normalize.css — a modern, HTML5-ready alternative to CSS resets — and further base styles, helpers, media queries, and print styles. ★ jQuery and Modernizr Get the latest minified versions of two best-of-breed libraries: jQuery (via Google’s CDN, with local fallback) and the Modernizr feature detection library. ★ High performance Apache settings to help you deliver excellent site performance. We independently maintain server configs, and an ant build script. Introduction to v5
Plain text
HTML
CSS - Provides the look and feel for a website
CSS
float: left;
color: white;
text-transform: uppercase;
float: right;
color: orange;
text-decoration: none;
background-color: orange;
color: white;
padding: 10px;
JS - Provides the behaviour e.g. when you click a button and a popup appears
JS
Unordered list
Heading
Link
bold
Popup triggered by JS
Main FED roles
Webvision
'Rollouts' of the frontend
Developments to Core
New functionality to existing rollouts
AD
Frontend (the pages that a user sees)
Backend (the system that clients use)
Client rollouts
Dispatch
Emails
Customer training
Support
Help with front end queries and issues
Webvision rollout process
Design / analysis
front end build
back end build
testing
...
Too complicated
Mobile?
Missing page text
Bugs, bugs, bugs
Deliverables
- Spec
- Design mock ups
- Styleguide
- Client branded site
- Template .NET files
- Client Snippets
- Fully functioning test site
Core Templates
We have a 'Core' front-end
Contains template HTML / CSS / JS which has been well tested
This is the starting point for all core roll-outs
Should minimise bugs cropping up on rollouts of core functionality
Building the designs
Designers present mock ups to clients but handover a 'styleguide'
Colour scheme
Typography
Masthead / footer
Components
Tooling
Grunt
LESS/SASS
Sublime Text
Git
Finished product
What makes front end difficult?
Responsive web design
Websites can be viewed on hundreds of different devices and browsers
Our goal is to make them look as good as they can on all these devices
Browser stats
Screen Resolutions
Operating systems
Browsers
30 different operating systems
Top 3 screen resolutions are mobile
There is no ‘fold’
Gaming devices are used to browse the site
13,128 screen resolutions
428 browsers
YaBrowser, Maxathon, Iron?
Browser support
Device | OS | Version | Browser |
HTC | Android | 4.0.3 | Default |
Samsung Mobile | Android | 4.3 | Chrome |
Landvo | Android | 4.4 | Chrome |
iPhone | iOS | 7.x | Default |
iPhone | iOS | 8.x | Default |
iPad | iOS | 7.x | Default |
iPad | iOS | 8.x | Default |
Samsung Galaxy Tab 2 | Android | 4.0.4 | Default |
Nexus 7 | Android | 4.1 | Chrome |
Nexus 7 (2nd gen) | Android | 4.4.2 | Chrome |
Kindle D01400 | Android | 2.3 | Default |
Desktop | Windows | 7 | IE9 |
Desktop | Windows | 7 | IE10 |
Desktop | Windows | 7 | IE11 |
Desktop | Windows | XP | IE8 |
Desktop | Windows | 7 | Chrome (latest) |
Desktop | Windows | 7 | Firefox (latest) |
Surface | Windows | 8 | IE10 |
MacBook | OSX | 10.9.x | Safari (7.x) |
MacBook | OSX | 10.10.x | Safari (8.x) |
caniuse.com for what features are supported
Test the most popular (more than 1%)
We can’t test all browsers
Gives us a ‘baseline’
Accessibility
Websites can be used by users with disabilities differently than able bodied users
Physical difficulties - keyboard only
Blind users - screen reading technologies
Partially sighted - high contrast / large zoom
Performance
Engaging sites must be delivered to users as fast as possible
Every 100 ms increase in load time on Amazon.com decreased sales by 1%
Performant interactions are also important
What can we do better?
Duplication of effort
FEDs environment
Devs environment
Design site
Local Dev site
Local FED design site
Local FED design site
Local FED design site
Dev site
Test site
Live site
Design Git
Git
Local Dev site
One unified environment
Local site
Local site
Local site
Local site
Git
Jenkins build
Dev site
Test site
Live site
Thanks!! Any Questions?