Pragmatic responsive web design industry session 7

Pragmatic ResponsiveWeb Design/Develop

Alexandre Marreiros

2015Alexandre

Marreiros

About

CTO @ Innovagency

Technical Trainer, Speaker & Consultant as Self Employee

Lecturer @ EDIT

Software Developer & Architect as Consultant

Tech Writer and Reviewer as Self Employee

Digital Technical UX Consultant

Microsoft DevCamp Trainer

Microsoft Most Valuable Professional for Windows Platform

MCPD

Alexandre Marreiros

Contacts:[email protected] / [email protected]

@alexmarreiros

http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21

www.digitalmindignition.com

mailto:[email protected]



http://www.digitalmindignition.com/

2015Alexandre

MarreirosEbullientech.com

“The World Wide Web (WWW, W3) is an information system of

interlinked hypertext documents that are accessed via the

Internet” Wikipedia

“ The initial Goal of the web was to spread knowledge ”

“ The last century had return the Web to his open

Standards and the usage of the semantic as a way to

categorize and rate Content”

“ Technology had bring us new ways to interact with the web, and the

reinforce of the standards to re-allow that the web can be consumed not

only by humans but also by systems”

http://en.wikipedia.org/wiki/Hypertext

2015Alexandre

Marreiros

2015Alexandre

Marreiros

“ 77% of People use smart phone as their preferred

médium for navigating on the web or searching ” Nielsen - Google

“ 45% of User’s expect to have a contínuos

experience across multiple devices ” Toledo - Microsoft

“ The most used Mobile application since the

begining of Smartphone era are the Browser (…) ”

“ Almost all user’s expect to have a fluid and device

driven navigation when interacting with the Web ”

Smashing Magazine

2015Alexandre

Marreiros

Responsive webDesign is about to

anchieve the expectation of the user

determining him by:

The device used

The context of the usage of the device

2015Alexandre

Marreiros

Responsive Design allows to:

• One application to mantain witch runs

everywhere;

• SEO improvement;

• Give to the user the sence of continuity;

• Adapt design and functionality to diferente

devices;

• Future proof and ready for the next device;

2015Alexandre

Marreiros

2015Alexandre

Marreiros

“ 77% of People use smart phone as their preferred

médium for navigating on the web or searching ” Nielsen - Google

“ Smartphone users have expectations that take us to a all

new level of the Web Game” Steve Jobs

“ 91% of Mobile user’s keep their device within arm’s 100%

of the time” IBM

2015Alexandre

Marreiros

2015Alexandre

Marreiros

320

x

480480 x

320

768 x

1024

1024 x 768

1920 x 1080

Smartphone Tablet Laptops Desktops

2015Alexandre

Marreiros

2015Alexandre

Marreiros

Strategy

Context

Content

Interaction

Sketch

Review

Wire-

frameDesign

Prototyping

Validate

Launch

2015Alexandre

Marreiros

2015Alexandre

Marreiros

Core Concepts we should focus again taht we

have partial forget with all the focus on devices

and viewports:

Content and the way we use that

Typography

Layout

Shape Form and Colour

Tone of voice

User Flow and journey

2015Alexandre

Marreiros

Core Concepts and elements who would be the

same across viewports:

TypeFace

Shape Form and Colour

Tone of Voice

2015Alexandre

Marreiros

Sugested references:

- Talk by Brad Frost at beyond Tellerand event url:

http://responsivedesign.is/resources/videos/atomic-design

- Talk by Pedro Moreira da Silva at first industry Sessions By Edit url:

https://vimeo.com/84622243

http://responsivedesign.is/resources/videos/atomic-design

https://vimeo.com/84622243

2015Alexandre

Marreiros

2015Alexandre

Marreiros

Mostly Fluid Responsive Patterns • Mostly Fluid: The page keeps is form for almost all the screen sizes,

changing only on the phone with the smaller sizes;

2015Alexandre

Marreiros

2015Alexandre

Marreiros

Web is fluid by default we need to go back to that time when our

concern our the content and not the delivery

2015Alexandre

Marreiros

2015Alexandre

Marreiros

We Work for user’s

We canot assume viewport or bandwith as a way

to know what’s the device on the other side

We need to Build on what we know the Content

Get Ready for future

Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014

BootStrap• Is OpeSource;

• Based on Open Standards;

• W3C Friend;

• Developed by twitter to accelarate theirweb development;

• Is a platform that offers buttons, fonts, styles and more;

• For some authors are a CSS framework. He inherit some concepts but is more then that;

• Based on a Column System;

• Technical Foundation: HTML;

CSS;

JavaScript;

2015Alexandre

Marreiros


2015Alexandre

Marreiros

2015Alexandre

Marreiros

About

CTO @ Innovagency

Technical Trainer, Speaker & Consultant as Self Employee

Lecturer @ EDIT

Software Developer & Architect as Consultant

Tech Writer and Reviewer as Self Employee

Digital Technical UX Consultant

Microsoft DevCamp Trainer

Microsoft Most Valuable Professional for Windows Platform

MCPD

Alexandre Marreiros

Contacts:[email protected] / [email protected]

@alexmarreiros


www.digitalmindignition.com





Pragmatic responsive web design industry session 7

Technology

Transcript of Pragmatic responsive web design industry session 7