Overview
The rapid spread of mobile devices has turned the world of web design upside down. Users no longer view web content only on traditional desktop systems, but are increasingly using smartphones, tablets, and other devices with a wide range of dimensions. The challenge for web designers is to ensure that their websites look good not only on a big screen, but also on a tiny phone and everything in between.
Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user. A part of the CSS3 specification, media queries expand the role of the media attribute that controls how your styles are applied. For example, it's been common practice for years to use a separate style sheet for printing web pages by specifying media="print" . Media queries take this idea to the next level by allowing designers to target styles based on a number of device properties, such as screen width, orientation, and so on.
Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user. A part of the CSS3 specification, media queries expand the role of the media attribute that controls how your styles are applied. For example, it's been common practice for years to use a separate style sheet for printing web pages by specifying media="print" . Media queries take this idea to the next level by allowing designers to target styles based on a number of device properties, such as screen width, orientation, and so on.
Difference between Responsive and Adaptive web design?
The hot topic for web developers and website owners is the way that websites can now automatically respond and adapt to any device with any screen size. This new way of web design optimizes the layout of the site to suit the screen size of the device it is being viewed on. There are two ways in which this can be achieve: with Responsive Web Design (RWD) and with Adaptive Web Design (AWD). Visitors to your site will not be concerned about which of the two methods you have used. This can simply come down to your or your designer’s preference. The user will not really notice a visible difference between the two methods but they do differ slightly.Adaptive is bit time consuming and expensive because you have to design multiple page layouts and render them according to device which renders it.Responsive Web Design (RWD)
The key and important tool or elements that make up a Responsive website are CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation. It is also fundamental to use flexible images, flexible videos, fluid type and EM’s instead of pixels. All of these key points allow the responsive website to modify its layout to suit the device.
Responsive design is client-side which means the page is sent to the device browser (the client), and the browser then modifies the appearance of the page in relation to the size of the browser window.
The definition of a responsive website is that it will fluidly alter its composition to improve the accessibility of content depending on the screen size of the browser window.
Adaptive Web Design (AWD)
Adaptive web design uses predefined layouts that have been carefully constructed for a variety of screen sizes. A particular layout is activated when the screen size of the device viewing the website is detected and matched with a style sheet.
Adaptive design is predominantly server side. This means that the web server does all of the work of detecting the various devices and loading the correct style sheet depending on the attributes of the device. As well as the layout changing depending on the size of the screen they can also change depending on conditions like whether the device has a retina display or not. The server can detect this and display high quality images for retina display devices like iPads and lower quality images for standard-definition displays.
The downsides to AWD are that initial construction is very costly as you have a lot of layouts to design. Also to maintain and update all of these layouts can be very time consuming which will therefore cost a lot of money.
The definition of an adaptive website is one that has a set of predefined layouts that are activated when best suited to the device detected by the server.
Similarities and differences
The obvious similarity of both methods is that they improve accessibility of website content on mobile devices and various screen sizes. They also both provide visitors with an enhanced mobile-friendly user experience.
They are different in the way that they deliver the responsive / adaptive design to the user. RWD is dependent on fluid grids and AWD is relying on predefined size layouts. Also the fact that they either use client side or server side is another way in which they differ.
The visible difference is that responsive design will fluidly alter its layout while you resize your browser window whilst adaptive design will load a specific layout for the device you’re viewing the site on. If you resize your window with an adaptive website it will jump to a different breakpoint when you reach a screen size that suits another predefined layout.
Responsive Web Design Basics
Truth is that Web started with only webpages. We never thought that there can be anything apart from computers which will access the web page.Simple,We were not ready for other devices,When suddenly
use of mobile devices to browse the web increased ,nothing was visible on small devices properly web isn't optimized for those mobile
devices. Mobile devices are often constrained by display size and
require a different approach to render data on screen.
Let us start thinking about how to optimize our existing or new web for mobile devices..First and foremost thing is to use VIEWPORT TAG .
How to set the viewport
Pages optimized for a variety of devices must include a meta viewport element in the head of the document. A meta viewport tag gives the browser instructions on how to control the page’s dimensions and scaling.In order to attempt to provide the best experience, mobile browsers will render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. For users, this means that font sizes may appear inconsistently and they have to double-tap or pinch-zoom in order to be able to see and interact with the content.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width
instructs the page to match the screen’s width in device independent
pixels. This allows the page to reflow content to match different screen
sizes, whether rendered on a small mobile phone or a large desktop
monitor.Some browsers will keep the page’s width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute
initial-scale=1 instructs browsers to
establish a 1:1 relationship between CSS pixels and device independent
pixels regardless of device orientation, and allows the page to take
advantage of the full landscape width. Ensure an accessible viewport
In addition to setting aninitial-scale, you can also set the minimum-scale, maximum-scale and user-scalable
attributes on the viewport. When set, these can disable the user’s
ability to zoom the viewport, potentially causing accessibility issues.Size content to the viewport
On both desktop and mobile devices, users are used to scrolling websites vertically but not horizontally, and forcing the user to scroll horizontally or to zoom out in order to see the whole page results in a poor user experience.FINALLY -----
POINTS TO REMEMBER WHILE DESIGNING RESPONSIVE WEBSITE
- Use meta viewport tag to control the width and scaling of the browsers viewport.
- Include
width=device-widthto match the screen's width in device independent pixels. - Include
initial-scale=1to establish a 1:1 relationship between CSS pixels and device independent pixels. - Ensure your page is accessible by not disabling user scaling.
- Do not use large fixed width elements.
- Content should not rely on a particular viewport width to render well.
- Use CSS media queries to apply different styling for small and large screens.
- Media queries can be used to apply styles based on device characteristics.
- Use
min-widthovermin-device-widthto ensure the broadest experience. - Use relative sizes for elements to avoid breaking layout.
- Media queries can be used to apply styles based on device characteristics.
- Use
min-widthovermin-device-widthto ensure the broadest experience. - Use relative sizes for elements to avoid breaking layout.
Below is a list of most popular devices, along with
their resolutions and display sizes.
| Manufacturer | Model | Screen Size | Resolution | Type |
|---|---|---|---|---|
| Acer | Iconia Tab | 10.1″ | 1280×800 | Tablet |
| Amazon | Kindle Fire | 7″ | 1024×600 | Tablet |
| Apple | iPad | 9.7″ | 1024×768 | Tablet |
| Apple | iPad 2 | 9.7″ | 1024×768 | Tablet |
| Apple | iPad 3 | 9.7″ | 2048×1536 | Tablet |
| Apple | iPhone 3GS | 3.5″ | 480×320 | Smartphone |
| Apple | iPhone 4S | 3.5″ | 960×640 | Smartphone |
| Apple | iPhone 5 | 4″ | 640×1136 | Smartphone |
| ASUS | Transformer TF101 | 10.1″ | 1280×800 | Tablet |
| ASUS | Transformer Prime TF201 | 10.1″ | 1280×800 | Tablet |
| Barnes & Noble | NOOK | 7″ | 1024×600 | Tablet |
| BlackBerry | Playbook | 7″ | 1024×600 | Tablet |
| BlackBerry | Torch 9800 | 3.2″ | 480×360 | Smartphone |
| BlackBerry | Torch 9810 | 3.2″ | 640×480 | Smartphone |
| Colby | Kyros | 7″ | 800×480 | Tablet |
| HP | TouchPad | 9.7″ | 768×1024 | Tablet |
| HTC | Amaze 4G | 4.3″ | 960×540 | Smartphone |
| HTC | Evo 3D | 4.3″ | 960×540 | Smartphone |
| HTC | Flyer | 7″ | 1024×600 | Tablet |
| HTC | Sensation 4G | 4.3″ | 960×540 | Smartphone |
| HTC | Thunderbolt | 4.3″ | 480×800 | Smartphone |
| Lenovo | IdeaPad A1 | 7″ | 1024×600 | Tablet |
| Lenovo | ThinkPad | 10.1″ | 1280×800 | Tablet |
| LG | G2x 4G | 4″ | 800×400 | Smartphone |
| LG | G-Slate | 8.9″ | 768×1280 | Tablet |
| Motorola | Droid BIONIC | 4.3″ | 540×960 | Smartphone |
| Motorola | Droid RAZR | 4.3″ | 540×960 | Smartphone |
| Motorola | Droid Xyboard 10.1 | 10.1″ | 1280×800 | Tablet |
| Motorola | Xoom | 10.1″ | 1280×800 | Tablet |
| Nokia | Lumia 900 | 4.3″ | 480×800 | Smartphone |
| Samsung | Brightside | 3.1″ | 240×320 | Smartphone |
| Samsung | Epic 4G Touch | 4.52″ | 800×480 | Smartphone |
| Samsung | Exhibit 4G | 3.5″ | 480×800 | Smartphone |
| Samsung | Focus Flash | 3.7″ | 480×800 | Smartphone |
| Samsung | Galaxy S 4G | 4″ | 480×800 | Smartphone |
| Samsung | Galaxy S II | 4.52″ | 800×480 | Smartphone |
| Samsung | Galaxy S III | 4.8″ | 1280×720 | Smartphone |
| Samsung | Galaxy Tab | 7″ | 1024×600 | Tablet |
| Samsung | Galaxy Tab 7.7 | 7.7″ | 1280×800 | Tablet |
| Samsung | Galaxy Tab 10.1 | 10.1″ | 1280×800 | Tablet |
| Samsung | Gravity Smart | 3.2″ | 320×480 | Smartphone |
| Samsung | Sidekick 4G | 3.5″ | 800×480 | Smartphone |
| Sony | Tablet S | 9.4″ | 1280×800 | Tablet |
| T-Mobile | MyTouch 4G Slide | 3.8″ | 800×480 | Smartphone |
| T-Mobile | SpringBoard | 7″ | 1280×800 | Tablet |
| Toshiba | Thrive | 10.1″ | 1280×800 | Tablet |
Shabir Hakim
