Responsive Website Planning


Planning your first responsive website design project? Forget what you currently know about web design and get ready to learn a new process. A mobile first, responsive, content-focused, design for the ages process.

So you have been planning and designing websites for years, and have created some incredible desktop websites. Now it’s time to jump on the responsive web design train that everyone is talking about. Where do you start? What makes the planning process different from your current design technique? Below is a great list of key points to think about when it comes to designing a mobile first, responsive website.

 

 

Print

1) Think Mobile First

Now, we’re not saying completely forget the desktop. That would be crazy. We are just saying make sure to think about how your site is going to look on mobile devices and tablets, and how that differs from the desktop version. What happens to that “right sidebar” when the screen size gets smaller? What are the most important elements that need to be displayed on this page? All of these questions and more need to be answered during the responsive website planning phase.

 

 

Print

2) Mock Up Your Pages With An Open Mind

If this is your first responsive web design project then this one is important for you. Get out of your normal mind set and think a bit differently. This will help you in the long run when it comes to creating compelling mobile first website designs.

 

 

Print

3) Look at starting with a Framework

In case you couldn’t tell, we love Bootstrap. After trying a few different frameworks you can see why we chose Bootstrap for responsive web design. Frameworks can be a huge help when perfecting your responsive design skills. They allow you to focus on making the site look good and not worry about if it’s going to work correctly on different browsers. Overall our skills as web designers has tremendously increased solely because of using frameworks.

 

 

Print

4) Percentages and EM’s instead of pixels in most cases

In most cases you need to use percentages instead of pixels for your CSS. This is very important when coding for a mobile first, responsive web design. As screen sizes get smaller your site needs to adapt and sometimes pixel widths and heights can prevent that from happening. If you get confused check out this article about the differences in units.

 

 

Print

5) Simplicity is key

This sounds simple right? Well it should be. There is a reason why most designs are simple in structure and well organized. Most of the sites you see today are built for conversion and have a strategic placement of key elements. Thinking about you site in it’s simplest form will allow you to structure you content accordingly and that should transfer well to tablet and mobile screen sizes.

 

 

Print

6) The Grid Speaks

Using a 12 column grid in your design process will ultimately help you to create a clean, user friendly structure. This is another reason why using a framework may be a great option for you. Jetstrap, a interface building application for Bootstrap, explains a little about using a grid here.

 

 

Print

7) Limit the use of hover elements

This should be a given. The days of hiding important content behind a hover element is over. Hover elements do not transfer well on all mobile devices. If you decide that having a hover element is critical to your desktop top design, make sure to use good practice and don’t forget to code the :focus element as well. You can also use media queries to control your CSS on different screen sizes. See our next point…

 

 

Print

8) Learn and use Media Queries

This will save your life in development. Media queries allow you to alter what the CSS does based off of the screen size that it’s on. These need to be listed at the very bottom of your style sheet. For more on using media queries you can take a look at this list as a great reference.

 

Conclusion

There is a ton of key points to think about when starting a new responsive website design project. These are just a few. We hope this list helps you out with starting your next project. Let us know if you have some other really important points to think about in the comments thread. We always love to hear your thoughts. Happy designing…