The Future of UI - How Mobile Design is Shaping The Web 2

•

59 likes•36,452 views

Web design is not an interactive brochure anymore. Smart mobile devices have forever changed the way we think and interact with websites. Now you have to consider an array of things you didn’t have to worry about before, such as HiDPI graphics, UI/UX patterns, touch target sizes, gestures, and managing expectations. All the while not losing track of what’s important: Content. We’re going to discuss the influence of mobile on design, trends, and implementation methods, as well as how touch is changing our lives. As designers and developers, we can benefit from learning about how mobile is changing the way we interact with websites, and what that means for the future of UI.

Design Business Technology

How Mobile Design Is Shaping
The Web
SARA CANNON WP MONTREAL
The Future of UI

SARA CANNON
Co-founder / Creative Director At Range
sara-cannon.com @saracannon slideshare.net/saracannon

INTERNATIONAL DATA CORPORATION (IDC)
http://www.idc.com/getdoc.jsp?containerId=prUS23028711
The total number of
people using the web on
mobile devices is set to
surpass desktops by 2015.

ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf

163 DPI
153,600 PIXELS
480PX
320 PX
iPHONE 3GS -

326 DPI
614,4OO PIXELS
96OPX
64O PX
iPHONE 4 +

460,800
MORE PIXELS
iPHONE 4 +iPHONE 3GS -

220 DPI
2,304,0OO
PIXELS
2880PX
1800 PX
MACBOOK PRO
15-INCH RETINA

http://www.theverge.com/2013/4/22/4251610/windows-8-1-start-button

How Is It Held?
image via http://thetechblock.com/visual-language-designing-for-touch

http://maniacdev.com/2012/05/
open-source-library-for-easy-
clear-app-style-and-more-
folding-transitions-between-
any-uiviews/
http://
markpospesel.wordpress.com/
2012/05/10/anatomy-of-a-
folding-animation/

Medium.com/design-ux/926eb80d64e3
Pasquale D’Silva

Http://bradfrostweb.com/blog/web/
responsive-nav-patterns/
The Left Nav Flyout

Http://bradfrostweb.com/blog/web/
responsive-nav-patterns/
The Toggle

Http://bradfrostweb.com/blog/web/
responsive-nav-patterns/
The Select

What's hot

Cloud computing is being adopted rapidly today, fueled by the explosion in mobile devices. The car is the third-fastest-growing mobile 'device'. Mandated use of the Cloud by the American government is pushing even faster growth. The shift to electric vehicles adds even more urgency. Here is a view of how the car is becoming a moving information transceiver for the Cloud...a mobile sensor that feeds the Cloud. See also some work on a First Responder Test-Bed in Canada

The Cloud and the Car

Barry Gander

The Web is the platform, @lxjs

haricot

Mobile Web Evolution - Rich Mobile Applications and Real-time Web UX

Paul Golding

Cloud Company

cloudcompany

trends in online publishing

Irakli Nadareishvili

The IBM Social Business Toolkit

Daryl Pereira

Putting Web Into Native App

Bess Ho

WITI Mobile Development Workshop 2012

Amanda McConnell

Future Tech for Concur User Conference

Michael Fauscette

WITI.ORG Women Technology Summit 2012

Bess Ho

Mobile disrupts the cloud

Eric Rubin

Van wyk hothouse mobile 2012 sydney

iStrategy

Mobile development : reaching critical mass

Alessandro Thellung

As developers, one of the largest challenges is deciding what kind of mobile application to build: mobile web, hybrid, or native mobile. This is a thorny question because there isn’t a black-and-white answer. The solution can sit anywhere from pure mobile web to pure native mobile, or somewhere in between. In this session, Shane Church, Technical Lead at EffectiveUI, will uncover how the answer is tied to deep consideration of architecture decisions, the needs of the user, and the business goals for both the short and long term. He’ll take attendees step-by-step through the questions and project considerations they should address when preparing to embark on a mobile development project. Attendees will also learn that their responses to these questions will drive a clear path to the right decision that keeps end-users and organizational goals in line.

Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...

Shane Church

Future of Mobility

Simon Guest

Investment Panel titled "Empowered Entrepreneurs and Hyper Growth in Mobile Era" at Silicon Vally China Wireless (SVCW) Conference in 2013. Snapchat evaluated at $800M is gaining 200 million images daily, growing faster than Instagram (130M users), Facebook (1B users) and Twitter (550M users). Instagram hits 5 Million video uploads within 24 hours. In China, Alibaba's gross merchandise volume surpassed Amazon and eBay in Q4 2012. Sina's Weibo, Chinese's version of Twitter, is growing at 2x Year To Year with a 530 million users from zero revenue to $100 Million revenue in a year. Our investor panel would discuss upcoming startup to watch and past successful investment.

Empowered Entrepreneurs and Hyper Growth in Mobile Era

Bess Ho

Mobile is the new Godzilla July 2011 FCIP

RZasadzinski

WITI Summit 2013 Mobile Trend

Bess Ho

Everyone remembers the story of the boy who cried wolf. In the digital world our equivalent is mobile. We are so used to mobile evangelists proclaiming it’s the “year of mobile” that you can actuall hear the collective groans at industry conferences. Eyes roll, shoulders shrug, minds tune out, and eventually people start playing around with their mobile phones. Now I’m from Ohio so I’m not entirely sure but I think that’s what they call irony.

2012 3 9 pret a-portable

Mindshare

Approximately one hundred and twenty years ago when the telephone was invented, nobody could imagine the concept of real time conversations with people from all over the city, let alone the world. People were still relying on the pony express and the telegraph to exchange communications with one another. Terms such as "telephone operator," "dial tone,” and "cordless telephone" had yet to be invented.

webs eye Abstract 2107

ioshean

What's hot (20)

The Cloud and the Car

The Web is the platform, @lxjs

Mobile Web Evolution - Rich Mobile Applications and Real-time Web UX

Cloud Company

trends in online publishing

The IBM Social Business Toolkit

Putting Web Into Native App

WITI Mobile Development Workshop 2012

Future Tech for Concur User Conference

WITI.ORG Women Technology Summit 2012

Mobile disrupts the cloud

Van wyk hothouse mobile 2012 sydney

Mobile development : reaching critical mass

Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...

Future of Mobility

Empowered Entrepreneurs and Hyper Growth in Mobile Era

Mobile is the new Godzilla July 2011 FCIP

WITI Summit 2013 Mobile Trend

2012 3 9 pret a-portable

webs eye Abstract 2107

Viewers also liked

Simple Steps to UX/UI Web Design

Koombea

Classification of mental disorder

Nursing Path

A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...

SlideShare

10 Digital Hacks Every Marketer Should Know

Mark Fidelman

Management of medical emergencies in the dental practice

Kanika Manral

70+ Inspirational Quotes from Cannes Lions 2012

Alemsah Ozturk

Environmental Science (EVS) : Plants and Trees (Class I)

theeducationdesk

Building a keyboard from scratch

Jesse Vincent

Philippine Indigenous Art

tessie t. sagadraca

congenital anomalies of renal system

Ria Saira

Mineral & energy resources

Army public school

What Do Real Women Look Like? 100 Stock Photos of Real Women

Twenty20 Inc.

The New Multiscreen World By Google

servicesmobiles.fr

Size exclusion chromatography

Mandvi Shandilya

Cell block and liquid based cytology

Dr Neha Mahajan

Assembly language 8086

John Cutajar

Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013

K.Mohamed Faizal

Hiv recent guidelines naco 2015

Mehakinder Singh

100 esl-games

Yachay Tech

GMAT Math Flashcards

GMAT Prep Now

Viewers also liked (20)

Simple Steps to UX/UI Web Design

Classification of mental disorder

A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...

10 Digital Hacks Every Marketer Should Know

Management of medical emergencies in the dental practice

70+ Inspirational Quotes from Cannes Lions 2012

Environmental Science (EVS) : Plants and Trees (Class I)

Building a keyboard from scratch

Philippine Indigenous Art

congenital anomalies of renal system

Mineral & energy resources

What Do Real Women Look Like? 100 Stock Photos of Real Women

The New Multiscreen World By Google

Size exclusion chromatography

Cell block and liquid based cytology

Assembly language 8086

Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013

Hiv recent guidelines naco 2015

100 esl-games

GMAT Math Flashcards

Similar to The Future of UI - How Mobile Design is Shaping The Web 2

A modern website cannot exist anymore nowadays without a powerful mobile version compatible with various types of smartphones and mobile platforms. I will give guidelines about general web mobile design process and problems (content strategy, touch-screen issues…). I will present some special features of mobile devices that must be considered (screen sizes, viewport…). I will explain the main different possible approaches for Drupal mobile website building (dedicated modules, Responsive Web Design and CSS3 media queries, Cloud services...) and I will show some cases studies.

How to build a mobile website with Drupal?

LEKTUM

Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform? Enter Responsive Web Design. Many experts are not leaning on one static design but on structured content that adapts to its given environment. In this talk, we are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods of implementation.

Responsive Design

The Future of UI - How Mobile Design is Shaping The Web 2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to The Future of UI - How Mobile Design is Shaping The Web 2

Similar to The Future of UI - How Mobile Design is Shaping The Web 2 (20)

More from Sara Cannon

More from Sara Cannon (20)

Recently uploaded

Recently uploaded (20)

The Future of UI - How Mobile Design is Shaping The Web 2