Responsive web design techniques tools and design strategies

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. New devices made after the release of CSS3 such as the iPad and Android devices will definitely support media features.

So, 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 browser that does not support CSS3.

This media query is fairly self-explanatory: if the browser displays this page on a screen rather than print, etc. New CSS3 features also include orientation portrait vs. One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths — even for landscape vs. Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used:.

The code above is from a free template for multiple media queries between popular devices by Andy Clark. Above are a few examples of how media queries, both from CSS 2. Many of these uses are relevant today, and all will definitely be usable in the near future. 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 just the opposite. Anything above the maximum browser or screen width specified would not apply to the respective media query. As mentioned above, the most efficient way to use media queries is to place them all in one CSS style sheet, with the rest of the styles for the website.

The class specified in the media query above hereIsMyClass will work only if the browser or screen width is above pixels. In other words, this media query will run only if the minimum width is pixels therefore, pixels or wider. Now, with the use of max-width , this media query will apply only to browser or screen widths with a maximum width of pixels or narrower. This means that even if a browser or other viewing area is minimized to something smaller, the media query would still apply to the size of the actual device.

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. Unfortunately, this property works only 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 min-width and max-width media queries are combined all the time to set a style specific to a certain range. The above code in this media query applies only to screen and browser widths between and pixels.

A good use of this technique 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 lost.

For devices that do not switch orientation or for screens whose browser width cannot be changed manually, using a separate style sheet should be fine. You might want, for example, 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 orientations.

Placing a media query for both the horizontal and vertical orientations 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 media queries in one style sheet would be best.

Nevertheless, organization can be key, and a designer may wish to define media queries in a standard HTML link tag:. In addition, below is a sample jQuery snippet that detects browser width and changes the style sheet accordingly — if one prefers a more hands-on approach:.

Remember that media queries are not an absolute answer, but rather are fantastic options for responsive Web design when it comes to pure CSS-based solutions. With the addition of JavaScript, we can accomodate far more variations. It is possible to shrink things proportionally and rearrange elements as necessary to make everything fit reasonably well as a screen gets smaller. We have best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.

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! 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.

For example, as we hide major pieces of content, we could replace them with navigation to that content, or with a different navigation structure 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.

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

Flurid Flurid is a liquid grid layout with up to 16 columns. FluidGrids FluidGrids is a fluid grid framework that creates layouts based on 6, 7, 8, 9, 10, 12 or 16 columns. It includes four basic layouts including tablet, mobile and wide mobile , with three sets of typography presets.

Fluid Grid System This fluid grid framework includes a typographic grid and baseline grid. Tiny Fluid Grid Tiny Fluid Grid helps you generate your own fluid grid with 12, 16 or 24 columns, minimum and maximum widths, and percentage-based gutters. Among other things, Ethan explains how he approaches the responsive design methodology, what the design process looks like and how prototyping is done in the context of responsive design.

Content Choreography Read up on how to properly plan your site to live up to todays standards. Begin to choreograph content proportional to size to serve the best possible experience at any width. Structured Content First In this presentation, Stephen Hay discusses a couple of troubles you might run into when structuring your content and argues that properly structured content is portable to future platforms.

Stephen suggests that we think about creating and designing structured content first that caters to the lowest common layout denominator, whether this be a small screen or a text browser.

This content should be able to go anywhere. Ford focuses on experience of its users first and then derives user scenarios and media queries from it. I am working on such a project now. Our approach has been to peruse the research and tailor an optimal experience for the most likely user scenarios. Working out from there, we judicially edit and hone for each media query. Breaking Development Luke Wroblewski took notes at the Breaking Development Conference while Stephen Hay talked about the realities of designing for different device experiences.

Patterns for Multiscreen Strategies Have a look at this simple but effective slideshow to get an idea of which core factors play a role in multiscreen concepts.

Responsive Web Design from the Future According to Kyle Neath, responsive web design is about a lot more than the size of your screen. This talk is about about how GitHub handles links, the url bar, partial page updates, and explains why Kyle thinks the HTML5 history API is the most important thing to happen to front end development since Firebug.

An inspiring presentation. Developing a Progressive Mobile Strategy In this presentation, Dave Olsen presents a progressive mobile strategy that consists of audience strategy, content strategy and platform strategy. Responsive by Default Andy Hume explains what in his opinion responsiveness is all about. Eh, It Depends An interesting article discussing the pros and cons of responsive designs vs. The Case Against Responsive Web Design It seems only fair to include some dissenting opinions here about when responsive design is and is not appropriate.

Take a look in the comments section, too. Luke Jones has a similar opinion. Sign Up. Upcoming SlideShare. Embed Size px. Start on. Show related SlideShares at end. WordPress Shortcode. Share Email. Top clipped slide. Business , Technology. Download Now Download Download to read offline. FITC Follow. Hobnob v Shepherding Innovation. OneMethod in a Nutshell. Minimize the use of JavaScript and Flash as far as possible, as a number of mobile devices and tablets do not support Flash, and this would sorely inhibit the navigability of your website.

Several web browsers run outdated versions of Flash plugins, and some may not even have Flash installed, so you must keep the masses in mind. Switch to HTML5 if applicable, in case you require animations. HTML5 is a fantastic browser-compliant substitute for Flash. If you are aspiring for an overwhelming traffic then you need to make your site compatible and attuned to multiple devices and browsers. You must ensure that your website can be accessed by everyone visiting it no matter what application or browser they are using.

It is important to keep in mind that the success of a site depends on its usability and not on its visual design. It is best to use a user-centric design if you have a profit-oriented website in mind.

The success of a website depends on its usability because its existence is meaningless if users cannot use it. There is absolutely nothing wrong in using eye-catching done steps or large buttons with attractive visual effects. It is necessary to let the user view all the available functions clearly. Feature exposure contributes to a good user interface design. The visitors should be able to interact with the system comfortably. Web content writing is much different from print.

Use objective language. No one is interested in reading promotional content. Everyone would avoid long text blocks without keywords and images. You need to talk business and provide crisp and concise content. You need to categorize your content, remember to use subheadings, use bulleted lists and visual elements to break the monotony of blocks of uniform text.

First of all it is best to minimize cognitive load so that it becomes easier for visitors to understand the idea behind your system. Also, ensure that less action is needed from users to try a service. Only then would a random visitor try it out.

First time visitors are not interested in filling web forms for some account which they may never use again. It is a wise idea to design your website in such a way that visitors have the ease and freedom to browse the site without being compelled to share private data. They would keep coming back to your site once they discover your services. Using negative space in your web design is an excellent idea. Nobody wants fluff. Visitors should be able to figure out precisely what they have in front of them without too much searching.

Designers should not worry about negative space while creating a site. You just need to create normally and then go through it and remove stuff wherever required to get the desired look. Incorporating conventional site elements need not necessarily make your website boring. In fact, conventions are good for reducing the learning curve or the need to understand how a particular thing works. TETO-principle is vital for all web design projects.