Predicting the Web

Web history.HTML Table Design

Cello

Netscape

The Browser Wars

1993W3C Started

MacWeb

1994HTML 2.0 by IETF

Internet Explorer 1

PHP 1.0

ColdFusion 1.0

1995Tableless web design

Cascading Style Sheets

Macromedia Flash

Mobile Browsers

1996HTML 3.2

Google.com is registered

1997Google Launches

1998HTML 4.01

Y2K!

1999

Napster Burns

Email Marketing Restrictions

2000Dot-com bust

2001 Modern design revolution

Web 2.0 begins

2002Android

2003Facebook

Web Services & API

2004YouTube

Google Maps & AJAX

2005Twitter

JQuery released

2006

IOS & the iPhone

2007Google Chrome

Browser wars 2.0

2008Internet Explorer 8

Bing

Screen size explosion!

2009Responsive Design

Android overcomes iOS

2010Internet Explorer 9

REST Web Services

QR codes hit big-time

2011HTML 5.0

ColdFusion 10

2012Minimalist Design

Parallax scrolling

2013

Sift, identify trends.

Design & Layout• HTML design with Tables• Tableless design• Cascading Style Sheets (CSS)• Modern design revolution• Responsive Design• Minimalist Design• Parallax scrolling

Technical & Development• Server Languages• Web Services & API• Google Maps & AJAX• Screen size explosion!• REST Web Services

Reaction.

Accessibility Requirements

HTML Table Design

Tableless Design

Reaction.

Win more business

Designer & Developer

teams

Cascading Style

Sheets (CSS)

Reaction.

Improved customer relations

Screen size

explosion

Responsive Design

Inverted.Current Situation +Business Driver =Web Result &Client Result

HTML table design Legal push & good business decision

Tableless design Ease of use

Design & Development Teams

Increase business CSS Ease of use, more appealing

Standard practice Increase business Modern design revolution

Easier access, more appealing

Many screen sizes Increase business Responsive Design Ease of use, easier access

Complex pages Increase business Minimalist Design Ease of use, more appealing

New web developments are reactionary, based upon an existing condition at a given point in time and a driving desire to increase

business. This results in a positive outcome for the end user.

Theory.

ORCurrent Situation + Business Driver =

Web Result + Positive Client Result

What we hear about.

The scuttlebutt. Web results.• Multilingual Sites• Retina Support• Minimumweight Design• Font Icons• Large Photo Backgrounds• CSS Transparency• Parallax Scrolling• Circular Design Elements• Single-Page Design

Micro and macro trends.•Micro

– Large Photo Backgrounds– CSS Transparency– Circular Design Elements

• Macro– Minimumweight Design

• Font Icons– Multilingual Sites– Parallax Scrolling– Single-Page Design– Retina Support

Apply the theory to micro trends.Client Result& Web Result= Business Driver+ Current Situation

More appealing Large Photo Backgrounds

Increase Business Design movement

More appealing CSS Transparency Increase Business Design movement

More appealing Circular Design Elements

Increase Business Design movement

Apply the theory to macro trends.Client Result& Web Result= Business Driver+ Current Situation

Ease of access Minimumweight Design

Increase Business Limited Download Volumes

Ease of use Multilingual Sites Increase Business Global/World Economy

More appealing Parallax Scrolling Increase Business No movement per page location

Ease of use Single-Page Design Increase Business Large cumbersome pages

Ease of use, full device use

Retina Support Increase Business Small buttons & images on high PPI

I can make all of these feel reasonable based on our theory. We’re missing something…

Another factor.

Good business decision.•Micro

– Large Photo Backgrounds– CSS Transparency– Circular Design Elements

• Macro– Multilingual Sites– Parallax Scrolling– Single-Page Design– Retina Support– Minimumweight Design

• Micro– Can you say MySpace…– MySpace again!– New, still a bouncing trend.

• Macro– Big business. Alternatives.– Fills design need. All time.– Not for everyone, namely EDU.– High PPI is coming. Required.– Good business decision!

New web developments are reactionary, based upon an existing condition at a given point in time and a driving desire to increase

business, while make good business decisions. This results in a positive outcome for the end user.

Theory updated...

ORCurrent Situation + Business Driver

=Web Result + Positive Client Result + IS Good Business Decision

Connect it to market barometers.

We hear many people talk about new web technology every day. Who/what has a history of being correct and at-the-forefront. • Market Movement

– iDevices between 220 to 326 PPI– Galaxy S4, 441 PPI

• Ethan Marcotte– Coined the phrase Responsive Design in 2010.– Continues to talk about light weight design and

multilingual sites to this day.– Focused on opening sites to new markets

Conclusion.

•Micro– Large Photo

Backgrounds– CSS Transparency– Circular Design Elements

• Macro– Minimumweight Design– Multilingual Sites– Parallax Scrolling– Single-Page Design– Retina Support / High

PPI Screen Density

Barometers.

• Large tech– Adobe– Apple– Microsoft

• External to web– Chevy– Ford

• W3C• Smashing Magazine• Twitter

– Ethan Marcotte @beep– Doug Bowman @stop– Dave Shea @mezzoblue

• Related opensource– Bootstrap– JQuery– Many others!