Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

What is the best practice to design a responsive web design?

From the beginning to end about the responsive web design.

user-image
Question added by Jaffar Sadhik I , Senior Web/UI Developer , Wisdom Infotech
Date Posted: 2014/02/06
Rami Nasrallah
by Rami Nasrallah , Customer Experience Specialist , DEVNET

Don't use any framework to be honest all what you need to read few line in the CSS about @media queries to buld it by your hand, also if you need to edit anything on these frameworks you will need to learn same part of the CSS to know to modify or customise the @media queries and conditions. just read this and you will find it so easy Responsive @media Queries

Anber Mumtaz
by Anber Mumtaz , J2EE Developer , Front-end Developer , Web Designer , UI Designer , DPS digital processing systems

One and only rule to make things easy is below.

Use percentages to handle width, thats it.

Deleted user
by Deleted user

Basm Allah Alrahman Alrahim

 

It is so easy design !

 

consider that you will divide your css file to3 css file with the same things but with3 different size to the container !

 

there is a very good css that will help you a lot to make a responsive web site at this link

getskeleton.com

you can study this CSS skelton very will and you will understand every thing about responsive [ then see this video ]

 

 

this link for youtube video to make responsive website with the easiest way

 

 

Muhammad Waqas
by Muhammad Waqas , C#/.Net Developer , Signup solution

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 mix of flexible grids and layouts, 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. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market. 

Liza Mcbell
by Liza Mcbell , broker , Insurance

When it comes to responsive web design, twitter bootstrap logic is the best. But that long way to learn, if you want to get a shortcut, I would rather recommend magic liquidizer for converting old theme to become responsive.

Hillary Alba
by Hillary Alba , Web Developer , Web Studio

Responsive Web Design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. The design instinctively adapts to the device it is being viewed on so it looks great on a mobile, tablet and desktop.

Advantages of Responsive Web Design:

  • Super Flexible
  • Excellent User Experience
  • Cost Effective
  • Very Easy to manage
  • An Increase in Mobile Traffic
  • No Duplicate Content Penalty
  • Better SEO

WebClues Infotech is one of the most popular web design company. The websites they create or modify are so adaptable that users can view them on anything from a smart watch to a big-screen smart TV. their responsive design service is still top-notch, even with such a diverse service catalog, because of their outstanding execution team.

 

Our Responsive Web Design Services:

  • Customized Responsive Web Portal Solutions
  • Responsive E-commerce website, forums, and blogs
  • Designing Responsive Website Layouts
  • Responsive website development
  • Custom web design & development
  • Open source development
  • Extensive testing services

Our responsive web design aims to provide optimal viewing and interaction with easy readability and navigation across a wide range of devices. Our designer team understands the concept of developing a responsive web design in a manner that helps the layout to get changed according to the user’s computer screen resolutions without compromising on the content. Cost of responsive web design is in between $2,500 to $5,000.

Visit: https://www.webcluesinfotech.com/responsive-web-design/

Contact Us: https://www.webcluesinfotech.com/contact-us/

Hire Developer https://www.webcluesinfotech.com/hire-responsive-web-designer/

 

Mohammad Abdus Samad
by Mohammad Abdus Samad , Visual Communicator , Bensirri Public Relations

2 down vote accepted

Using media queries will adapt a different css for different screen sizes. The way it works is telling the browser: if screenwidth =700px or smaller/bigger; use mobile css. If screenwidth =1000px or smaller/bigger; use desktop css. There's no limit to how many media queries you can use.

Using percentages is also a possibility; fluid design. I'd suggest using this together with media queries though.

As for frameworks, there are many out there. Bootstrap is one of the more populair ones. I personally believe working mobile first is the best way to go though. However, there is still heated debate on this subject.

As Pete mentioned in a comment earlier; working with graceful degredation (desktop first) will make the device download as much as the desktop site but not make use of the content downloaded. Wich is a huge drawback for the user. (Bigger pageload times, lots of server requests, more use of MB data etc.) Hence why I think progressive enhancement (mobile first) is the way to go.

Using progressive enhancement, the browser will always download the mobile css first; cutting down pageload times extremely.

For browser support info on responsive design, check this link.

More Questions Like This