RWD · Technical

Responsive Web Design QnA round with Friend


Today i had very informative QnA session with one of my friend on Responsive design. I think its worth to share this discussion with wider audience.

  • Question: I read today that responsive design might not be supported in IE7? Cud u confirm that? IE7 is gonna be part of the supported browsers.
    Answer: its partially true and depend on approach we follow.
    IE7 dont support HTML5 & CSS3, if we use server side responsive design, then we would be able to make it happen at some level.
  • Question: Also read about something called adaptive design
    Answer: Adaptive design is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the attributes of the device, and loads a version of the site that is optimized for its dimensions and native features.
    Server side implementation of responsive design is called adaptive
  • Question: How does the server know device attributes.. is the user agent a part of the HTTP request?
    Answer: There are 2 ways to identify this:

    1. Best way, client itself inform server about its capability (eg. by some cookies)
    2. server identify the client by UserAgent (applicable for 1st request only)

    we need to follow both options in case of Adaptive approach

  • Question: But isnt useragent sometimes the same for multiple devices? diff screen size/aspect ratio/res
    Answer: In case of Apple devices, answer is yes
  • Question: What in the case of android?
    Answer: Android devices have different UAs
  • Question: So that means we cannot target the max. We need a representative set
    Answer: We should not target device, rather we should target screen sizes and their capabilities

    Example: Different design for different screen size: <320 px – Design 1 >320 – 700 px – Design 2 >700 px – Design 3 and then features we can support eg.: in design 1, we will support touch, slide, rotrate, zoom in design 2, we will also support the same in desing 3 we will not support any above features * * but in near future we might need to support touch/slide in design 3 also as windows8 are now available with desktop monitors having touch features

  • Question: So whts the difference between a media query and useragent?
    mediaquery = css and useragent = request parameter?
    Answer: There are 3 ways to implement Responsive
    1. Media Query: CSS based
    2. Javascript
    3. User Agents: Server side
    Media Query & Javascript are client side
  • Question: What do we do if the device does not support css or html5?
    Answer: So CSS3 & HTML5 are also capability of device
    if a device do not have this capability and we are targeting such devices also then extra handling required. Other capabilities are: flash support, png file support and many more
  • Question: How does zooming effect media queries? zooming out increases avaialbe screen area
    Answer: I dont see any link b/w zooming and media queries, zoom is part of accessibility. We also allow zoom in desktop browser. Zoom increase fonts, image size
  • Question: If we use UserAgent, how do we handle the “view desktop website” feature avaialble on phones and tablets? We faced this problem in one of my prev prj
    Answer: It should be a specific requirement from client to support this feature. If this is a requirement, then end user will click on some link to show desktop version, in that case, some cookie will be added and based on that cookie on server side, we will return the desktop version
  • Question: Can css really read cookies
    Answer: CSS i dont think but can not confirm, Javascript can read cookies.
  • Question: How we load css dynamically? or use LESS
    Answer: Use cookies, “if cookie contains x, load css1 which is for desktop. else load css2 which is for mobile”. From server side, we can handle this dynamic behavior.
    In any page, the assets shoule be loded in a sequence:
    1. html headers & tage
    2. css
    3. body of page
    4. javascripts
    as CSS have 2nd prio, in case of Media Query/Javascript, css for all devices should be loaded on page
  • Question: Im a user. i want to see website on my tab but i want to see desktop version, how?
    Answer: In that case, you will hit site from tab, Mobile version will render. As the site is fully loaded, JS will start working, then user click on link: “Show Desktop Version”, on click, we will set cookie, and send the request to server

Please feel free to ask more questions to add more knowledge. Also comment if you find any answer incorrect.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s