This is a live post of notes I am making at .NET Generate Conference
Oliver Reuchenstein – Information Entropy
51,117,600 new websites in 2012
250 million domain names
Over 1 Billion facebook users
1.1 Bilion Smartphone users
182.5 billion tweets
380 billion photos
1 trillion facebook likes
52,852 billion emails
99.99% of emails end up in the trash
48 billion hours of video on Youtube
1 billion times Gangnam style
The web has become like TV, some people say its like telephone because we talk to each other but its mostly passive and it is boring.
To much of it is Advertisement.
The internet became like TV because that is what people want, the medium is a mirror, humans are messy and everything will continue to get even messier.
Some people think the mess is good because they say mess means more meaning.
Jack Franklin – the new era of JS
Bit of history
jQuery came out in 2006/2007 and allowed us to forget about browser inconsitencies
But it meant we ended up with 1000′s of image carousels
Jack hates image carousels.
Less and less people were using Internet Explorer.
Lots of libaries and engines have started springing up
But now things have matured (pic of cheese on screen)
20 odd libraries came out, several became popular like jQuery.
Jack doens’t believe there is any difference between web apps and websites, we all building sites that people visit, do something and leave. Differentiating websites vs web apps is no good to anyone.
EMBRACE THE ECOSYSTEM
Its not an all of nothing approach though
Developers are lazy – very true
Jack hasn’t used FTP in years, a huge number of people in audience have.
var html = “<p>” + variable1 + “</p>”;
Write tests using jasmine, mocha and qunit to ensure your code works as you expect
The client or the server
Should we have the client which we hit with API requests or do we render on the server.
It depends on the project.
“Don’t turn off a native language and expect things to work.” Todd Motto
Built in ruby on backend and ember.js on frontend
Audience mostly coming from Firefox and Chrome.
Your the only person that knows your app, so only person who can make the decision is yourself, but this approach is only going to become more popular. Most of the libraries are now stable with Ember JS 1.0 just coming however don’t build client-side JS just because you can.
Stephanie Rieger – Beyond Progressive Enhancement
Stephanie Riegers Slides
Self driving cars collect gigabyes of data
Mannequins that watch, listen and analyse who we are
mobile stores with 3D scanners
Smart roads are being tested in Korea
Stomach acid powered sensors that communicate with applications on your smart phone
a fork that senses how you eat.
toilet that tracks when you go
When you look at these things its hard to think about where the web fits in, when we think about the future and about how everything is meant to be seamless, the future is the pathways from todays apps to apps that talk about anything.
The current approach is to develop API’s, the theory being that only a more capable and powerful web can compete with native apps, things get added to native platforms faster than the web. One idea is to replace the native platforms with the web but its like we are missing part of the story, this doesnt meant its the wrong path. Were far from the only industry that has been challenged by the power of technologies.
ITs natural to try and compete with new technologies but rather than compete we need to adapt and embrace new technologies and completely rethink how we relate to them.
Native software will not go away. We need native software to power complex experiences like where we layer geolocation with camera, 3D rendering, gyroscope and video & audio. The hardware and software evolves quite quick, the web can’t always keep up, devices are getting quite powerful and you want to be able to take full advantage of powerful new chipsets an technologies. Software can have dedicated cores dedicated to a specific purpose EG iPhone 5S has the new motion chip, low power because concentrates on one thing without loading up the CPU. With a world of things to chat with people do not always care enough to start a full-on relationship.
The web is the ubiquitous pathway, a veritable superpower that will only increase once everyone is connected.
How do we make things better
Progressive enhancement is using technologies to creating great experiences. Enhancement can be beyond the web, people are now dipping in and out of the web every day, choices people make on devices are more complex and irrational. Services need to embrace this complexity and you can’t predict precisely which touchpoint people will it. Its natural that we want to drag people to the web but its counter-productive as it doesnt improve peoples lives.
Dixons have recently scrapped individual sales commissions in favour of store-wide schemes linked to measures of customer satisfaction, this is a progressive approach because it doesnt matter where people buy the product, its about engagement. A online sale after someone has visited the store is credited to the store.
iOS smart app banners
iOS smart app banners can prompt usrs to open or instlal you app, easy to implement using meta tag and are less obtrusive than modal windows and are native components. While less intrusive than other methods, generically linking to it is as useful as generically dumping all smartphone users to your mobile home page so you should pass your full URI reference to the app so they get to the content they were engaging with.
Custom URI schemes
URI schemes are implemented on iOS and Windows mobile, on Android you have something different.
App developer registers the scheme within the native app e.g polar:// then when a user clicks on a link on a web page the native app recognises the scheme. The app then opens and resolves the full URL. Unfortunately they do not gracefully degrade, if the app isn’t their the browser doesn’t know what to do with it. On iOS you get an error, other browsers fail silently.
At the moment URI schemes are a bit of a hack as they do not degrade
Android has Intents
Intents are the glue between application components both within an app and across different apps. They allow apps to outsource tasks to other apps (that they may not even know about) using predetermined interfaces.
Users can choose the app they want to use for the purpose, the developer doesn’t have to think about it in advance. This gives users the choice.
Android apps can register their ability to accept an intent.
Clicking a hyperlink is one of the may user actions that triggers an intent, it is therefore possible to build both an app and a mobile optimised site to enable behaviours. The user clicks a link within a web page and are given option to open in app or in browser.
Once the experience is over they automatically end up where they initiated the task. Developer and user does not need to do anything. Your job is to just link tasks together.
It is a shame that only Android does this however Chrome on iOS does mock intents with integration with apps like Pocket iOS app. This could come to web in the form of web activities which is in Firefox OS. Mozilla hope that web activities will be adopted as a standard, the development of web intents a similar thing has been abandoned with focus on web activities instead.
NFC is simple but poweful wireless technology, there are 1 million NFC enabled Android devices activated each week, Windows mobile support it but Apple doesn’t and are focusing on Bluetooth LE.
Examples of NFC
Touch the poster which contains a passive NFC tag to receive a product related URL, similar to QR code but you don’t need a individual app.
NFC can be used for sharing media, it activates bluetooth and then pairs devices and sends file.
NFC has been used on headphones to power up headphones, activate bluetooth and pair devices.
Things get more interesting when you chain everything together.
The idea is you tap your phone enter store, get 10% off voucher, then you can interact with that voucher, can then pay with NFC with 10% off and the web is part of this but is not the whole experience.
We need to tear down the Silos
We are building products and brands, in a world where everything is connected every company is a technology company.
Technologies are not solutions, they are just tools, we need to tear down walls and tell stories our customers deserve.
Stephen Hay – UI design and layout with CSS Flexbox
Took 8 years to get a man on the moon
Tim berners lee wrote first web browser in a year,
Took 2 years to write the first CSS specification, we have had CSS for 17 years and only now are we starting to get real layout, but “Layout is hard” is what we hear from the browsers. We have a robot roaming around Mars but “Layout is hard”.
“Layout solutions are a interesting area in CSS to me” – Tab Atkins
There are two types of web layout
- Page Layout – grid layout and template layout
- UI/Component Layout – Flexbox
Before you get all excited its not a good idea to use Flexbox for page layout because of issues with nesting.
New terminology of Flexbox
- Axes & Size
So you need to leave your layout baggage at the door. Leave how you have dealt with layout behind and start with a blank mind.
- Flex containers
- Flex items
- Main axis/size/dimension
- Cross axis/size/dimension
So lets use bob as a flex container
The children of a flex container are called flex items, even anonymous block boxes. The direction that your blocks go is called the main axis.where as its intersection is the cross axis. We have start, end and center on both the cross axis and main axis. We can finally properly align things in the center (even vertically).
Flex items properties
Flex items properties
Missed making a note of these
Common use cases
- True centering
- Unknown menu items
- Display order
- Tab groups
- Form layout
Martin Gorner - Animate your HTML5
This talk had a lot of code which is easier to read direct from slides at http://animateyourhtml5.appspot.com/
Ways we can animate in the browser
CSS now has support for 3D Transitions
SVG is now implemented in most browsers
Canvas – 2D only
WebGL + Three.js - full 3D
CSS shaders – 3D shaders controllable from CSS
Andy Hume – CSS for grown ups
Quality of code like:
- CSS Lint
- BEM: Block-Element-Modifier
In the beginning
CSS came about when we were using tables and we were looking at web standards, removing presentation aspects of the code to a separate layer and what pushed this forward was CSS Zen Garden.
There was one HTML document and then lots of people submitted different CSS but we were not thinking about what it is like to build CSS for large websites. People embracing the early days of CSS were normally working on smaller sites or personal projects so early best practices didn’t reflect the real world
- Nothing is perfect
- Nothing lasts
- Nothing is ever finished
CSS should not be completely reliant on the structure of the content in the page.
The biggest problem we have these days is how we use selectors.
CSS gives us really powerful tools and their are not many constraints and when you are building big complex things, constraints are good. For example if you write the styles for tweetbox you want them to be encapsulated with the tweetbox.
Modern programming languages allow you to protect your classes, variables etc. With CSS we have no protection so someone could apply styles to an anchor which will effect all your blocks containing links even if that is not the intention.
- Web 2.0 Complient
What is more important is to optimise for change, this is the definition of maintainability. If you can’t optimise for change you can’t offer good value for time it takes to maintain the site.
Layers of CSS
HTML Document -> Base Styles -> Module Styles -> Layout Styles
Examples (only included a couple as slides have these)
This is perfectly fine to use if you update class name if you update color name
If you want to apply specific styles to a specific heading use a class, the heading level (h2, h3 etc) may later change, the css will be flexible
Surgical layout helpers can be useful
Leisa Reichelt – Prototyping UX Strategy
Abstraction requires your best ideas when you know the least.
You are fooling yourself if you think problem solving is anything but squiggly.
How Leisa works now
- get a multidisciplinary team quickly
- sketch to HTML and stay out of design packages
- use real content, prototype/testing content
- multiple prototypes (test lots of ideas don’t commit)
- quickly test both qualitative and ‘active’ use
- let stakeholders ‘touch’ your ideas
- iterate, the more quickly to learn more
- only document what you really need to
Who does she do it with
- start ups
- large tech conservative organisations
- large conservative governments
(so basically anyone)
Prototyping beats abstraction
Be making not documenting, design is how it works and you can’t get feeling how it works from a wireframe or Axure prototype, use a proper html prototype.
Shoow, don’t tell design principle is both a design principle and a way of working, if the client is able to see how it works you can prove to them how it will work and it makes it feel real to the client.
Leonie Watson – Rock n roll guide to HTML5 & ARIA
- Assitive Technologoes
- Accessability APIs
- Accessible Rich Internet Appplications (ARIA)
- Document Object Model (DOM)
There are more than 30 ARIA roles including alert, dialog, checkbox, menubar, progressbar, slider, tab etc
9 including aria-busy, aria-checked
More than 20 ARIA properties
tabindex=”0″ fit into natural tab order of page
tabindex=”-1″ takes it out of the natural tab order
Elements with tabindex=”>0″ are a bad idea
Summary Design pattern
<summary>Favourite Pink Floyd</summary
with ARIA roles would become
<summary role=”button”>Favourite Pink Floyd</summary
when we add an ARIA State to show it has already been clicked on
<summary role=”button” aria-expanded=”true”>Favourite Pink Floyd</summary
Main page design pattern
This is a sample page structure
Without ARIA roles a screen reader does nothing, if we add ARIA roles for landmarks we can make a screen reader understand this.
<div id=”header” role=”banner”>
<div id=”main” role=”main”>
<div id=”footer” role=”contentinfo”>
But with HTML5 we don’t technically need this (but for now its worth leaving it in for backwards compatible).
Navigation Design Pattern
There problem with this is that the role is on the ul but it should be on the nav tag
<h1>Back to blank</h1>
The section element is called region in ARIA however if we use aria-labelledby we can give it a more informative name by providing the ID of the sections heading
<h1 id=”heading”>Back to blank</h1>
For baskets we need to tell the screenreader to monitor the basket for changes, when changed it will read to the user the contents of the basket
<div aria-live=”assertive” aria-atomic=”true”>
<p>Your basket contains <span id=”quantity”>0</span> items.</p>