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:
- Best way, client itself inform server about its capability (eg. by some cookies)
- 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
3. User Agents: Server 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
- Question: How we load css dynamically? or use LESS
In any page, the assets shoule be loded in a sequence:
1. html headers & tage
3. body of 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.