TRENDS IN WEB TECHNOLOGY ANDDESIGN

2013 EDITION

WHAT IS THE FUTURE?

THE FUTURE IS HERE…IT’S JUST NOT VERY EVENLYDISTRIBUTED

WIL

LIA

M G

IBS

ON

ANY SUFFICIENTLY ADVANCED TECHNOLOGY

IS INDISTINGUISHABLEFROM MAGIC

ARTHUR C. CLARKE

ASYMMETIC INFORMATIONIS FROM THE BAD OLD DAYSTODAY WE LIVE IN A WORLD

OF INFORMATION PARITYor at least we’re getting there…

BEFORE WE LOOK AHEADWE’RE GOING TO LOOK BACK

warning – some trends look larger in retrospect

RESPONSIVEDESIGN

PARALAX

HTML5FINALLY JOINED

THE PARTY

PREDICTION IS VERY DIFFICULT, ESPECIALLYABOUT THE FUTURE

NIELS BOHR

YMMV

THIS IS THE YEAR YOU LEARN TO CODE

IN THE EMERGING, HIGHLY PROGRAMMED

LANDSCAPE AHEAD YOU WILL EITHER

CREATE THE SOFTWARE OR YOU WILL

BE THE SOFTWARE DOUGLAS RUSHKOFF

"Now that much of what Rushkoff has predicted over the years has come to pass, he is uniquely qualified to write what may be one

of the most important and instructive books of our times. Program or be

Programmed: Ten Commands for a Digital Age. Rather than predicting that

the sky is falling, Rushkoff gives practical and actionable advice on

how to turn those biases into advantages.“

- Wired Magazine

he's not telling us about a career change into building websites. He's saying something more profound. He's saying:

“My resolution is to learn to think in a modern way.“

– Tom Armitage, BBC

Judge Alsup told the court he had learned to code in Java for the trial — implying that he knew other languages as well — and he said that he had written some of the infringing code at least a hundred times since Oracle filed its suit in August 2010. “I can doit. You can do it. It’s so simple” He said, adding that it takes Less than five minutes.

The "everyone should learn to code" movement is wrong because it falsely equates coding with essential life skills like reading, writing, and math. Please don't advocate learning to code just for the sake of learning how to code. - Jeff Atwood

THE PAGE IS DEAD*LONG LIVE THE

SCREEN

THE PAGE IS ABAD, AWFUL TERRIBLE METAPHOR FOR THE WEB

NOBODY CARES ABOUT THE FOLD

ANYMORE

LONGVERTICAL SCROLLING

+PURE HORIZONTAL SCROLLING

= AGE OF THE SCREEN, BABY

SMALL PHONES, BIG PHONES, SMALL TABLETS, MEDIUM TABLETS, BIG TABLETS, NETBOOKS, ULTRABOOKS, NOTEBOOKS, MONITORS, FLATSCREENS & PROJECTORS. PAGES DON’T MAKE SENSESCREENS MAKE SENSE

NO BROWSER LEFT BEHIND

MODERN BROWSERS

FOR ALL*

The Web is the most hostile software

engineering environment

imaginable

Douglas C

rockford

IE 10 RELEASE PREVIEW 2012

IE 6 DEMISED 2014

CHROME FRAMEIE PLUG INJS 10X FASTER

THE END* OF FLASHHTML5 IS ALL GROWN UP

HTML5 MAKES RICH MEDIA A FIRST CLASS CITIZEN OF THE WEB

HTML5 HAS SEMANTIC ELEMENTS

<section><article>

<header> <nav>

HTML5 IS BUILT FOR APIS, DOM & JAVASCRIPT

HTML 5 TIMELINE2012.RELEASE

CANDIDATE 2013.CALL FOR

REVIEW 2014.RECOMMENDATION

4,043 software developers surveyed in

Sept 2012 regarding their usage, attitudes

and expectations of HTML5

HTML5 WILL REPLACE FLASH,SILVERLIGHT &NATIVE APPS

PROBABLY NOT THIS YEAR…BUT SOON…SOON…

“HTML5 LETS WEB DEVELOPERS

CREATE ADVANCED GRAPHICS,

TYPOGRAPHY, ANIMATIONS AND

TRANSITIONS WITHOUT RELYING ON

THIRD-PARTY PLUG-INS, LIKE FLASH”

STEVE JOBS

“THE AJAX REVOLUTION WAS A HACK, AND WITH MODERN HTML5 BROWSERS WE FINALLY HAVE A FANTASTIC RUNTIME”

DION ALMAERCO-FOUNDER OF AJAXIAN

CSS3 GETS

DOWN WITH IT’S BAD SELF

“THERE IS NO SUCH THING AS CSS4 THERE HAS NEVER BEEN A CSS4THERE WILL NEVER BE A CSS4CSS4 IS NOT A THING THAT EXISTS

THE TERM ‘CSS3’ REFERS TO EVERYTHING PUBLISHED

AFTER CSS 2.1”

TAB ATKINS JR.CHROME TEAMCSS WORKING GROUP

LAYOUT BECOMES SANE

UNPREFIXED FLEX BOXPREFIXED GRID LAYOUT

NATIVE VERTICAL CENTERING

WE DON’T NEED NO STINKING PREFIX!

GRADIENTSCALC()

TRANSITIONSANIMATIONSTRANSFORMS

ALL YOUR PHOTOSHOP ARE BELONG TO US

CSS FILTERS GET SUPPORT IN NON-WEBKIT BROWSERSGREYSCALEBLURRINGCOLOUR DODGE

CSS GETS IT’S MODERNIZR ON

@SUPPORTS ALLOWS AUTHORS TO TEST FOR CSS SUPPORT & APPLY RULES DEPENDING ON

THE RESULT

CSS GETS IT’S SASS ON

CSS VARIABLES SHOULD UNPREFIX IN WEBKIT

SOON AND ARE BEING IMPLEMENTED IN FIREFOX

RIGHT NOW

CSS GETS IT’S JQUERY ON

SELECTORS NOW HAVE ELEMENT.FIND() TO

COMPLEMENT ELEMENT.QUERYSELECTO

R()

CSS GETS IT’S ANIMATION ON

WEB ANIMATIONS API + JS API

FOR CREATING BROWSER-ANIMATIONS

(LIKE JQUERY'S .ANIMATE()

THAT ARE AS SMOOTH AND JANK-FREE

MULTISCREENIS

THE NEW

MOBILE

GOING MOBILE DOESN’T DIFFERENTIATE ANYMORE. GOING MOBILE IS

TABLE STAKES FOR DOING

BUSINESS ONLINE

YOU NEED

TOGROW MOBILETALENT

YESTERDAY

I used to think the browser was the most hostile programming

environment ever devised,

but then I discovered programming for

mobile

Douglas C

rockford

Sean Yo@seanyo

Seanyo.came@seanyo.ca