SlideShare una empresa de Scribd logo
1 de 61
Descargar para leer sin conexión
Responsive Web Design & Mobile Web Development A Technical and Business approach
WHY WE SHOULD GO ON WEB ? ,[object Object]
 
Why Web ? ,[object Object]
SAME TECHNOLOGY, DIFFERENT BEHAVIOR ? ,[object Object]
What about web ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web ? What Web ?
Web ? What Web ?   One Web  means making, as far as is reasonable, the same information and services available to users  irrespective of the device  they are using. However, it  does not mean  that exactly the same information is available in exactly the  same representation  across all devices W3.org - Mobile Web Best Practices 1.0 - 2008
[object Object]
GIVE US SOME CONCRETE ,[object Object]
Interests of the Any Web devices approaches ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Interests of the Any Web devices approaches ,[object Object],[object Object],[object Object],[object Object],[object Object],industrially Unique Smooth Sexy Fast ,[object Object],[object Object]
[object Object]
Interests of the Any Web devices approaches ,[object Object],[object Object],[object Object],Navigation Caching URL Testing Browser support Ergonomic designing HTML5 support SEO Javascript
But We (kinda) did it !  ,[object Object]
ADAPT OR DIE ,[object Object]
What is « Responsive Web design » ? http://www.alistapart.com/articles/responsive-web-design
What is « Responsive Web design » ? ,[object Object],Responsive Design Fluid Grids Flexibles images Media Queries
Why is « Responsive Web design » so hype ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Adapt or Die ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
THE MOBILE WEB NIGHTMARE ,[object Object]
I’m a Mobile Developper ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I’m a Mobile Developper ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I am a Desktop Web Designer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I am a Desktop Web Designer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I am a Desktop Web Designer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
One Website For all devices :  Adapt to mobile ,[object Object],[object Object],[object Object],[object Object]
One Website For all devices :  CSS only ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I am a Desktop Web Designer
One Website For all devices : Framework driven ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I am a Desktop Web Designer
One Website For all devices :  Handcrafted ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I am a Desktop Web Designer
WebApp with native equivalent quality ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
A TOUCHING THOUGHT! ,[object Object]
Touch handling ,[object Object],[object Object],[object Object]
Touch handling ,[object Object],[object Object],[object Object],[object Object]
Touch handling ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Touch handling ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Touch handling ,[object Object],[object Object],[object Object],[object Object]
Touch handling ,[object Object],var externalLinkRegex = new RegExp("^([a-z;A-Z;0-9])+:"); // Catch click so no page reload occurs $('body').on('click', 'a', function (e) { var $link = $(e.target).closest('a'); var href = $link.attr('href'); // do not prevent click on external links if(!href || !externalLinkRegex.test(href)){ e.preventDefault(); } }); $('body').on('tap', 'a', function (e) { var $link = $(e.target).closest('a'); var href = $link.attr('href'); if(!href) return false; if(href === '#') return false; if(externalLinkRegex.test(href)) return true; // only navigate if href is not # router.navigate(href, true); return false; }); // Submit forms $('body').on('tap', 'a', function (e) { var $target = $(e.target); if(!$target.closest('input[type="submit"]').length)  return; var $form = $target.closest('form'); if($form.length){ $form.first().submit(); return false; } });
Touch handling ,[object Object],[object Object]
Touch handling ,[object Object],[object Object]
DISCOVERING A NEW WORLD ,[object Object]
jQuery Mobile ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
jQuery Mobile and URLs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile jQuery Mobile Plugins
Zepto, jQMobi ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile jqMobi Zepto jQuery Mobile Plugins
Modernizr sur mobile ,[object Object],[object Object],[object Object],[object Object]
Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile Modernizr jqMobi Zepto jQuery Mobile Plugins
Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
How to increase the perceived performance ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Mobile First ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Performance Ergonomic Capabilities Design Usage Focus Dynamic  Loading
Mobile First ,[object Object],“ should be on the lips of every web designer . “ Ethan  Marcotte   ,  Responsive Web Design
Packaging of Web Apps ,[object Object],VS
A LAST SMALL ADVICE ,[object Object]
A word to Manager ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
A word to Developper ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
About us
Thank you This is an internal technical presentation done by BSD. Our twitter : @AtosWorldline Atos, the Atos logo, Atos Consulting, Atos Worldline, Atos Sphere, Atos Cloud and Atos WorldGrid are registered trademarks of Atos SA. June 2011

Más contenido relacionado

La actualidad más candente

Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordRuss Weakley
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web AppJason Grigsby
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Designarborwebsolutions
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentJonas Päckos
 
Overall presentation multiplatform_ux_patterns
Overall presentation multiplatform_ux_patternsOverall presentation multiplatform_ux_patterns
Overall presentation multiplatform_ux_patternsStefano Fornari
 
Responsive web design
Responsive web designResponsive web design
Responsive web designRuss Weakley
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016Robert Nyman
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?Jason Grigsby
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanRobert Nyman
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignClarissa Peterson
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Kate Walser
 
Responsive Web Design - but for real!
Responsive Web Design - but for real!Responsive Web Design - but for real!
Responsive Web Design - but for real!Rudy Rigot
 
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptjQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptPhilipp Bosch
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
Make mobile web apps rock
Make mobile web apps rockMake mobile web apps rock
Make mobile web apps rockChris Love
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App ChallengesJason Grigsby
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfChristian Heilmann
 

La actualidad más candente (20)

Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzword
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
Overall presentation multiplatform_ux_patterns
Overall presentation multiplatform_ux_patternsOverall presentation multiplatform_ux_patterns
Overall presentation multiplatform_ux_patterns
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
 
Responsive Web Design - but for real!
Responsive Web Design - but for real!Responsive Web Design - but for real!
Responsive Web Design - but for real!
 
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptjQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
Smart Design
Smart Design Smart Design
Smart Design
 
Make mobile web apps rock
Make mobile web apps rockMake mobile web apps rock
Make mobile web apps rock
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 

Destacado

Slow Food Youth Network Tokyo 活動紹介
Slow Food Youth Network Tokyo 活動紹介Slow Food Youth Network Tokyo 活動紹介
Slow Food Youth Network Tokyo 活動紹介Taichi Isaku
 
Towards a System of Pattern-Enhanced Cooking in the Inclusively Creative City
Towards a System of Pattern-Enhanced  Cooking in the Inclusively Creative CityTowards a System of Pattern-Enhanced  Cooking in the Inclusively Creative City
Towards a System of Pattern-Enhanced Cooking in the Inclusively Creative CityTaichi Isaku
 
наш детский сад «ляйсан»
наш детский сад «ляйсан»наш детский сад «ляйсан»
наш детский сад «ляйсан»lili1281
 
Effectiveness of primary correction of traumatic telecanthus
Effectiveness of primary correction of traumatic telecanthusEffectiveness of primary correction of traumatic telecanthus
Effectiveness of primary correction of traumatic telecanthusDr. SHEETAL KAPSE
 
【コークッキング】人間らしく創造的な社会をつくる「未来の料理」について
【コークッキング】人間らしく創造的な社会をつくる「未来の料理」について【コークッキング】人間らしく創造的な社会をつくる「未来の料理」について
【コークッキング】人間らしく創造的な社会をつくる「未来の料理」についてTaichi Isaku
 
From Chefs to Kitchen Captains: A Leader Figure for Collaborative Networks in...
From Chefs to Kitchen Captains: A Leader Figure for Collaborative Networks in...From Chefs to Kitchen Captains: A Leader Figure for Collaborative Networks in...
From Chefs to Kitchen Captains: A Leader Figure for Collaborative Networks in...Taichi Isaku
 
「食材」から始まる料理の発想支援ツール【クッキング・ランゲージ】
「食材」から始まる料理の発想支援ツール【クッキング・ランゲージ】「食材」から始まる料理の発想支援ツール【クッキング・ランゲージ】
「食材」から始まる料理の発想支援ツール【クッキング・ランゲージ】Taichi Isaku
 
Management of complications of mandibular trauma
Management of complications of mandibular traumaManagement of complications of mandibular trauma
Management of complications of mandibular traumaDr. SHEETAL KAPSE
 
Soft tissue response and healing in omfs
Soft tissue response and healing in omfsSoft tissue response and healing in omfs
Soft tissue response and healing in omfsDr. SHEETAL KAPSE
 
Bone biology and bone healing
Bone biology and bone healingBone biology and bone healing
Bone biology and bone healingDr. SHEETAL KAPSE
 
Preliminary care in maxillofacial injuries
Preliminary care in maxillofacial injuriesPreliminary care in maxillofacial injuries
Preliminary care in maxillofacial injuriesDr. SHEETAL KAPSE
 
Approaches to maxillofacial skeleton
Approaches to maxillofacial skeletonApproaches to maxillofacial skeleton
Approaches to maxillofacial skeletonDr. SHEETAL KAPSE
 
Use of grafts & alloplastic material in maxillofacial trauma
Use of grafts & alloplastic material in maxillofacial traumaUse of grafts & alloplastic material in maxillofacial trauma
Use of grafts & alloplastic material in maxillofacial traumaDr. SHEETAL KAPSE
 
advanced trauma life support
advanced trauma life supportadvanced trauma life support
advanced trauma life supportDr. SHEETAL KAPSE
 

Destacado (18)

Slow Food Youth Network Tokyo 活動紹介
Slow Food Youth Network Tokyo 活動紹介Slow Food Youth Network Tokyo 活動紹介
Slow Food Youth Network Tokyo 活動紹介
 
Drawing is not Dead!
Drawing is not Dead!Drawing is not Dead!
Drawing is not Dead!
 
Andres
AndresAndres
Andres
 
Towards a System of Pattern-Enhanced Cooking in the Inclusively Creative City
Towards a System of Pattern-Enhanced  Cooking in the Inclusively Creative CityTowards a System of Pattern-Enhanced  Cooking in the Inclusively Creative City
Towards a System of Pattern-Enhanced Cooking in the Inclusively Creative City
 
наш детский сад «ляйсан»
наш детский сад «ляйсан»наш детский сад «ляйсан»
наш детский сад «ляйсан»
 
Andres
AndresAndres
Andres
 
Effectiveness of primary correction of traumatic telecanthus
Effectiveness of primary correction of traumatic telecanthusEffectiveness of primary correction of traumatic telecanthus
Effectiveness of primary correction of traumatic telecanthus
 
【コークッキング】人間らしく創造的な社会をつくる「未来の料理」について
【コークッキング】人間らしく創造的な社会をつくる「未来の料理」について【コークッキング】人間らしく創造的な社会をつくる「未来の料理」について
【コークッキング】人間らしく創造的な社会をつくる「未来の料理」について
 
From Chefs to Kitchen Captains: A Leader Figure for Collaborative Networks in...
From Chefs to Kitchen Captains: A Leader Figure for Collaborative Networks in...From Chefs to Kitchen Captains: A Leader Figure for Collaborative Networks in...
From Chefs to Kitchen Captains: A Leader Figure for Collaborative Networks in...
 
「食材」から始まる料理の発想支援ツール【クッキング・ランゲージ】
「食材」から始まる料理の発想支援ツール【クッキング・ランゲージ】「食材」から始まる料理の発想支援ツール【クッキング・ランゲージ】
「食材」から始まる料理の発想支援ツール【クッキング・ランゲージ】
 
Management of complications of mandibular trauma
Management of complications of mandibular traumaManagement of complications of mandibular trauma
Management of complications of mandibular trauma
 
Soft tissue response and healing in omfs
Soft tissue response and healing in omfsSoft tissue response and healing in omfs
Soft tissue response and healing in omfs
 
Bone biology and bone healing
Bone biology and bone healingBone biology and bone healing
Bone biology and bone healing
 
Preliminary care in maxillofacial injuries
Preliminary care in maxillofacial injuriesPreliminary care in maxillofacial injuries
Preliminary care in maxillofacial injuries
 
Npwt
NpwtNpwt
Npwt
 
Approaches to maxillofacial skeleton
Approaches to maxillofacial skeletonApproaches to maxillofacial skeleton
Approaches to maxillofacial skeleton
 
Use of grafts & alloplastic material in maxillofacial trauma
Use of grafts & alloplastic material in maxillofacial traumaUse of grafts & alloplastic material in maxillofacial trauma
Use of grafts & alloplastic material in maxillofacial trauma
 
advanced trauma life support
advanced trauma life supportadvanced trauma life support
advanced trauma life support
 

Similar a Skill Session - Web Multi Device

Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
Trip advsiorhybridpresentation
Trip advsiorhybridpresentationTrip advsiorhybridpresentation
Trip advsiorhybridpresentationElanaBoehm
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make itJonathan Snook
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalAcquia
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile appRyan Stewart
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignCory Webb
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingHemant Sarthak
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-airbrucelawson
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxchitrachauhan21
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampChris Love
 
Eye candy for your iPhone
Eye candy for your iPhoneEye candy for your iPhone
Eye candy for your iPhoneBrian Shim
 

Similar a Skill Session - Web Multi Device (20)

Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Trip advsiorhybridpresentation
Trip advsiorhybridpresentationTrip advsiorhybridpresentation
Trip advsiorhybridpresentation
 
Best Practices for Mobile Web Design
Best Practices for Mobile Web DesignBest Practices for Mobile Web Design
Best Practices for Mobile Web Design
 
Mobile ux sot a and challenges
Mobile ux sot a and challengesMobile ux sot a and challenges
Mobile ux sot a and challenges
 
Mobile UX Challenges
Mobile UX ChallengesMobile UX Challenges
Mobile UX Challenges
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project Coding
 
Responsive SharePoint
Responsive SharePointResponsive SharePoint
Responsive SharePoint
 
TPR4
TPR4TPR4
TPR4
 
TPR4
TPR4TPR4
TPR4
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
Eye candy for your iPhone
Eye candy for your iPhoneEye candy for your iPhone
Eye candy for your iPhone
 

Último

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
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
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
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
 
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
 
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
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
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
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
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
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 

Último (20)

20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
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
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
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
 
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
 
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
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
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
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
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 )
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 

Skill Session - Web Multi Device

  • 1. Responsive Web Design & Mobile Web Development A Technical and Business approach
  • 2.
  • 3.  
  • 4.
  • 5.
  • 6.
  • 7. Web ? What Web ?
  • 8. Web ? What Web ?   One Web  means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices W3.org - Mobile Web Best Practices 1.0 - 2008
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. What is « Responsive Web design » ? http://www.alistapart.com/articles/responsive-web-design
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29. I am a Desktop Web Designer
  • 30.
  • 31. I am a Desktop Web Designer
  • 32.
  • 33. I am a Desktop Web Designer
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47. Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile jQuery Mobile Plugins
  • 48.
  • 49. Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile jqMobi Zepto jQuery Mobile Plugins
  • 50.
  • 51. Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile Modernizr jqMobi Zepto jQuery Mobile Plugins
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 61. Thank you This is an internal technical presentation done by BSD. Our twitter : @AtosWorldline Atos, the Atos logo, Atos Consulting, Atos Worldline, Atos Sphere, Atos Cloud and Atos WorldGrid are registered trademarks of Atos SA. June 2011