SlideShare ist ein Scribd-Unternehmen logo
1 von 34
Downloaden Sie, um offline zu lesen
Alexandre Marreiros
The Trainner

                          • CTO @ INNOVAGENCY
                          • Tech Trainner & Speaker as
                            Idependent
                          • Tech and Buis Consultant as
@alexmarreiros
Digitalmindignition.com
                            Independent
amarreiros@gmail.com



                                                 Alexandre Marreiros
“The control which designers know in the print
medium, and often desire in the web medium, is
simply a function of the limitation of the printed
page. We should embrace the fact that the web
doesn’t have the same constraints, and design
for this flexibility. But first, we must “accept the
web and flow of things.”
                      John Allsopp, “A Dao of Web Design”


                                                Alexandre Marreiros
http://commons.wikimedia.org/wiki/File:Architecture_Cologne.jpg


                                              Alexandre Marreiros
Web work is a all different story

                   Browser’s



    Resolutions
    and sizes

                  User’s
                               Devices




                                         Alexandre Marreiros
Landscape / Portrait




    •   http://www.sermonaudio.com/new_details.asp?ID=30996


                                            Alexandre Marreiros
Web Client desires
“Almost every new client these days wants a mobile version of
their website. It’s practically essential after all: one design for
the BlackBerry, another for the iPhone, the iPad, netbook, Kindle
— and all screen resolutions must be compatible, too. In the
next five years, we’ll likely need to design for a number of
additional inventions. When will the madness stop? It won’t, of
course.”
                                                          Kayla Knight




                                                            Alexandre Marreiros
So is just to Be Flexible ?




    http://academiafabiocosta.blogspot.pt/2011/06/faca-exercicios-para-melhorar-sua.html

                                                                    Alexandre Marreiros
Flexible Web Design




Ethan Marcotte Flexibel Design example
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html


                                                            Alexandre Marreiros
Flexible Web Design
     There still a problem to solve
     •User expetation
     •And sizes design/cross devices



     “…no design, fixed or fluid,
     scales seamlessly beyond the
     context for which it was
     originally intended.”
                                       Alexandre Marreiros
“responsive architecture”
http://www.youtube.com/watch?feature=player_embedded&v=XYV0




                                               Alexandre Marreiros
Responsive Web Design
“This is our way forward. Rather than tailoring disconnected
designs to each of an ever-increasing number of web devices,
we can treat them as facets of the same experience. We can
design for an optimal viewing experience, but embed standards-
based technologies into our designs to make them not only
more flexible, but more adaptive to the media that renders
them. In short, we need to practice responsive web design.”
                                                  Ethan Marcotte




                                                        Alexandre Marreiros
Responsive Web Design
• Flexible Images (
  http://www.flexiblewebbook.com/bonus.html)




<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The
  Baker Street Inquirer"/></a></h1>

                                                      Alexandre Marreiros
Responsive Web Design
• Fluid Grids
 (http://www.alistapart.com/articles/fluidgrids/)




                                                    Alexandre Marreiros
Responsive Web Design
• Media Queries
 (http://www.w3.org/TR/css3-mediaqueries/ )




                                              Alexandre Marreiros
Responsive Web Design Examples




               http://mdcraftbeerfestival.com/
                                     Alexandre Marreiros
Responsive Web Design Examples




                  http://www.formfett.net/
                                  Alexandre Marreiros
Responsive Web Design Examples




                http://forefathersgroup.com/
                                    Alexandre Marreiros
Media Queries
• Part of the CSS3 specification

• Allows us to target not only certain device classes, but to
  actually inspect the physical characteristics of the device
  rendering our work

• Are conditional styles




                                                         Alexandre Marreiros
Media Queries
• Example:
 @media screen and (max-device-width: 480px)
  {
      .column { float: none; }

  }




                                               Alexandre Marreiros
Responsive Web Design
First we target what our conditional with the attribute
                           @media
Examples:

@media only screen and (max-width:1023 px)                     small
screens

@media only screen and (min-device-width: 481px ) and (max-device
width:1024 px) and (orientation: landscape)                 
      ipad landscap



@media only screen and (min-device-width: 481px ) and (max-device
width:1024 px) and (orientation: portrait)               
    ipad portrait

                                                             Alexandre Marreiros
Responsive Web Design
Table with the most common resolutions




                                         Alexandre Marreiros
Responsive Web Design
Table with the most common resolutions




                                         Alexandre Marreiros
Responsive Web Design
Table with the most common resolutions




                                         Alexandre Marreiros
Responsive Web Design
• Let’s build some responsiviness. Hands on Lab 1st part




                                   http://www.techdigest.tv/2012/07/tech_pentathlon.html




                                                                        Alexandre Marreiros
Responsive Frameworks




                        Alexandre Marreiros
Mobile Boilerplate




• a responsive template that puts the focus on mobile devices,
  namely those running Android, iOS, Blackberry and Symbian
  software.


                                                       Alexandre Marreiros
Skeleton




Is a light collection of CSS and JavaScript files that make
   designing responsive sites based on the 960px grid easy.

                                                        Alexandre Marreiros
BluCSS




•   CSS framework that, as usual, uses a flexible grid to facilitate responsive design.
    One feature that stands out is its responsive images, something many of these
    frameworks leave out; apply a class to your images and they’ll scale with your
    design. No need to include multiple files at multiple sizes, though be wary of
    unnecessary load on mobile devices with this approach..


                                                                               Alexandre Marreiros
Less




•   Is a CSS starter with four layouts — default at 992px, and tablet, mobile and wide
    mobile sizes — based on a grid system




                                                                            Alexandre Marreiros
Twitter Bootstrap




Twitter Bootstrap includes a responsive grid system in addition
to tons of stellar pre-styled elements like forms, uttons,
navigation menus and more.

                                                        Alexandre Marreiros
Foundation




             Alexandre Marreiros
Responsive Web Design
• Let’s use responsive frameworks, hands on lab part 2




                                  http://www.techdigest.tv/2012/07/tech_pentathlon.html




                                                                       Alexandre Marreiros
Final References
• http://www.mrgeek.me/?s=bootstrap
• http://www.abookapart.com/products/mobile-first
• http://www.abookapart.com/products/responsive-web-
  design
• http://www.smashingmagazine.com/responsive-web-design-
  guidelines-tutorials/
• Workshops exercises based on canonical web examples:
   –




                                                 Alexandre Marreiros

Weitere ähnliche Inhalte

Ähnlich wie Edit open day responsive design frameworks

Pragmatic Responsive web design systems - #7 Industry Sessions by EDIT. | UX...
Pragmatic Responsive web design systems -  #7 Industry Sessions by EDIT. | UX...Pragmatic Responsive web design systems -  #7 Industry Sessions by EDIT. | UX...
Pragmatic Responsive web design systems - #7 Industry Sessions by EDIT. | UX...EDIT. - Disruptive Digital Education
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
 
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into ShapeWVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into ShapeKen Tabor
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Thomas Carney
 
Theming for mobile devices recent
Theming for mobile devices recentTheming for mobile devices recent
Theming for mobile devices recentArtem Shymko
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101FITC
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Chris Love
 
FITC - Bootstrap Unleashed
FITC - Bootstrap UnleashedFITC - Bootstrap Unleashed
FITC - Bootstrap UnleashedRami Sayar
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignDebra Shapiro
 
EXPERTALKS: Sep 2013 - Responsive Web Design
EXPERTALKS: Sep 2013 - Responsive Web DesignEXPERTALKS: Sep 2013 - Responsive Web Design
EXPERTALKS: Sep 2013 - Responsive Web DesignEXPERTALKS
 
Responsive web designing course in Chandigarh
Responsive web designing course in Chandigarh Responsive web designing course in Chandigarh
Responsive web designing course in Chandigarh Big Boxx Animation Academy
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Designsimonstarr
 
Vivek Upadhyay | Résumé
Vivek Upadhyay | Résumé Vivek Upadhyay | Résumé
Vivek Upadhyay | Résumé Vivek Upadhyay
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Kevin Bruce
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignChris Love
 

Ähnlich wie Edit open day responsive design frameworks (20)

Boot strapandresponsiveintro
Boot strapandresponsiveintroBoot strapandresponsiveintro
Boot strapandresponsiveintro
 
Pragmatic Responsive web design systems - #7 Industry Sessions by EDIT. | UX...
Pragmatic Responsive web design systems -  #7 Industry Sessions by EDIT. | UX...Pragmatic Responsive web design systems -  #7 Industry Sessions by EDIT. | UX...
Pragmatic Responsive web design systems - #7 Industry Sessions by EDIT. | UX...
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into ShapeWVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
 
Theming for mobile devices recent
Theming for mobile devices recentTheming for mobile devices recent
Theming for mobile devices recent
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
DS_Upsourcing
DS_UpsourcingDS_Upsourcing
DS_Upsourcing
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
FITC - Bootstrap Unleashed
FITC - Bootstrap UnleashedFITC - Bootstrap Unleashed
FITC - Bootstrap Unleashed
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
EXPERTALKS: Sep 2013 - Responsive Web Design
EXPERTALKS: Sep 2013 - Responsive Web DesignEXPERTALKS: Sep 2013 - Responsive Web Design
EXPERTALKS: Sep 2013 - Responsive Web Design
 
Responsive web designing course in Chandigarh
Responsive web designing course in Chandigarh Responsive web designing course in Chandigarh
Responsive web designing course in Chandigarh
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Vivek Upadhyay | Résumé
Vivek Upadhyay | Résumé Vivek Upadhyay | Résumé
Vivek Upadhyay | Résumé
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design
 

Mehr von Alexandre Marreiros

Xamarin devdays 2017 - PT - connected apps
Xamarin devdays 2017 - PT - connected appsXamarin devdays 2017 - PT - connected apps
Xamarin devdays 2017 - PT - connected appsAlexandre Marreiros
 
ASP.NEt MVC and Angular What a couple
ASP.NEt MVC and Angular What a coupleASP.NEt MVC and Angular What a couple
ASP.NEt MVC and Angular What a coupleAlexandre Marreiros
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web appsAlexandre Marreiros
 
Quick View of Angular JS for High School
Quick View of Angular JS for High SchoolQuick View of Angular JS for High School
Quick View of Angular JS for High SchoolAlexandre Marreiros
 
Pt xug xamarin pratices on big ui consumer apps
Pt xug  xamarin pratices on big ui consumer appsPt xug  xamarin pratices on big ui consumer apps
Pt xug xamarin pratices on big ui consumer appsAlexandre Marreiros
 
Gab2015 azure search as a service
Gab2015 azure search as a serviceGab2015 azure search as a service
Gab2015 azure search as a serviceAlexandre Marreiros
 
Universal Apps Development using HTML 5 and WINJS
Universal Apps Development using HTML 5 and WINJSUniversal Apps Development using HTML 5 and WINJS
Universal Apps Development using HTML 5 and WINJSAlexandre Marreiros
 
Windows8.1 html5 dev paradigm discussion netponto
Windows8.1 html5 dev paradigm discussion netpontoWindows8.1 html5 dev paradigm discussion netponto
Windows8.1 html5 dev paradigm discussion netpontoAlexandre Marreiros
 
Mobile first responsive industry sessions
Mobile first responsive industry sessionsMobile first responsive industry sessions
Mobile first responsive industry sessionsAlexandre Marreiros
 
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1 Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1 Alexandre Marreiros
 
pragmatic Mobile apps choices frameworks and dev
pragmatic Mobile apps choices frameworks and devpragmatic Mobile apps choices frameworks and dev
pragmatic Mobile apps choices frameworks and devAlexandre Marreiros
 

Mehr von Alexandre Marreiros (20)

Agular fromthetrenches2netponto
Agular fromthetrenches2netpontoAgular fromthetrenches2netponto
Agular fromthetrenches2netponto
 
Whats a Chat bot
Whats a Chat botWhats a Chat bot
Whats a Chat bot
 
Type of angular 2
Type of angular 2Type of angular 2
Type of angular 2
 
Xamarin devdays 2017 - PT - connected apps
Xamarin devdays 2017 - PT - connected appsXamarin devdays 2017 - PT - connected apps
Xamarin devdays 2017 - PT - connected apps
 
ASP.NEt MVC and Angular What a couple
ASP.NEt MVC and Angular What a coupleASP.NEt MVC and Angular What a couple
ASP.NEt MVC and Angular What a couple
 
Angular 2
Angular 2Angular 2
Angular 2
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
 
Xamarin.forms
Xamarin.forms Xamarin.forms
Xamarin.forms
 
Quick View of Angular JS for High School
Quick View of Angular JS for High SchoolQuick View of Angular JS for High School
Quick View of Angular JS for High School
 
Pt xug xamarin pratices on big ui consumer apps
Pt xug  xamarin pratices on big ui consumer appsPt xug  xamarin pratices on big ui consumer apps
Pt xug xamarin pratices on big ui consumer apps
 
Get satrted angular js day 2
Get satrted angular js day 2Get satrted angular js day 2
Get satrted angular js day 2
 
Get satrted angular js
Get satrted angular jsGet satrted angular js
Get satrted angular js
 
Gab2015 azure search as a service
Gab2015 azure search as a serviceGab2015 azure search as a service
Gab2015 azure search as a service
 
WebSite development using WinJS
WebSite development using WinJSWebSite development using WinJS
WebSite development using WinJS
 
Universal Apps Development using HTML 5 and WINJS
Universal Apps Development using HTML 5 and WINJSUniversal Apps Development using HTML 5 and WINJS
Universal Apps Development using HTML 5 and WINJS
 
Html5ignition newweborder
Html5ignition newweborderHtml5ignition newweborder
Html5ignition newweborder
 
Windows8.1 html5 dev paradigm discussion netponto
Windows8.1 html5 dev paradigm discussion netpontoWindows8.1 html5 dev paradigm discussion netponto
Windows8.1 html5 dev paradigm discussion netponto
 
Mobile first responsive industry sessions
Mobile first responsive industry sessionsMobile first responsive industry sessions
Mobile first responsive industry sessions
 
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1 Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
 
pragmatic Mobile apps choices frameworks and dev
pragmatic Mobile apps choices frameworks and devpragmatic Mobile apps choices frameworks and dev
pragmatic Mobile apps choices frameworks and dev
 

Kürzlich hochgeladen

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 

Kürzlich hochgeladen (20)

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 

Edit open day responsive design frameworks

  • 2. The Trainner • CTO @ INNOVAGENCY • Tech Trainner & Speaker as Idependent • Tech and Buis Consultant as @alexmarreiros Digitalmindignition.com Independent amarreiros@gmail.com Alexandre Marreiros
  • 3. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the web and flow of things.” John Allsopp, “A Dao of Web Design” Alexandre Marreiros
  • 5. Web work is a all different story Browser’s Resolutions and sizes User’s Devices Alexandre Marreiros
  • 6. Landscape / Portrait • http://www.sermonaudio.com/new_details.asp?ID=30996 Alexandre Marreiros
  • 7. Web Client desires “Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.” Kayla Knight Alexandre Marreiros
  • 8. So is just to Be Flexible ? http://academiafabiocosta.blogspot.pt/2011/06/faca-exercicios-para-melhorar-sua.html Alexandre Marreiros
  • 9. Flexible Web Design Ethan Marcotte Flexibel Design example http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html Alexandre Marreiros
  • 10. Flexible Web Design There still a problem to solve •User expetation •And sizes design/cross devices “…no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended.” Alexandre Marreiros
  • 12. Responsive Web Design “This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards- based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.” Ethan Marcotte Alexandre Marreiros
  • 13. Responsive Web Design • Flexible Images ( http://www.flexiblewebbook.com/bonus.html) <h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/></a></h1> Alexandre Marreiros
  • 14. Responsive Web Design • Fluid Grids (http://www.alistapart.com/articles/fluidgrids/) Alexandre Marreiros
  • 15. Responsive Web Design • Media Queries (http://www.w3.org/TR/css3-mediaqueries/ ) Alexandre Marreiros
  • 16. Responsive Web Design Examples http://mdcraftbeerfestival.com/ Alexandre Marreiros
  • 17. Responsive Web Design Examples http://www.formfett.net/ Alexandre Marreiros
  • 18. Responsive Web Design Examples http://forefathersgroup.com/ Alexandre Marreiros
  • 19. Media Queries • Part of the CSS3 specification • Allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work • Are conditional styles Alexandre Marreiros
  • 20. Media Queries • Example: @media screen and (max-device-width: 480px) { .column { float: none; } } Alexandre Marreiros
  • 21. Responsive Web Design First we target what our conditional with the attribute @media Examples: @media only screen and (max-width:1023 px)  small screens @media only screen and (min-device-width: 481px ) and (max-device width:1024 px) and (orientation: landscape)  ipad landscap @media only screen and (min-device-width: 481px ) and (max-device width:1024 px) and (orientation: portrait)  ipad portrait Alexandre Marreiros
  • 22. Responsive Web Design Table with the most common resolutions Alexandre Marreiros
  • 23. Responsive Web Design Table with the most common resolutions Alexandre Marreiros
  • 24. Responsive Web Design Table with the most common resolutions Alexandre Marreiros
  • 25. Responsive Web Design • Let’s build some responsiviness. Hands on Lab 1st part http://www.techdigest.tv/2012/07/tech_pentathlon.html Alexandre Marreiros
  • 26. Responsive Frameworks Alexandre Marreiros
  • 27. Mobile Boilerplate • a responsive template that puts the focus on mobile devices, namely those running Android, iOS, Blackberry and Symbian software. Alexandre Marreiros
  • 28. Skeleton Is a light collection of CSS and JavaScript files that make designing responsive sites based on the 960px grid easy. Alexandre Marreiros
  • 29. BluCSS • CSS framework that, as usual, uses a flexible grid to facilitate responsive design. One feature that stands out is its responsive images, something many of these frameworks leave out; apply a class to your images and they’ll scale with your design. No need to include multiple files at multiple sizes, though be wary of unnecessary load on mobile devices with this approach.. Alexandre Marreiros
  • 30. Less • Is a CSS starter with four layouts — default at 992px, and tablet, mobile and wide mobile sizes — based on a grid system Alexandre Marreiros
  • 31. Twitter Bootstrap Twitter Bootstrap includes a responsive grid system in addition to tons of stellar pre-styled elements like forms, uttons, navigation menus and more. Alexandre Marreiros
  • 32. Foundation Alexandre Marreiros
  • 33. Responsive Web Design • Let’s use responsive frameworks, hands on lab part 2 http://www.techdigest.tv/2012/07/tech_pentathlon.html Alexandre Marreiros
  • 34. Final References • http://www.mrgeek.me/?s=bootstrap • http://www.abookapart.com/products/mobile-first • http://www.abookapart.com/products/responsive-web- design • http://www.smashingmagazine.com/responsive-web-design- guidelines-tutorials/ • Workshops exercises based on canonical web examples: – Alexandre Marreiros