• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive web design
 

Responsive web design

on

  • 291 views

Responsive Web Design (RWD) is new trend that has been followed by 80% web designers. It is cheaper than Adaptive Web Design and recommended by W3C. Many frameworks also available that can convert ...

Responsive Web Design (RWD) is new trend that has been followed by 80% web designers. It is cheaper than Adaptive Web Design and recommended by W3C. Many frameworks also available that can convert your existing code to responsive one by adding some pre-defined class. Bootstrap is very popular nowadays because of ready-made components and UI elements. @media is the simplest way to make your virtual place very beautiful for all devices like iphone, tablet, PC, desktop and Widescreens.

Statistics

Views

Total Views
291
Views on SlideShare
291
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive web design Responsive web design Presentation Transcript

    • 1 RESPONSIVERESPONSIVE web design (RWD) single app different behavior no extra code RESPONSIVERESPONSIVE web design (RWD) single app different behavior no extra code KUSHAL JAYSWAL Kushal.jayswal@cignex.com
    • 2KUSHAL JAYSWAL http://teckstack.com RWD Vs. AWD RESPONSIVE WEB 21th July, 2013
    • 3 WHAT ✔ Web Design Approach WHY ✔ To enhance visuals for portable devices ✔ Portable devices (i.e.: iphone, android, tablet, etc.) ✔ Windscreens Feature (i.e.: Google / Apple TVs) ✔ To avoid the extra efforts developing native app ✔ W3C recommendation (http://bit.ly/RedguZ) WHAT ✔ Web Design Approach WHY ✔ To enhance visuals for portable devices ✔ Portable devices (i.e.: iphone, android, tablet, etc.) ✔ Windscreens Feature (i.e.: Google / Apple TVs) ✔ To avoid the extra efforts developing native app ✔ W3C recommendation (http://bit.ly/RedguZ) KUSHAL JAYSWAL http://teckstack.com THE CONCEPT RESPONSIVE WEB 21th July, 2013
    • 4 FRAMEWORKS ✔ Bootstrap, etc. MEDIA QUERY You can write your own Width Specific CSS using @media query. Really the simplest way to target different devices. FRAMEWORKS ✔ Bootstrap, etc. MEDIA QUERY You can write your own Width Specific CSS using @media query. Really the simplest way to target different devices. KUSHAL JAYSWAL http://teckstack.com THE WAY RESPONSIVE WEB 21th July, 2013 @media only screen and (min-device-width : 320px)@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {and (max-device-width : 480px) { /* Styles *//* Styles */ }}
    • 5 LINK HREFLINK HREF KUSHAL JAYSWAL http://teckstack.com THE WAY RESPONSIVE WEB 21th July, 2013 <!-- Separate CSS File --><!-- Separate CSS File --> <link href="styles_1024.css" rel="stylesheet"<link href="styles_1024.css" rel="stylesheet" media="all and (max-width: 1024px)">media="all and (max-width: 1024px)"> /* Default styles first then media queries *//* Default styles first then media queries */ @media screen and (min-width: 400px) {...}@media screen and (min-width: 400px) {...} @media screen and (min-width: 600px) {...}@media screen and (min-width: 600px) {...} @media screen and (min-width: 1000px) {...}@media screen and (min-width: 1000px) {...} @media screen and (min-width: 1400px) {...}@media screen and (min-width: 1400px) {...} SAMPLE @MEDIA QUERYSAMPLE @MEDIA QUERY LINK HREFLINK HREF <meta name="viewport" content="width=device-width"><meta name="viewport" content="width=device-width"> VIEWPORTVIEWPORT
    • 6 GOOD ✔ Independent Code ✔ Static Websites ✔ HTML / CSS / PHP Custom NOT BAD ✔ CMS Sometimes we get HTML developed using framework and while start integration into MAGENTO like CMS, we realize re-efforts. Frameworks also has PRE_DEFINED classes. And we cannot change dynamic code into CMS sometime. GOOD ✔ Independent Code ✔ Static Websites ✔ HTML / CSS / PHP Custom NOT BAD ✔ CMS Sometimes we get HTML developed using framework and while start integration into MAGENTO like CMS, we realize re-efforts. Frameworks also has PRE_DEFINED classes. And we cannot change dynamic code into CMS sometime. KUSHAL JAYSWAL http://teckstack.com THE FRAMEWORKS RESPONSIVE WEB 21th July, 2013
    • 7 Supports all latest browsers. BROWSER SUPPORT ✔ IE 8+ ✔ Firefox 3.5+ ✔ Safari 3+ ✔ Chrome ✔ Opera 7+ Supports all latest browsers. BROWSER SUPPORT ✔ IE 8+ ✔ Firefox 3.5+ ✔ Safari 3+ ✔ Chrome ✔ Opera 7+ KUSHAL JAYSWAL http://teckstack.com THE @MEDIA QUERY RESPONSIVE WEB 21th July, 2013
    • 8 Portable device manufacturer follows specific width and height for all devices. Widescreen TVs may content more resolution and width as well. But most of development project has maximum 1280px width. Earlier it was limited to 1024px. STANDARD WIDTH ✔ 1680 ✔ 1280 ✔ 1024 ✔ 767 ✔ 480 Portable device manufacturer follows specific width and height for all devices. Widescreen TVs may content more resolution and width as well. But most of development project has maximum 1280px width. Earlier it was limited to 1024px. STANDARD WIDTH ✔ 1680 ✔ 1280 ✔ 1024 ✔ 767 ✔ 480 KUSHAL JAYSWAL http://teckstack.com THE @MEDIA QUERY RESPONSIVE WEB 21th July, 2013
    • 9KUSHAL JAYSWAL http://teckstack.com THE LAYOUT RESPONSIVE WEB 21th July, 2013
    • 10KUSHAL JAYSWAL http://teckstack.com THE 1280 RESPONSIVE WEB 21th July, 2013
    • 11KUSHAL JAYSWAL http://teckstack.com THE 1024 RESPONSIVE WEB 21th July, 2013
    • 12KUSHAL JAYSWAL http://teckstack.com THE 1024 RESPONSIVE WEB 21th July, 2013
    • 13KUSHAL JAYSWAL http://teckstack.com THE 767 RESPONSIVE WEB 21th July, 2013
    • 14KUSHAL JAYSWAL http://teckstack.com THE 480 RESPONSIVE WEB 21th July, 2013
    • 15KUSHAL JAYSWAL http://teckstack.com THE NAVIGATION RESPONSIVE WEB 21th July, 2013 1. Collapse / Expand Script 2. SelectBox Format 3. Stack Format ✔ Script (1 – 2) ✔ Coding Approach (1 – 2) ✔ CSS (1 – 2 – 3) 1 2 3
    • 16 ✔ You must select % or EM instead of PX and Pt. ✔ Designer creates PSD using PIXELS but as a developer you should have knowledge to convert PX into %. If your MATH is weak, use following links: ➔ http://pixelperc.com/ (PX to %) ➔ http://pxtoem.com/ (PX to EM) ✔ You must select % or EM instead of PX and Pt. ✔ Designer creates PSD using PIXELS but as a developer you should have knowledge to convert PX into %. If your MATH is weak, use following links: ➔ http://pixelperc.com/ (PX to %) ➔ http://pxtoem.com/ (PX to EM) KUSHAL JAYSWAL http://teckstack.com THE % & EM RESPONSIVE WEB 21th July, 2013
    • 17 ✔ Global CSS ✔ Global Script ✔ CSS / JS using parent element ✔ Functionality Scope ✔ Use % or EM ✔ Responsive Guideline for Magento Developers ➔ http://bit.ly/Mkgkpy ✔ Global CSS ✔ Global Script ✔ CSS / JS using parent element ✔ Functionality Scope ✔ Use % or EM ✔ Responsive Guideline for Magento Developers ➔ http://bit.ly/Mkgkpy KUSHAL JAYSWAL http://teckstack.com Dos RESPONSIVE WEB 21th July, 2013
    • 18 ✔ Inline CSS ✔ Separate CSS File ✔ Separate Script File ✔ Module / Component Level Scripting ✔ No PX ✔ No CSS !important ✔ Inline CSS ✔ Separate CSS File ✔ Separate Script File ✔ Module / Component Level Scripting ✔ No PX ✔ No CSS !important KUSHAL JAYSWAL http://teckstack.com DON'Ts RESPONSIVE WEB 21th July, 2013
    • 19KUSHAL JAYSWAL http://teckstack.com THANK YOU :) THANK YOU :) Q&A: @kutec Blog: http://teckstack.com