Over a million developers have joined DZone.

Responsive Principles At the Heart of Our Design

DZone's Guide to

Responsive Principles At the Heart of Our Design

· Web Dev Zone ·
Free Resource

Learn how to add document editing and viewing to your web app on .Net (C#), Node.JS, Java, PHP, Ruby, etc.

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.

Extend your web service functionality with docx, xlsx and pptx editing. Check out ONLYOFFICE document editors for integration.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}