Imagine 2014 Responsive How-To Breakout Session by Eric Wiese
Pragmatic responsive web design industry session 7
-
Upload
alexandre-marreiros -
Category
Technology
-
view
144 -
download
1
Transcript of Pragmatic responsive web design industry session 7
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
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”
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
“ 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
320
x
480480 x
320
768 x
1024
1024 x 768
1920 x 1080
Smartphone Tablet Laptops Desktops
2015Alexandre
Marreiros
Strategy
Context
Content
Interaction
Sketch
Review
Wire-
frameDesign
Prototyping
Validate
Launch
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
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
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
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
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