Responsive, Scalable and Liquid Design. This presentation talks about the new way of web design standard / technique aimed at crafting sites to provide an optimal viewing experience - easy reading - easily accessible and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices along with various examples.

1. DESIGN
Responsive
Scalable
Liquid
UX’er. Ranjeet Tayi
Principal - User Experience Design
Informatica Corp.
www.ranjeeth.com

2. Do you remember this?

3. https://www.flickr.com/photos/laquesys/6630260805/in/photolist-b6TPxt-7EUfMc-8AZmDi-dBYRXQ-514TcR-6d6AAV-G5h8n-GzppA-7WR2E2-aw5Bwa-5TYz4R-5TYzfa-dLeaSr-86CQUY-
6Zno9n-6ZroPf-5GRYf7-8ov3hr-78fFt-eCJPva-89QLxn-8MnMJw-bwkhmP-68fUpz-zdmh7-dHprjB-4ty511-6K4ZT-9wa5f7-aoVwyJ-6XVH5f-7NhHsy-8bfs71-6JTC3a-aNK3be-6eFXrU-e3DFFd-
911kkk-6M9it2-expib-71NFw-4rG6Xm-u1Yht-911krt-914qNC-914r87-911kYz-914qvJ-911kJn-914r6w/

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.

11. Tablet market exploded!

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

15. May 2010
June 2011

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

21. Content Structuring

22. Plan & organize your content hierarchy
and know what to show on above fold

23. Grid Constructs – Fluid & Flexible Grid Types

24. Defining breakpoints

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

40. Plan
COLUMNS12
OPTIMIZED FOR1200 X800
GUTTER20
MARGIN 20

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.

50. Responsive Frame Work

51. Responsive Frame Work

52. Responsive Frame Work

53. Responsive Frame Work

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

56. Responsive Wire Frames

57. Interactive Hi-fidelity 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