Tools for Modern Web Development Workflow

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Having a good name is a big deal. 3

Slide 4

Slide 4 text

So right now in term of design, flat design is a trend. We went from skeumorphism (http://en.wikipedia.org/wiki/Skeuomorph) and have moved to much more flat, simplier designs. Lack of gradients, shadows, depth etc. In many ways, Windows was the leader in this trend with the introduction of their design language and aesthetic with Metro. 4

Slide 5

Slide 5 text

Flat design – big images, typography 5

Slide 6

Slide 6 text

There is a trend in the color palette for flat design as well http://flatuicolors.com/ 6

Slide 7

Slide 7 text

Another example of simple, flat design 7

Slide 8

Slide 8 text

http://flipp.ca/ 8

Slide 9

Slide 9 text

Mcdonalds site – https://myburger.mcdonalds.co.uk/gallery 9

Slide 10

Slide 10 text

Medium. An entire site based mostly on typography. 10

Slide 11

Slide 11 text

Brooklynbeta https://brooklynbeta.org/2014 11

Slide 12

Slide 12 text

http://littlebigdetails.com/ Focuses on small snippets of exceptional usability. Could also exist in error messages. 12

Slide 13

Slide 13 text

Kleenex – soon as you get to the bottom, the tissues become gray to signal end of the box 13

Slide 14

Slide 14 text

Search for Fibonacci on Youtube, and it brings up results using that sequence. An opportunity to delight the user in a meaningful way https://www.youtube.com/results?search_query=fibonacci 14

Slide 15

Slide 15 text

Tone - 15

Slide 16

Slide 16 text

Error messages are now seen an opportunity to engage your audience 16

Slide 17

Slide 17 text

Full page scrolling is the norm, with many plugins and functionality that animate the page down for example. We used to say scrolling was bad, that the fold was important. Devices have changed this. We’d rather scroll on a device, than wait for the page to load again. 17

Slide 18

Slide 18 text

Scrolling We used to say let’s not scroll. Now its fine. Lazy loading 18

Slide 19

Slide 19 text

Is it death of the global navigation? We have seen a trend in very sparse navigation and it often being hidden. 19

Slide 20

Slide 20 text

Hamburger icon – drawer icon. Has in some ways become the standard, altho this is arguable. 20

Slide 21

Slide 21 text

Simplified nav. 21

Slide 22

Slide 22 text

Hidden nav on desktop before logo 22

Slide 23

Slide 23 text

Hidden nav on desktop on right 23

Slide 24

Slide 24 text

http://www.google.com/intl/all/nexus/ http://webstore-us.scotch-soda.com/ http://www.ohlandmusic.com/ https://www.kickstarter.com/team 24

Slide 25

Slide 25 text

http://www.dock.cz/en Fullscreen image and a hidden nav. Oh stuff just got real 25

Slide 26

Slide 26 text

http://www.dock.cz/en Fullscreen image and a hidden nav. Oh stuff just got real 26

Slide 27

Slide 27 text

“A great name is the difference between selling an idea or not” - http://www.slideshare.net/purewest/howto-namethings 27

Slide 28

Slide 28 text

So now, as we build these modern experiences, we have serious device fragmentation. Which means resolution fragmentation. 28

Slide 29

Slide 29 text

http://cdn.gifbay.com/2013/01/jack_nicholson_going_crazy-26036.gif It’s enough to drive the average developer crazy 29

Slide 30

Slide 30 text

http://img.pandawhale.com/13483-panda-turns-over-shopping-cart-q8MZ.gif 30

Slide 31

Slide 31 text

In visual studio - Mindscape Web Workbench It gives you support for Sass, Less, CoffeeScript etcs 31

Slide 32

Slide 32 text

Lots of 3rd party apps that support css preprocessors CodeKit Compass.app Less.app Development ides like Coda, Phpstorm, VISUAL STUDIO 32

Slide 33

Slide 33 text

It will ensure you don’t repeat yourself Code easier – use variables that you can repeat CSS more organized Can allow team dev a bit better More object oriented way to write css. Nested selectors etc. They allow: Partials Variables Extending Classes Nested Inheritance Functions Mixins 33

Slide 34

Slide 34 text

Browser render fonts differently so you need to be testing on all the platforms Types as a service – font embedding There are a bunch of services, means that fonts ---- FOUT – the idea that you get a flash of the fonts before the page rendered TYPE KIT, GOOGLE FONTS, FONTS.COM ETC Most important - 34

Slide 35

Slide 35 text

Typecast .com 35

Slide 36

Slide 36 text

Icon fonts help reduce size and ensure your icons look good at every size 36

Slide 37

Slide 37 text

So let’s talk about javascript 37

Slide 38

Slide 38 text

What do people typically start with? They start with things like bootstrap – scaffolding & behavior Modernizr – feature detection. Normalize – reset CSS to a standard baseline as all browsers have varying CSS defaults JQUERY – for dom selection = animation. Bootstrap – layout and behavior. Bloated. 38

Slide 39

Slide 39 text

There is movement to drop jquery. To move towards a more vanilla web, where you write what you need. Jquery was initially released in 2006. November 8th, IE 7 was released. This should put it in perspective. Browsers varied much more back then, and did not adhere to standards. 39

Slide 40

Slide 40 text

Typescript – created by Microsoft Coffeescript – GWT Clojure 40

Slide 41

Slide 41 text

Typescript is a typed superset of JS, compiles to plain JS, open source. It allows you to do things like data typing 41

Slide 42

Slide 42 text

Coffeescript syntax borrows from ruby. It compiles down to JS. It adds functionality that the language doesn’t support. 42

Slide 43

Slide 43 text

Automation and build processes have found their way into web development. Many who have used ANT in the past will be familiar with many of these processes. 43

Slide 44

Slide 44 text

Build processors are typically just things you do when you are testing or creating a build. We can do this for things like minifying or concating your code Maybe we wrote stuff in a preprocessor and we want to compile it Perhaps we have development level variables 44

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Gulp Grunt Task Js All Javascript task runners. A task runner can help you with productivity, by automating some standard repetitive tasks for you. npm install -g grunt npm install -g grunt-cl Gulp is said to be easier npm install -g gulp 46

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Example of what gulp looks like for a basic task such as compiling sass and moving it over. 49

Slide 50

Slide 50 text

- npm install -g bower 50

Slide 51

Slide 51 text

Yeoman Basically creates your scaffolding npm install -g yo Tonnes of generators for what you need. 51

Slide 52

Slide 52 text

What do frameworks do and how do they help 52

Slide 53

Slide 53 text

There are a bunch of frameworks. Too many to mention. All with there own features, some more lightweight than others. Ember, Angular Can js Backbone Most of these frameworks are MVC - Model View Controller. They separate areas of concerns. Ember and Angular are the most strict – and are less flexible than something like Backbone. Frameworks give you an abstract base – from which you can add custom code. Most frameworks offer things like routing, views, data binding ( auto sync of data between model / view ) . Angular for example provides two way binding. 53

Slide 54

Slide 54 text

You need to consider features that you need from each framework. Does it do routing? Two way binding? How flexible is it? What is the community like? Actively developed? Active documentation? 54

Slide 55

Slide 55 text

Patterns and approaches people are using – for JS, for building sites, for CSS> 55

Slide 56

Slide 56 text

We talk a lot about how things need to be modular. Components. Device Agnostic. Mobile first. 56

Slide 57

Slide 57 text

http://en.wikipedia.org/wiki/Asynchronous_module_definition Modules encapsulate a piece of code into a unit and allows a way to define or export it It can also refer to other units of code The AMD format – avoids use of globals , encapsulates the definition, allows for many modules in a single file etc 57

Slide 58

Slide 58 text

Require.js File loader and dependency manager Allows you to write modules that have depenedancies 58