BBI Front page tweaked for mobile devices

Main logo is fine but truncated on right-blue text. Scroll down and formatting is wonky (left 2/3 of screen is blank), scroll further and all looks good.

Love the drop down menu.

Screen however is not aligned and about half of it is cut off

just use a CSS media query to swap out the logo for a smaller one on small devices, or, use a CSS media query to make it so it doesnt go wider than it's container.

Right now you have h1.header set to a fixed width of 650px so it's always going to cause issues on mobile

I've volunteered my services before to help with design and front-end of BBI before, I'm always here to help if you need!

I've messed around with the design of BBI personally in my own free time hoping to come up with stuff for my portfolio. Here's an example:
The Corner Forum modernized & re-imagined - ( New Window )

I figured I had to knock the CSS around a bit to make it work.

You could do something like:

Code:

@media (max-width: 649px) { h1.header { width: 100%; height: auto; } .blogtitle img { width: 100%; height: auto; } }

I would recommend you use a different logo/image for the header on mobile though. And I would definitely recommend using live text for the "Latest News, Analaysis & Discussion..." text... better for SEO purposes!

The box doesn't adjust properly when you make the screen smaller. I think the code wants to put the picture underneath the headlines, but it gets shunted off to the side.

the setup of that area isn't really conducive to mobile devices.

There's a number of things you can do with the CSS and even HTML structure.

E.g. you could make that area stack -- so the photo is on top and the article headlines are below it.

an example of the stacking...
http://i.imgur.com/ydFkf8P.png?1 - ( New Window )

And it's just not doing it properly.

I implemented the css you suggested and it seems to work better. I don't want to spend a ton of time on this design because I think we'll move to something different sooner rather than later, but I'd like to make it more mobile friendly in the interim.

I like your forum mockup. We plan to do a forum redesign as well, once we decide what direction to go in.

but at some point you should get on Bootstrap for ease of customization with stacking and grids. would be kindof a fun project if i had spare time. example grid layouts here.
Link - ( New Window )

In comment 12108378 Giantology said:

Quote:

I've messed around with the design of BBI personally in my own free time hoping to come up with stuff for my portfolio. Here's an example: The Corner Forum modernized & re-imagined - ( New Window )

i like this. clean.

Gary, please do keep in touch when it comes to any new designs, would love to lend a hand or give my two cents to give back to the site.

There's so much that could be done to really make this site get to another level with user experience and engagement.

I'm really supportive of that.

In comment 12108426 Giantology said:

Quote:

Gary, please do keep in touch when it comes to any new designs, would love to lend a hand or give my two cents to give back to the site. There's so much that could be done to really make this site get to another level with user experience and engagement.

Shoot me an e-mail at my webguy address and I'll let you know when we start working on the new design.

In comment 12108378 Giantology said:

Quote:

I've messed around with the design of BBI personally in my own free time hoping to come up with stuff for my portfolio. Here's an example: The Corner Forum modernized & re-imagined - ( New Window )

Props to you Giantology. I really like the forum set up. Looks modern and has that clean crisp look to it.

Still more could be done with it, that's just a something I put together in a few hours.

And create a bootstrap skin, as a mockup for Gary. I notice the board is still in tables. Would be fun to play with a responsive and adaptive layout around a simple design like you have mocked up

Header needs to decrease yet. Title/ column needs its width adjusted

Although I still like tables for the actual thread list. I think you could reasonably call that tabular data.

My idea is to lose some of the columns based on screen size. Views, then comments, then maybe lose the usernames in the last posted and started b columns and lastly drop the ads.

Either I'm doing them them wrong or there's something overriding them in the theme.

A lot of the problem with the front page seems to be the News and Notes module, and I think we can just lose that for now if we go below 320px in width.

In comment 12108506 Gary from The East End said:

Quote:

Either I'm doing them them wrong or there's something overriding them in the theme. A lot of the problem with the front page seems to be the News and Notes module, and I think we can just lose that for now if we go below 320px in width.

I have my hands full with my baby right now but later today / tonight I'll check it out

Most of my interaction with BBI is on my phone these days. The forum pinching and expanding could seriously be addressed. But like many users I come right into the form I very rarely visit the homepage

- Nelson Munce

Make sure the @media queries are the last thing in the cascade

On the best fan based website in the world!

Don't visit it as often, so I don't really care as much. That being said, as long as you are optimizing for moble, the forum is fundamentally broken for moble users. It is the drop down menus. They do not work for moble since there is now way to hover.... Just making them on click at the least would be an improvement for mobile users.

In comment 12108947 NYDCBlue said:

Quote:

Don't visit it as often, so I don't really care as much. That being said, as long as you are optimizing for moble, the forum is fundamentally broken for moble users. It is the drop down menus. They do not work for moble since there is now way to hover.... Just making them on click at the least would be an improvement for mobile users.

this

The News and Notes section breaks the whole thing when you go to a smaller screen and none of my @media directives to fix or hide it have any effect.

There will be a new, responsive BBI front page designed from scratch sooner rather than later.

With respect to the forum and the menus, I'll be doing a rewrite of the forum code with a modern UI and a proper responsive menu, unless we go to an existing OS forum. More about that later in the week.

Thanks to everyone for your feedback.

The front page is truncated to left and right side blank.