HTML5 Zone is brought to you in partnership with:

Chris is the manager for the AnswerHub blog (http://answerhub.com/blog) where they talk about helping organizations become more efficient, communicate more effectively and collaborate with ease through question-and-answer software. A feature rich platform for internal collaboration, AnswerHub is designed to engage users and help them contribute to your community through innovative features including gamification, reply-by-mail, spaces, tags, social networking and search. Customers have selected AnswerHub to facilitate internal communication, community building and customer self-service. Built from the ground up for scalability, flexibility and security, AnswerHub can work for organizations of all sizes, in a number of industry settings. Visit the resources page for case studies, whitepapers and datasheets - http://answerhub.com/resources Chris is a DZone MVB and is not an employee of DZone and has posted 4 posts at DZone. You can read more from them at their website. View Full User Profile

Responsive Principles At the Heart of Our Design

05.24.2013
| 1379 views |
  • submit to reddit
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.

Published at DZone with permission of Chris Smith, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)