Responsive, Scalable and Liquid Design
4 likes1,741 views
Ranjeet Tayi emphasizes the importance of responsive design in user experience, highlighting its evolution from traditional pixel-based design to fluid, adaptable layouts suitable for various devices. The document outlines key concepts such as media queries, content structuring, and the significance of accessibility in creating engaging web experiences. Tayi advocates for a mobile-first approach and suggests that designers must focus on user interactions to meet modern content expectations.
Responsive, Scalable and Liquid Design
- 1. DESIGN Responsive Scalable Liquid UXāer. Ranjeet Tayi Principal - User Experience Design Informatica Corp. www.ranjeeth.com
- 2. Do you remember this?
- 4. Design is simple and we know what we are designing for. 800X600 1024 X 768 90ās ā 00ās
- 5. Interaction target is just a pixel
- 8. Touch screen revolution started. In 2010, 298 million smartphones were sold globally. Smart phones constituted 22% and growing
- 9. Consumers started accessing the internet in ever increasing number. But were disappointed with experience.
- 10. and then Apple launched iPad! Suddenly there was another way to access internet.
- 12. 7,299,959,230+ People in the world 1,217,995,578+ PCs & smartphones
- 13. People started using these new devices as one of the main stream. Apps are great! But people wanted to access main sites.
- 14. Interaction target from a pixel to bunch of pixels Carousel to Swipes
- 16. responsive design is about updating the design to bring out the content not about design Digital solutions are not frames & templates anymoreā¦ They are frames in a extended fluid experiences.
- 17. 1920 px 1440 px 768 px 320 px We need to think about various factors before design
- 18. Responsive Design is AWESOME! ? But it is not easyā¦ It needās different design mindset
- 19. Design thinking in responsive age Perfection is achieved, not when there is noting to add, but when there is nothing to take away. ~Antonine De Saint Exupery
- 20. 1920 px 768 px 320px 1440 px
- 22. Plan & organize your content hierarchy and know what to show on above fold
- 23. Grid Constructs ā Fluid & Flexible Grid Types
- 25. Responsive Media - Images 100% 60% 100% Responsive Scale Responsive Crop
- 26. Responsive Media - Images 800 px 4:1 120px 2:1
- 27. Responsive Media Compression ā Images
- 29. Responsive Media ā Fluid Videos Creating Intrinsic Ratios for Video The idea is to create a box with the proper ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box. Itās that simple. Scaling videos is different than images because videos donāt retain their proportions.
- 30. Responsive Media ā Logos & Branding 320 px 768 px 1440 px 1920 px Scaling logos for modern web and enhancing the brand experience.
- 31. Media quarries The @media rule is used to define different style rules for different media types/devices. Media queries look at the capability of the device, and can be used to check many things, such as: ā¢ width and height of the browser window ā¢ width and height of the device ā¢ orientation ā¢ resolution ā¢ and much more
- 32. Media quarries & Breakpoints Breakpoints is the horizontal width which we want to accommodate in responsive design.
- 33. Examples of responsive design - Informatica Corporate
- 34. Examples of responsive design ā Skinny Ties E-commerce
- 35. Examples of responsive design ā The Boston Globe Editorial
- 36. Examples of responsive design ā Change.org Non profit
- 37. Examples of responsive design ā World Wildlife Fund Wild Life
- 38. Plan Design MonitorDiscover Content Modelling Content Hierarchy Grid Constructs Media Quarries Accessibility Concepts / Sketches Monitor Development UX Governance Usability Testing Accessibility Testing Alpha + Beta Tests Ship Users Requirements / Goals Competitive Analysis Bench Marking Research Insights Kickoff Workshop Information Arc Responsive Patterns Interaction Design Break point designs Visual Design HTML & CSS Prototype Design Testing Design Specifications 2 3 41 Responsive Design Process
- 39. Discover
- 41. Design ā Responsive Patterns Data Iframes Tables Charts & Graphs Responsive Charts Data Visualizations Layouts Re-flowing Layouts Source Order Shift Equal Width Lists Off Canvas Grid Blocks Navigation Single Level Multi Level Breadcrumbs Pagination Media Fluid Images Adaptive Images Image Grids Responsive Logos Responsive Video SVG Icons Modules Carousel Tabs Accordions Massaging Light Box Splash Screens Typography Type Styling Headings + Content Responsive Foot Notes Forms Basic Forms Form Elements
- 42. Design ā Wireframes & Modules
- 43. Design ā Fluid Typography The use of a scalable typographic foundation. Typographic sizes and vertical divisions in content, including all margins and padding, are set in EMs or REMs. Pixels are DEAD
- 44. Design ā SVG Icons SVG is a truly resolution independent technique, that as you can probably tell means that it doesnāt matter if you are looking at an icon, shape or font on any devices. No pixelated icons or fonts anymore.
- 45. Design ā Visual Design
- 46. Design ā Responsive Prototype
- 47. Monitor ā Responsive Testing http://responsivetest.net/ Making responsive needs more attention on testing & debugging on various break points. Test designs and make sure in-depth user analytics and act abased on usage + behavior.
- 48. Monitor ā Accessibility Accessibility is not about disability. It is contextual and every one should able to access content from any devices / Resolutions.
- 49. Responsive Frame Work They usually offer complete frameworks with configurable features like styled- typography, sets of forms, buttons, icons and other reusable components built to provide navigation, alerts, popovers, and more, images frames, HTML templates, custom settings, etc.
- 54. Grid Construction Grid system help designers and developers to make fully responsive website, eliminating the frustration of flicking between browsers looking for alignment errors.
- 55. Rapid prototyping made easy Paper Prototypes
- 58. Code Prototypes
- 59. Design ā Fluid Typography Converting PXās TO EMās is no big deal
- 60. Worldās first website http://info.cern.chThe website designed in 1993 works well today.
- 61. Adaptive Design + Media Queries Responsive web isā¦
- 62. Success mantra of Responsive Design
- 63. Mobile first approach Think about structured content
- 64. Tablets are taking the main stage shortly Now old legacy enterprise software are also started worrying about this
- 65. Static designās donāt work any more. To make design decisions, You need to experience interactions.
- 66. Focus on user. Content is King. Above the fold matters.
- 67. What is yesterday is not today and today is not tomorrow
- 68. We need to really think out side the BOXES! The future is unpredictableā¦
- 69. Ranjeet Tayi User Experience Designer