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.
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
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.
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.
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.