Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I need to adapt a web site to be responsive. I used bootstrap 2.3 for the navigation bar, carousel slide, thumbnails gallery, etc.

My question is how do I adapt the site shown in the picture to be ok for mobile devices? Currently the wrapper, carousel area, left-content (search), main content (image gallery) and footer are fixed width. If it is responsive, where will the search options be located? How are the thumbnails shown?

Screenshot of web page with several sections. Main content is image gallery.

share|improve this question

closed as off-topic by Charles Wesley, rk., Matt Obee, msanford, Benny Skogberg MCSA Sep 1 '13 at 4:27

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions." – Charles Wesley, rk., Matt Obee, msanford, Benny Skogberg MCSA
If this question can be reworded to fit the rules in the help center, please edit the question.

    
You are asking design questions. These are questions you need to answer yourself to meet the needs of the site owners and users. –  DA01 Aug 30 '13 at 18:07

3 Answers 3

up vote 1 down vote accepted

You're also going to need to consider how your search mechanism is going to work on mobile. Ideally you'd customize that so that it isn't hidden or simply stacked at the top or bottom of your content, but perhaps a panel that is activated via a search button or icon. Same considerations should be made of the horizontal navigation. Bootstrap 3 provides some default ways of handling these things, but most of the time you have to make customizations depending on your specific use case.

Responsive example

Just a quick sketch of a mobile design for the site.

share|improve this answer
    
absolutely right, I only expect that going responsive doesn't affect how it looks actually on desktops. –  user35153 Aug 30 '13 at 20:22
    
Not at all...the sketch on the left is representative of the mobile site, not a re-imagining of the desktop. Basically search and menu collapsed into panes, header carousel hidden/removed and straight into the content. –  Sullivan Aug 30 '13 at 20:30
    
very good,I like how it looks. now i'll switch to bootstrap 3. –  user35153 Aug 30 '13 at 22:01

You can adapt the code to one of the responsive nav patterns, the idea of bootstrap is just to give you a good start and you can tailor it according to your needs. Brad Frost has a good website: http://bradfrostweb.com/blog/web/responsive-nav-patterns/ and I think he has some of his code in github.

share|improve this answer
    
thnaks a lot for the good guide –  user35153 Aug 30 '13 at 19:05

First of all, I would seriously recommend using the latest bootstrap 3 for responsive websites. You might as well since you're already using their 2.3 version. Bootstrap 3 was made for mobile first and makes it so much easier to develop for responsive websites. (I'm currently using it now)

When you say "mobile devices", I'm assuming you're also talking about smartphones.

I would seriously advise against having fixed width items. The whole purpose of responsive design is to have elements of the page adjust to the width of your device.

You're going to need to break down your page by priority (perhaps remove unnecessary ads/fluff) and re-structure the layout accordingly.

For example: If this is a rental property search website, I would have the search bar prominently at the top and a list of results at the bottom. Perhaps remove the carousel for less distractions. It all depends on the goals of the website.

share|improve this answer
    
thanks, by responsive i'm mainly thinking about smarthphones, I want to conserve the desktop version such as it's. you're right, i'll remove carousel and instead highlight propertieswith backgrounds. I'm just thinking in two version, one for desktop version and another for mobile. –  user35153 Aug 30 '13 at 18:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.