Responsive Web Design: What It Is And How To Use It

Everyone wants a mobile version of their website if they’re smart and most people request it. it’s no longer a luxury, its a necessity. A design for the Blackberry and another for the iPhone, iPad, netbook, Kindle and all screen resolutions must be compatible. Soon, we’ll have to prepare for the onslaught of new inventions. As long as technology progresses, and there is no stoppage in sight, we must keep up with it. When will the madness stop! It wont.
mobilewebsite1images

We’ve not been able to adapt to the constant and endless new resolutions and devices in the field of Web design and development. For many websites, creating a website version for each resolution and new device would be impossible, and in many instances, impractical. The consequence has long been to lose visitors from one device, for the benefit of gaining visitors from another. But there is another option.
mobilewebsite4images

RESPONSIVE WEB DESIGN is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mixture of grids and layouts, that can be modified and images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. Another way to phrase it, the website should have technology that would automatically acknowledge the user’s preferences. This would prevent the need for a different design and development phase for each new gadget on the market.

The Concept of Responsive Web Design

An introductory article about the approach, written by Ethan Marcotte, “Response Web Design, for A list Apart. It stems from the idea of responsive architectural diesign, whereby a room or space adjusts automatically to the number and flow of people within it.

“Recently an emergent discipline called “responsive architecture” has begun to ask how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced, “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.”

If you were to apply this discipline onto Web design, and we have a similar, but whole new idea. Why create a custom Web design for each group o users; after all, architects don’t design a building for each group size and type that passes through it.

Like responsive architecture, Web design should automatically adjust. There should be no need for countless custom made solutions for each new category of users.

Clearly we can’t use motion sensors and robotics to accomplish this in the same fashion a building would. Responsive Web design need a more abstract way of thinking. There are, however; some ideas that are already being practiced: fluid layouts, media queries and scripts that can reformat Web pages and mark-up without much effort or automatically.

However; responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design. Let’s talk about all of these features, and the new ideas that are yet to come.

Adjusting Screen Resolution

With the emergency of more devices, come varying screen resolutions, definitions and orientation. New devices with new screen sizes are being developed every day and each of these devices may be able to handle variations in size, functionality and even color. Many are in landscape, others in portrait, and yet others are completely square. As we have learned from the rising popularity of the iPhone, iPad and advanced smartphones, many new devices are able to switch from portrait to landscape at the user’s whim. How is one to design for these situation?

We must now consider the hundreds of different screen sizes, in addition to designing for the landscape and portrait (and enabling these orientations to possible switch in an instant upon page load). Yes, it’s possible to group them into major categories, design for each of them, and make each design as flexible as necessary. But that can be a lot, and who knows what the usage figures will be in five years? Besides most users don’t maximize their browsers, which itself leaves far too much room for variety among screen sizes.
mobilewebsite3images

Morten Hjerde and a few of his colleagues identified statistics on about 400 devices sold between 2005 and 2008.

Since that time, even more devices have hit the market. Clearly, we can’t keep creating custom solutions for each one. We have discovered a way to deal with the situation.

PART OF THE SOLUTION: FLEXIBLE EVERYTHING

A few years ago, flexible layouts were like a luxury for websites. The only things that were flexible in a design was the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they really couldn’t adjust from a larger computer screen to a netbook.
mobileflexibleimages

Now, we make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become illegible and shrink in the process). While this isn’t a complete fix, the solution gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.

In the article authored by Ethan Marcotte, he created a sample Web design that features a better flexible layout:

The entire design is a lovely mix of fluid grids, fluid images and mart markup where needed. Creating fluid grids is fairly common practice, and there are a number of techniques for creating flux images.

-Hiding and Revealing Portions of Images

-Creating Sliding Composite Images

-Foreground Images that Scale With the Layout

For more information on creating flux websites, make sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layout with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.”

While from a technical perspective this is all possible, it’s not just about plugging these features in and being done.

FLEXIBLE IMAGES

A major problem that must be solved with responsive Web design is working with images. There are a number of ways to resize images proportionately, and many are done easily. The most popular option, noted in the Marcotte article on fluid images but first experimented with By Richard Rutter, is to use CSS’s max-width for an easy fix.
img{ max-width: 100% }

flexibleimageindex

As long as mother width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the images original width. The maximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Basically, as Jason Gribsby stated: “The idea behind flux images is that you deliver images at the maximum size they will be used at. You don’t declare the height and width in your code, but instead let the browser resize the images as needed while using CSS to guide their relative size”. It’s a great and simple technique to resize images beautifully.

Notice that max-width is not supported in IE, but a good use of width: 100% would solve the problem neatly in an Ie-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be. There is a JavaScript to fix this issue, though, found in Ethan Marcotte’s article.

While this is a great fix and a good start to responsive images, image resolution and download times should be the primary consideration. While resizing an image size is meant for large devices, it could significantly slow download times and take up space unnecessarily.

FILAMENT GROUP’S RESPONSIVE IMAGES

This technique presented by the Filament Group, takes this issue into consideration and not only resizes images proportionally, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens.
wastedspaceindex

This technique requires few files, all of which are available on Github. First JavaScript file (rwd-images.js), the .htaccess file and an image file (rwd.gif). Then we can use just a bit of HTML to reference both the larger and smaller resolution images: first, the small image, with an .r prefix to clarify that it should be responsive, and then a reference to bigger image using data-fullscrc.

The data-fullscrc is a custom HTML5 attribute, defined in the files linked to the above. For any screen that is wider than 480 pixels, the larger resolution image (largeRes.jpg) will load; smaller screens won’t need to load the bigger image, and so the smaller image (smallRes.jpg) will load.

The JavaScript file inserts a bee element that allows the page to separate responsive images from others and redirects them as necessary. When the page loads, all files are rewritten to their original forms, and only the large or small images re loaded as necessary. With other techniques, all higher-resolution images would have had to be downloaded, even if the larger versions would never be used. Particularly for websites with a lot of images, this technique can be a greater saver of bandwidth and loading time.

This method is fully supported in modern browsers, such as Ie8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers (iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and still resize as one would expect of a responsive image, except that both resolutions are downloaded together, so the result of saving space with this method is void.

STOP IPHONE SIMULATOR IMAGE RESIZING

A great thing about the iPhone and iPod Touch is that Web designs automatically rescale to fit the tiny screen. A full sized design, unless specified otherwise, would just shrink proportionally for the tiny browser, with no need for scrolling or a mobile version. Then, the user could easily zoom in and out as necessary.

zoominginandoutindex

There was another issue this simulator created. When responsible Web design became popular, many noticed that images were still changing proportionally with the page even if they were specifically made for or could otherwise fit the tiny screen. This in turn scaled down text and other elements.

Since this only works with Apple’s simulator, we can use an Apple specific meta tag to fix the problem, placing it below the website’s section. Thanks to Think Vitamin’s article on image resizing, we have the meta tag below:

Setting the initial scale to 1 overrides the default to resize images proportionally, while leaving them as if their width is the same as the device’s width (in either portrait or landscape mode). Apple’s documentation has a lot more information on the viewport meta tag.

CUSTOM LAYOUT STRUCTURE

In the case of extreme size changes, you may want to change the layout totally, either through a separate style sheet or, more effectively, through a CSS media query. This does not have to be troublesome; most of the styles can remain the same, while specific style sheets can inherit these styles and move elements around with floats, widths, and heights and so on.

To illustrate, we could have one main style sheet (which would also be the default), that would define all of the main structural elements, such as #wrapper, #content, #sidebar, #nav, along with colors, backgrounds and typography. Default flexible widths and floats could also be defined.

If a style sheet made the layout too narrow, short, wide or tall, we could then detect that and switch to a new style sheet. This new child style sheet would adopt everything from the default style sheet and then just redefine the layout’s structure.

Here’s the style.css (default) content:

/* Default styles that will carry to the child style sheet *

/

html,body{
background…
font…
color…

}

h1,h2,h3{}

p, blockquote, pre,code, o1, u1{}

/* Structural elements I/

#wrapper {

width: 80%
margin: 0 auto;” background: #ffff;

padding: 20px;

}

#content{

width: 54%;
float: left;
margin-right: 3%;

}

#sidebar-left{

width: 20%;
float: left;

3sidebar-right{

width: 20%;
float: left;

}

Here is the mobile. css (child) content:

#wrapper{

width: 90%;

}

#content}

width: 100%;

}

#sidebar-left{

width: 100%;
clear: both;

/* Additional styling for our new layout */
border-top: 1px solid #ccc;

margin-top 20px;

}

#sidebar-right{

width: 100%;
clear: both;

/I Additional styling for our new layout */

border-top: 1px solid #ccc;

margin-top: 20px;

}

MEDIA QUERIES

CSS3 supports all of the same media types as CSS2.1, such as screen, print and handheld, but has added dozens of new media features, including max-width, device-width, orientation and color. New devices made after the release of CSS3 (such as the iPad and Android devices) will definitely support media features. Therefore; calling a media query using CSS3 features to target these devices would work just fine, and it will be ignored if accessed by an older computer growers that does not support CSS3.

screenprinthandheldimages

In Ethan Marcotte’s article, we see an example of a media query in action:

This media query is fairly self-explanatory: if the browser displays this page on a screen (rather than print, etc.) and if the width of the screen (not necessarily the viewpoint) is 480 pixels or less, then load shetland.css.

New CSs3 features also include orientation (portrait vs. landscape), device-width, min-device-width and more. Look at “The orientation Media Query” for ore information on setting and restricting widths based on these media query features.

One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths-even for a landscape versus a portrait orientation. Make sure to look at the section of Ethan Marcotte’s article entitled “Meet the media query” for more examples and a better explanation.

Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used:

CSS3 MEDIA QUERIES

Let’s now look at some specific “how-to’s” for using CSS3 media queries to create responsive Web designs. Many of these uses are relevant today, and all will definitely be usable in the near future.
responsivewebdesignimages

The min-width and max-width properties do exactly what they suggest. The min-width property sets a minimum browser or screen width that a certain set of styles (or separate style sheet) would apply to. If anything is below this limit, the style sheet link or styles will be ignored. The max-width property does must the opposite. Anything above the maximum browser or screen width specified would not apply to the respective media query.

Note in the examples that follows, that we’re using the syntax for media queries that could be used all in one style sheet. As mentioned above, the most efficient waya to use media queries is to place them all in one CSS style sheet, with the rest of the styles for the website. This way multiple requests don’t have to be made for multiple style sheets.

@media screen and (min-width: 600px) }

.hereIsMyClass{

width: 30%;
float: right;

}

}

The class specified in the media query above (hereIsMyClass) will work only if the browser or screen width is above 600 pixels. In other words, this media query will run only if the minimum width is 600 pixels (therefore, 600 pixels or wider).

@media screen and (max-width: 600px) {

.aClassforSmallScreens {

clear: both;

font-size: 1.3em;

}

}

Now, with the use of max-width, this media query will apply only to browser or screen widths with a maximum width of 600 pixels or narrower.

While the above min-width and max-width can apply to either screen size or browser width, sometimes we’d like a media query that’s relevant to device width specifically.
This means that even if a browser of other viewing area is minimized to something smaller, the media query would still apply to the size of the actual device. The min-device-width and max-device-width media query properties are great for targeting certain devices with set dimensions, without applying the same styles to other screen sizes in a browser that mimics the device’s size.

@media screen and (max-device-width: 480p) {

.classForiPhoneDisplay {

font-size: 1.2em;

}

}

@media screen and (min-device-width: 768px) {

.minimumiPadWidth {

clear: both;

marginbottom: 2px solid #ccc;

}

{

For the iPad specifically, there is also a media query property called orientation. The value can be either landscape (horizontal orientation) or portrait (vertical orientation).

@media screen and (orientation: landscape) {

.iPadLandscape {

width: 30%:

float: right;

}

}

@media screen and (orientation: portrait) {

.iPadPortrait {

clear: both;

}

}

This property, unfortunately, only works on the iPad. When determining the orientation for the iPhone and other devices, the use of max-device-width and min-device-width should do the trick.

There are also many media queries that make sense when combined. For example, the mi-width and max-width media queries are combined all the time to set a style specific to a certain range.

@ media screen and (min-width: 800px) and (max-width: 1200px)

{

.classForaMediumScreen {

background #cc0000;

width: 30#;

float: right;

}

}

The above code in this media query applies only to screen and browser widths between u700 and 1200 pixels. A good use of this method is to show certain content or entire sidebars in a layout depending on how much horizontal space is available.

Some designers would also prefer to link to a separate style sheet for certain media queries, which is perfectly fine if the organizational benefits outweigh the efficiency that is lost. Those devices that don’t switch orientation or for screen whose browser width cannot be changed manually, using a separate style sheet should be fine.

You may want to place media queries all in one style sheet (as above) for devices like the iPad. Because such a device can switch from portrait to landscape in an instant, if these two media queries were placed in separate style sheets, the website would have to call each style sheet file every time the user switched orientation. Picking a media query for both the horizontal and vertical orientation of the iPad in the same style sheet file would be far more efficient.

Another example is a flexible design meant for a standard computer screen with a resizable browser. If the browser can be manually resized, placing all variable queries in one style sheet would be best.

Notwithstanding, organization can be key, and a designer may wish to define media queries in a standard HTML link tag:

>link rel-“stylesheet” media=screen and (min-width: 600px)’

href=”large.css” />

JAVASCRIPT

Another method that can be used is JavaScript, especially as a back up to devices that don’t support all of the CSS3 Media query options. Fortunately, there is already a pre-made JavaScript library that makes older browsers (IE5+, Firefox 1+, Safari 2) support CSS3 media queries. If you’re already using these queries, just grab a copy of the library, and include it in the mark-up: CSS3-MEDIAQUERIES.JS.

javascripthtmlcssindex

IN ADDITION, BELOW IS A SAMPLE QUERY SNIPPET THAT DETECTS BROWSER WIDTH AND CHANGES THE STYLE SHEET ACCORDINGLY IF ONE PREFERS A MORE HANDS ON APPROACH:

There are many solutions for pairing up JavaScript with CSS media queries. Note, that many media queries are not an absolute answer, but rather are great options for responsive Web design when it comes to our CSS-based solutions.

For detailed information on using JavaScript to mimic or work with media queries, look at "Combining Media Queries and JavaScript."

Showing or Hiding Content

It is possible to shrink things proportionally and rearrange elements as necessary to make everything fit reasonably well as a screen gets smaller. That's a good thing. But making every piece of content from a large screen available on a small screen or mobile device isn't always the best way to go. We have best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.

simplenavigationindex

Responsive Web design shouldn't be just about how to create a flexible layout on a wide range of platforms and screen sizes. It should also be about the user being able to pick and choose content. Fortunately, CSS has been allowing us to show and hide content with ease for years!

display: none;

Either declare display: none for the HTML block element that needs to be hidden in a specific style sheet or detect the browser width and do it through JavaScript. In addition to hiding content on smaller screens, we can also hide content in our default style sheet (for bigger screens) that should be available only in mobile versions or on smaller devices. As we hide major pieces of content, for example, we could replace them with navigation to that content, or with a different navigation structure altogether.

Notice that we haven't used visibility: hidden here; this just hides the content , although it's still here, whereas the display property gets ride of it altogether. For smaller devices, there is no need to keep the mark up on the page-it just takes up resources and might even cause unnecessary scrolling or break the layout.

Here is our mark-up

Main Content

A Left Sidebar

/div>

In our default style sheet listed below, we have hidden the links to the sidebar content. Because our screen is large enough, we can display this content on page load.

Here is the style.css (default) content:

#content(

width: 54%
float: left;
margin-right: 3%;

{

#sidebar-left{

with: 20%;
float: left;
margin-right; 3%;

}

#sidebar-right(

#sidebar-right(

width: 20%;
float: left;

}

.sidebar-nav(display: none;}

Now we hide the two sidebars (below) and show the links to these pieces of content. As an alternative, the links could call to JavaScript to just cancel out the display: none when clicked, and the sidebars could be realigned in the CSS to float below the content (or in another reasonable way).

Here is the mobile.css (simpler) content:

#content{

width: 100#;

}

#sidebar-left(

display: none;

}

.sidebar-nav{display: inline;}

With the ability to easily show and hide content, rearrange layout elements and automatically resize images form elements and more, a design can be transformed to fit a huge variety of screen sizes and device types. As the screen gets smaller, rearrange elements to fit mobile guidelines; for example, use a script or alternate style sheet to increase white space or to replace image navigation sources on mobile devices for better usability (icons would be more beneficial on smaller screens).
Below are a couple of relevant resources:

-Mobile Web Design Trends for 2009

7 Usability Guidelines for Websites on Mobile Devices

TOUCHSCREENS VS. CURSORS

There is no doubt, touch screens are becoming more and more popular. Assuming that smaller devices are more likely to be given touchscreen functionality is easy, ut not so fast. Right now touch screens are mainly on smaller devices, but many laptops and desktops on the market also have touchscreen capability. For example, the HP Touchsmart tm21 is a basic touchscreen laptop with traditional keyboard and mouse that can transform into a tablet.

touchscreenvcursorindex

Obviously, touch screens come with different design guidelines than purely cursor based interaction, and the two have different capabilities also. Touchscreens have no capability to display CSS hovers because there is no cursor; once the user touches the screen, they click. Therefore; don't rely on CSS hovers for link definition; they should only be considered an additional feature for cursor based devices.

Check out the article "Designing for Touchscreen" for more ideas. Most of the design suggestions in it are best for touch screens, but they would not necessarily impair cursor based usability. To illustrate, sub navigation on the right side of the page would be more user friendly for touchscreen users, because most people are right handed. They would not bump or brush the navigation accidentally when holding the device in their left hand. This would make no difference to cursor users, so we might as well follow the touchscreen design guidelines in this instance. Many more guidelines of this kind can be drawn from touchscreen based usability.

A Showcase of Responsive Web Design

We will now look at a few examples of responsive Web design in practice today. For many of these websites, there is more variation in structure and style than is shown in the pairs of screen shots provided. many have several solutions for a variety of browsers, and some even adjust elements dynamically in size without the need for specific browser dimensions. Visit each of these, and adjust your browser size or change devices to see them in action.

Art Equal Work

Art Equals Work is a simplest yet grey example of responsive Web design. A website has to be flexible with browser widths by traditional standards, but once the browser gets too narrow or is otherwise switched to a device with a smaller screen, then the layout switches to a more readable and user friendly format. The sidebar disappears, navigation goes to the top, and the =text is enlarged for easy and simple vertical reading.

Think Vitamin

With Think Vitamin, we see a similar approach. When on a smaller screen or browser, the sidebar and top bar are removed, the navigation simplifies and moves directly above the content, as does the logo. The logo keeps its general look yet is modified for a more vertical orientation, with the tagline below the main icon. The white space around the content on larger screens is also more spacious and interesting, whereas it is simplified for practical purposes on smaller screens.

8 Faces

8 Faces website design is flexible, right down to a standard netbook or tablet device, and expands in content untidy and layout width when viewed on wider screens or expanded browsers. When viewed on narrower screens, the featured issue on the right is cut out, and the content below is shortened and rearranged in layout, leaving only the necessary information.

Hicksdesign

The Hicksdesign website has three columns when viewed on a conventional computer screen with a maximized browser. When minimized in width, the design take on a new layout; the third column to the right is rearranged above the second, and the logo moves next to the introductory text. Thus, no content needs to be removed for the content is removed completely and a simplified version is moved up top. Finally, the font size changes with the screen and browser width; as the browser gets narrower, the font size changes with the screen and browser width; as the browser gets narrower, the font size throughout gets smaller and remains proportional.

Garret Keizer

The website for Garrett Keizer is fully flexible in wider browsers and on larger screen; the photo; logo and other images resize proportionally, as do the headings and block areas for text. At a few points, some pieces of text change in font size and get smaller as the screen or browser gets narrower. After a certain break point, the layout transforms into what we see in the second screenshot, with a simple logo, introductory text and a simple vertical strutter for the remaining content.

Simon Collision

With four relatively content heavy columns, its easy to see how the content here could easily be made smaller when viewed on a smaller device. Because of the easy organized columns, we can also collapse them quite simply when needed, and we can stack them vertically when space doesn't allow for a reasonable horizontal span. When the browser is minimized, often the user is on a smaller device, the columns first collapse into two and then into one. Conversely, the horizontal lines for break points also change in width, without changing the size or style of each line's title text.

CSS Tricks

On the CSS Tricks website, like many other collapsible Web designs, the sidebars with excellent content are the first to fall off when the screen or browser gets too narrow. On this particular website, the middle column or first sidebar to the left was the first to disappear; and the sidebar with the ads and website extras did the sea when the browser got more narrow. After a while, the design leaves the posts, uses less white space around the navigation and logo and moves the search bar to below the navigation. The remaining layout and design is as flexible as can be because of its simplicity.

Tee Gallery

In the Tee Gallery website, the main navigation is the simple layout of the tee shirt designs, spanning both vertically and horizontally across the screen. As the browser or screen gets smaller, the columns collapse and move below. This happens at each break point when the layout is stressed, but in between the break points, the images just change proportionally in size. This maintains balance in the design, while ensuring that any images (which are essential to the website) doesn't get so small that they become unusable.

City Crawlers: Berlin

When varied between larger screen sizes and browser widths, this design remain flexible. It also remain flexible after a few layout pieces collapse into a more vertical orientation for small screens and narrow browsers. At first, the introductory image, logo and navigation image links resize proportionally to accommodate variations in screen and browser widths, as do the blocks of content below. The bottom columns of content will eventually collapse and rearrange above or below other pieces, until at the narrowest point, they are all stacked vertically. In the layout for the smallest screen and narrowest browser, the slideshow is left out altogether, the navigation is moved below the logo land other images are also removed.

Hardboiled Web Design

On wide screens and browsers, all of the content on this simply designed website is well organized into columns, sidebar and simple navigation up top. It's a fairly standard and efficient layout. On smaller screens, the sidebar is the first to drop off, and its content is moved below the book previews and essential information. Being limited in space, this design preserves its important hierarchy. Where on a wider screen you'd look left to right, on a narrower screen we tend to look from the top to bottom. Content on the right is moved below content that would appear on the left of a wider screen. After a while, when the horizontal space is fully limited, the navigation is simplified and stacked vertically, and some repeated or unnecessary elements are removed.

Teixido

This design features a complex layout that appears inspired by a print style. When it is viewed on a standard wide computer screen, more portfolio pieces are featured and spanned horizontally across the page. As one moves down the page, more graphics and imagery span the space. On a smaller screen, the portfolio piece is put down to one, and then eventually left out altogether for very small screens and narrow browsers. The visualizations below collapse into fewer columns and more rows, and again, some drop off entirely for very small screens. This design shows a creative and intelligent way to make a uncommon layout work responsively.

Stephen Caver

This design has three main stages at which the design and layout collapse into a more user friendly form, depending on how wide the screen or browser is. The main image, featuring type, is scaled proportionally via a flexible image method. Each "layout structure" is fully flexible until it reaches a breaking point, at which oint the layout switches to something more usable with less horizontal space. the bottom four columns will eventually collapse into two, the logo moves above the navigation,and the columns of navigation below are moved on top or below each other. At the designs' narrowest stage, the navigation is super simplified, and some non vital content is cut out altogether.

Unstoppable Robot Ninja

This layout does not change at all. No content is dropped or rearranged. The text size does not change either. Instead; this design keeps its original form, no matter what changes in horizontal and vertical space. Instead, it automatically resizes the header image and images for the navigation. The white space margins and padding are also flexible, giving more room as the design expands and shrinks.

Bureau

This is the simplest example of a responsive Web design example of a responsive Web design in this showcase, bt it is also the most versatile. The only piece in the layout that changes with the browser width is the blog post's date, which lies above the post's title or to the side, depending on how much horizontal space is available. Beyond this, the only thing that changes is the width of the content area and the margin space on the left and right. Everything is centered, so a sense of balance is maintained whatever the screen and browser width. Because of this design's simplicity, switching between browser and screen widths is quick and easy.

CSS Wizardry

Harry Roberts shows that responsive design can also have quite humble uses. If the user has a large viewport, the website displays three columns with a navigation menu floating on the left. For users with a viewport between 481px and 800 px, a narrow version is displayed: the navigation jumps to the top of the site leaving the area for the content column and the sidebar. Lastly, the iPhone view displays the sidebar under the content area. Harry also wrote a detailed article about the CSS styles he added to the stylesheet in his article "Media queries, handier than you think." A good example of how a couple of simple CSS adjustments can improve the website's appearance across various devices.

Bryan James

This last website design by Bryan James shows that responsive Web design need not apply only to static HTML and CSS websites. Done in Flash, this one features a full sized background image and is flexible up to a certain width and height. As a result of the design style, on screens that are too small, the background image gets mostly hidden and the content can be illegible and small. Instead of just letting it be, a message pops up informing the user that the screen is too small to view the website adequately. It then prompts the user to switch to a bigger screen. One cal discuss if the design solution is good or bad in terms of usability. But the example shows that Flas websites can respond to user's viewport, too.

Conclusion

We are indeed entering a new age of Web design and development. Far too many options are available now, and there will be far too many in the future to continue adjusting and creating custom solutions for each screen size, device and changing technology. It's better to start a new era today, creating websites that are ready for the future right ow. Comprehending how to make a design responsive to the user doesn't take too much learning, and it will be a lot less stressful and more productive than learning how to design and code properly for ever single device available.

futureofwebdesignimages

However; these are not the final answer to the constantly changing mobile world, that we've discussed for Response Web design. Responsive Web design is only a concept that when instituted correctly can make a better user experience, but it will not completely solve it for every user, device and platform. You will need to constantly work with new devices, resolutions and technologies to improve the user experience as technology continues to change in the future.

Responsive Web design, besides for saving us from unnecessary frustration, is also better for the user. Every custom solution makes for a bette user experience. Responsive Web design can create custom solutions for a wider range of users, on a wider range of devices. A website can be tailored as well for someone on an old laptop or device as it can for the majority of people on the hippest and newst gadgets that are out. And, as much for the few users who own the most advanced gadgets now and in the years to come. Responsive Web design creates a great custom experience for everyone. As Web designers, don't we strive for that on every project anyway?

0
Would love your thoughts, please comment.x
()
x