Pragmatic responsive web design industry session 7
•Download as PPTX, PDF•
1 like•791 views
Pragmatic Responsive Web Design - industry session 7
Recommended
More Related Content
Similar to Pragmatic responsive web design industry session 7
Similar to Pragmatic responsive web design industry session 7 (20)
More from Alexandre Marreiros
More from Alexandre Marreiros (20)
Recently uploaded
Recently uploaded (20)
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