Meet The New Kid

So, you have been wandering around and heard the responsive design term frequently mentioned. What is responsive design? Many developers say that it is a new phase of web design, just like when the industry moved from table based design to css based design.

Why does people, trigerred by Ethan Marcott, bring up the importance of responsive? Why should it be here now? If we pay attention to smart phones’ rapid growth, we’ll know that computers aren’t the only piece of hardware with a web browser anymore. People want more than just able to view a web in their mobile web browser with mediocre performance. They actually expect more whic makes web design needs to be flexible and adaptable. Hence, the responsive design: what is considered to be a standard for today’s web design. We believe those who ignore this idea are going to be left behind.

How Responsive Design Works

What works on a desktop computer simply doesn’t work on a phone. Your design has to change to provide a good experience across devices. Simply saying, some techniques in responsive design help us create a layout that responds and adapts to different screen sizes and resolutions. Some of those infamous techniques and practices are,

• Flexible Layouts (Fluid Grids)

Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

• Flexible Images

The flexible image techniques basically work the same like one in Fluid Grids.

• Media Queries

CSS3 media queries basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For this purpose, it means to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like: 320px, 480px, 600px, 768px, 900px, 1200px.

• A link needs more relative space around it on smaller devices
• Text needs to be set at different sizes
• Eye candy is less useful on the smaller device
• There’s more space to consider on a larger device

But, responsive design is much more than just a bundle of polished old tricks wrapped under a new name.

Will It Cost Me More?

The answer may be both yes or no. What you should understand is that responsive design doesn’t mean that we’re going to designing and coding separate and static versions of different design states. What need to be done is putting more thought about different possibilities of usage into the initial, single design.

Facts about User Experiences

According to surveys conducted by KISSMetrics to mobile web browser users: 73% of mobile internet users say that they’ve encountered a website that was too slow to load, 44% of online shoppers will tell their friends about a bad experience online, and 79% of shoppers who are dissatisfied with website performance are less likely to buy from the same site again. And many more.

What if those 73%, 44%, and 79% number happens to your online store? Responsive design might not be the combo packet medicine, but I suggest you to at least try to find a solution.

Conclusions

It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole. -Ethan Marcotte

Responsive design is not mere a tool, but more like a way of thinking. Despite of cynical sayings toward it, responsive design is predicted to be a new standard in developing a website. So, why bother to say hello?

References         :

1. Think Vitamin | Beginners Guide To Responsive Web Design
2. Van SEO Design | Web Design Thinking Responsive

Expert Reading :

1. WebDesignShock | Responsive Design Problems
2. Smashing Magazine | Guidelines For Responsive Web Design

Showcases of Responsive Designs:

1. WebDesignLedger | 30 Creative Examples of Responsive Web Design