Pragmatic responsive web design industry session 7
Download as PPTX, PDF1 like796 views
This document contains information about Alexandre Marreiros, including his background, roles, and contacts. It discusses responsive web design and how the web has evolved to be consumed by different devices. It emphasizes adapting design and functionality for different devices while maintaining a single application. It also covers some responsive design patterns and concepts like content, typography, and layout that should remain consistent across viewports.
Pragmatic responsive web design industry session 7
- 1. Pragmatic Responsive Web Design/Develop Alexandre Marreiros
- 2. 2015 Alexandre 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: amarreiros@innovagency.com / amarreiros@gmail.com @alexmarreiros http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21 www.digitalmindignition.com
- 3. 2015 Alexandre 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”
- 5. 2015 Alexandre 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
- 6. 2015 Alexandre 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
- 7. 2015 Alexandre 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;
- 9. 2015 Alexandre 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
- 12. 2015 Alexandre Marreiros 320 x 480 480 x 320 768 x 1024 1024 x 768 1920 x 1080 Smartphone Tablet Laptops Desktops
- 22. 2015 Alexandre 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
- 23. 2015 Alexandre Marreiros Core Concepts and elements who would be the same across viewports: TypeFace Shape Form and Colour Tone of Voice
- 24. 2015 Alexandre 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
- 26. 2015 Alexandre 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;
- 28. 2015 Alexandre Marreiros Web is fluid by default we need to go back to that time when our concern our the content and not the delivery
- 31. 2015 Alexandre 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
- 32. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014 BootStrap • Is OpeSource; • Based on Open Standards; • W3C Friend; • Developed by twitter to accelarate their web 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; 2015 Alexandre Marreiros
- 35. 2015 Alexandre 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: amarreiros@innovagency.com / amarreiros@gmail.com @alexmarreiros http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21 www.digitalmindignition.com