Over a million developers have joined DZone.

Responsive Principles At the Heart of Our Design

· Web Dev Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

This post comes from Ryan Cates at the AnswerHub Blog.

When approaching the task of creating a new standard theme for AnswerHub we wanted to make sure we got one thing right -- Responsive Design. We wanted to provide a consistent experience for users throughout the platform, regardless of the device they're using.

Twitter's Bootstrap framework was incredible helpful for creating a responsive theme for the platform. If you're not familiar with Bootstrap, it's a "sleek, intuitive, and powerful front-end framework for faster and easier web development." While some people feel that Bootstrap is over-used on the web recently, we felt it was the perfect place to start building our theme.
Desktop Vertical iPad Vertical iPhone
For the AnswerHub homepage, we used a main column with a sidebar that scale down with the resolution.
For the iPhone, we moved the Popular Topics and Recent Badges beneath the list of questions.

There are also other great responsive frameworks out there to get you started on the right path towards your responsive website. Zurb Foundation 3 or 4 and Thumper are two very light, yet very powerful responsive frameworks.

Desktop Vertical iPad Vertical iPhone
On the actual question pages, we followed the same pattern, scaling the columns with the resolution
and relocating the sidebar items beneath the main column for the iPhone.

As the global percentage of visitors using mobile devices continues to increase, responsive design is arguably more important than ever before. Soon, everyone will be viewing websites and web apps on a mobile device. So best to be prepared for the flood.

Desktop Vertical iPad Vertical iPhone
Our Ask a Question page did not require a great deal of responsive work since the content is fairly minimal.

On that note, one of the greater challenges we faced while building AnswerHub.com was adapting to the Bootstrap framework. It's always nice to have some clean, simple style sheets that provide you with styles that can easily apply to your HTML. With this in mind we would highly recommend reading the documentation and gathering as much information about the framework you're thinking about using so you can choose the best fit for your site. Some frameworks like Foundation and Thumper offer less intrusive style sheets to allow you to maintain a fluid grid system while being able to fully customize the components of your site.

The Web Dev Zone is brought to you by Stormpath—offering a complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".


Published at DZone with permission of Chris Smith , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}