For all dear developers here - know what our customer TODAY asks for or doesn't ask for but definitely expects !! RESPONSIVE DESIGN. And now what is it exactly?? As the word itself suggests, it refers to a design responding well to any and all devices its being opened at..be it a Sony Vaio...a Samsung Glaxy Tab or an i phone with the loveliest smallest sleekest screen in the world. SO, it would kind of incorporate the following –
- · As said above, layout should be adaptable to different screen sizes.
- · Images should be such so as they can be visible even on a lower bandwidth.
- · Automatic resizing of images to fit the screen.
- · Preference should be determined about what is to be visible and what should hide when screen size gets quite small.
- · Again, as mobile use is being counted, page elements should be simplified.
- · As is in demand, we2.0, for mobile users too, large finger friendly buttons and links would be a great addition.
- · Easy to accustom with mobiles having features like geolocation and mobile orientation, as in mine ;-)
Responsive design and Adaptive design, both mean the same as such…just different names . Few months ago was the rein of the FLUID DESIGN but it went well with relatively wider browser windows and in the other case, it would start breaking. Now for the HTML guys to understand…the basic term they need to differentiate is BROWSER VIEWPORT and DEVICE SCREEN. You need to know what client requires out of the two..He is not a techno..you are !!
Width is the width of the browser viewport. On desktop browsers, this is usually smaller than the screen width. Whereas, on mobile browsers, it's usually larger than the screen width, since most mobile browsers use a "virtual viewport" that is bigger than the screen, allowing the user to zoom in and out, as well as pan around the viewport by dragging.
Device width is the width of the device's screen. On a desktop machine, this information isn't usually that important to a web developer. On a mobile device, it can be useful to know the screen width, since you can then adapt your layout to fit the device's screen comfortably.
Now for more technical details and queries , I am pointing you to a guide –
- · How to convert a standard fluid layout into a responsive layout that adapts to various different browser sizes.
- · CSS media queries, and their role in responsive layouts.
- · How to set the size of a mobile browser's viewport by using the viewport meta tag
For above and more - you can just jump to elated.com for their article “Responsive web design – demystified”. Have fun learning !!
