CrazyEngineers Logo

Responsive Web Design - Web Design of the Future

What's the buzz about this Responsive Web Design suddenly? Okay, let me say something what I felt. First thing is, a website can be accessed from any kind of devices, say a PC, a Mac, a Linux, but now, a BlackBerry, an Android, or even a Nokia E5-00 (the one I have 😛).

Now the thing is there are a lot of devices capable of displaying websites as good as Firefox or Chrome on PC or Mac. So each one have a different form factor. So, using CSS alone, we have to make the change according to the form factor. That is called Responsive Web Design.

Many Web Development sites have given stuff about this, so lets take a look on it!

Something by A List Apart on Responsive Web Design...

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”

John Allsopp, “A Dao of Web Design”
Recently, an emergent discipline called “responsive architecture” has begun asking 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.

See what they say here: #-Link-Snipped-#

Something by Sitepoint...

It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Websites. Instead of responding to today’s needs for a desktop web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

Core Concepts

Three key technical features are at the heart of responsive web design:
  • Media queries and media query listeners
  • A flexible grid-based layout that uses relative sizing
  • Flexible images and media, through dynamic resizing or CSS
  • Truly responsive web design requires all three features to be implemented.
Inspirationfeed has given about #-Link-Snipped-#.

The Next Web has given about #-Link-Snipped-#.

There's a book, which has a foreword this way:
From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display.
Web Developers, share your views on Responsive Web Design here... 😀

Replies

  • Kaustubh Katdare
    Kaustubh Katdare
    Thanks for the share. How does the CSS code change? I think it's the browser's job to make the site display fine.
  • PraveenKumar Purushothaman
    PraveenKumar Purushothaman
    Yeah, but we will be using @media in the CSS to specify the media type or form factor, in the same stylesheet!

    Check this out:
    [​IMG]
    This one is like, when used as a portrait or landscape, a different width is applied.
    [​IMG]
    And this one is the one which I said, the complete change of form factor. See, each element in different screens are looking different...

    You can do it this way, example taken from Twitter BootStrap, the one we are using...
    @media (max-width: 480px) { // CSS Styles }
    @media (max-width: 768px) { // CSS Styles }
    @media (min-width: 768px) and (max-width: 980px) { // CSS Styles }
    @media (max-width: 980px) { // CSS Styles }
    @media (min-width: 980px) { // CSS Styles }
    @media (min-width: 1200px) { // CSS Styles }
  • Ankita Katdare
    Ankita Katdare
    Whoa. The examples from thenextweb were cool.
    Apart from 'using the same page as a portrait or landscape i.e. dynamically changing the width', what are the other simple things that can be employed by web designers for responsiveness?
  • PraveenKumar Purushothaman
    PraveenKumar Purushothaman
    Updated the image, in case if you are getting an access denied!
    [​IMG]
  • nigelb
    nigelb
    Yeah, Responsive design is huge. Twitter's Bootstrap and Zurb's Foundation are the 2 frameworks I've seen so far, that does it really really well. Now if you were visiting a site that's well designed in a responsive layout from multiple devices, you cannot go back! The comfort that it gives (especially on phones) is excellent.
  • PraveenKumar Purushothaman
    PraveenKumar Purushothaman
    nigelb
    Yeah, Responsive design is huge. Twitter's Bootstrap and Zurb's Foundation are the 2 frameworks I've seen so far, that does it really really well. Now if you were visiting a site that's well designed in a responsive layout from multiple devices, you cannot go back! The comfort that it gives (especially on phones) is excellent.
    Rightly said!!! 😀 They are one of their kind!!! 😁

You are reading an archived discussion.

Related Posts

JFreeCharts And NetBeans

I want to display a bar chart in my web app. I am using ' jfreechart ' but I don't know how to configure netbean to make it to write...

Hacker releases Symantec source code

A hacker released the source code for antivirus firm Symantec's pcAnywhere utility on Tuesday, raising fears that others could find security holes in the product and attempt takeovers of customer...

Best Books For Learning Java

Hey Computer and IT engineering i am student of EC interested in learning JAVA from basics to quite depth can you recommend me some Book titles???? ASAP...

Controlling of Home appliances using IR Remote

my project deals with Controlling of Home appliances using IR Remote...can anyone plz help me out..

How Accelerator works in car

How accelerator works in BIKE and CARS. I want brief explanation with sketch images 😀