2

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.

elemjay19
  • 1,288
  • 12
  • 25
user35153
  • 23
  • 3
  • 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 Answers3

1

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.

Rosie
  • 2,006
  • 11
  • 13
1

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.

Chris N.
  • 1,848
  • 11
  • 14
  • 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
1

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.

Sullivan
  • 511
  • 2
  • 6
  • 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