What, Why and How to create a future friendly responsive web design?

Web is not limited to desktop or laptop now, future of the web is much more broaden than even present. People are using internet in many devices like Mobile Phone, Tablet and I-pad. Internet usage is increasing in these devices now. The phone is no longer a tool to call or SMS only, people using it for surfing net. People are doing more on their mobile device like online shopping, search the location, social networking and many more…

What is future friendly responsive web design?

Traditional way of designing a web is a fixed width layout mostly of 980px but now web doesn’t want to be fixed with any width, it wants to flow freely; it wants to go anywhere and everywhere. Internet usage is increasing in different devices. Fixed width design is limited to a resolution but future is not fixed to any resolution or any device.

Web is used in many devices

We cannot create a future proof design because no one knows the future but yes, we can create future friendly responsive web design, which is adaptable in any device, any resolution and any platform. Create a single site that change its styling according to the device (a fluid design) don’t place restriction in your design; let it flow everywhere (in all the devices).

Why future friendly responsive web design?

Web is no longer one dimensional. The range of web-enabled devices is growing. We cannot assume now our web site will be viewed on desktop or laptop only. So, we have to rethink the context where our content is viewed. We have already started the content focus design; it needs to take one more step ahead now.

The content should be accessible in any web-enabled device because future and technology is not limited to any device. We make our financial plan for future, to relieve from the financial crisis in the coming future similarly start creating a future friendly web responsive design today to survive with the future technology tomorrow. There is no future proof design but there is future friendly design.

How to create future friendly responsive web design?

In one line make a fluid layout and keep everything flexible, it’s simple, but we know there are still lots of questions? Let’s put these questions in the cart of “Responsive Design”

Realityonweb: One design cannot fit for all the devices a design created for desktop cannot fit in the small mobile device.

Responsive Design: Yes, you are right; one design cannot fit for all the devices. It needs some workaround, you can change the placement of some elements like in a wide screen you can show the content in two or three columns and in small devices same can be presented in one column or any element can be removed or replaced as per the viewport.

Realityonweb: How is it possible? One HTML markup page (code base) and different views.

Responsive Design: Yes, it is possible using the CSS3 media query, you can write different structure for different viewports and here are some examples for CSS3 media queries.

You can also combine multiple media queries like this

Similarly you can write different media queries for different viewports like for smaller devices

Realityonweb: Ok, that’s great now, I can write different structural css for different viewport but what about the images? will I have to create different size images for different devices?

Responsive Design: No, You need not to create different size images for different devices. You only have to assign max-width: 100% to the img tag, it will scale up and down itself proportionally as per the viewport. But remember this image should have a parent with relative width like this

Realityonweb: What is this 53% width? How will I calculate the width in percentage? Let’s say I want a fixed pixels width but it should be in percentage as it is required in the responsive design.

Responsive Design: Oh! Don’t worry on that, it’s quite simple formula for this. You can convert any pixels width to percentage width

(target width in px ÷ parent width in px) × 100 = result

Still not clear, you can go through article written by Andy Clarke “There’s No Formula for Great Designs“.

Realityonweb: Ok, now using the CSS3 media queries I can assign different structure CSS on the basis of viewport and I can create fluid images also. It works fine in all the browsers but, what about the viewport configuration in the mobile? Mobile resizes the content to fit in the viewport while keeping the same aspect ratio.

Responsive Design: Right, making user start with a zoom gesture is bad. Viewport options can be defined with the viewport meta tag. It sets the initial zoom to 1.0 and prevents the user from zooming

Your web page will not scaled on load whether it’s on mobile device or an iPad. I have a demo web page for you. You can also download it for your reference.

Hope, these answers will make you easy with responsive designs.

Realityonweb: Yes, everything is clear now, thanks for the time and to clear all the doubts.

Responsive Design: Hey Realityonweb, stop where are you going? I have a question now for you.

Realityonweb: My pleasure what’s that?

Responsive Design: Now your all doubts are clear for responsive design, but your own design is still not a responsive design.

Realityonweb: Ohh yes, this is the problem, but I will change it soon with new design. I don’t want to continue with this traditional design now. I will work on the design also. Thanks, for reminding me.

Related Articles

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.

1 thought on “What, Why and How to create a future friendly responsive web design?”

  1. Hey Gary, thakns for the link to the Yoko WordPress theme. I’ve been poking around for a minimalist responsive design WordPress theme and haven’t seen that one. I think you’re totally right about the size/complexity of sites using that design style. I am impressed at how well the Boston Globe site turned out, but I doubt the RD techniques are carried throughout the entire site. Newspapers use far too many vendors to make that work in every nook and cranny of their site. However, with each progression of HTML and CSS I think that will become easier. If I were a mobile platform provider, I’d be nervous at the implications of this type of design. For the right kind (size/complexity) of site, it makes mobile platform providers irrelevant.

Leave a Reply

Your email address will not be published.