I thought I would start a thread about the impending SG101 V3 redesign. I'm going to update the site in pieces instead of all at once. I'm getting close to putting up the first piece, but I thought I post a few demo screenshots first.

I just wanted to demonstrate what is meant by a "responsive design". So in this first shot, you can see what the site would look like on a desktop or laptop. Don't get hung up on the colors or the visual design yet. It's all kind of a placeholder, and it looks kind of plain. I'm hoping I can jazz it up or get some help with that.

Desktop shot

Notice in the above I have some dropdown menus instead of the menus on the left side bar like right now.

So here is what happens when you shrink the screen. At a certain point the site adapts to your small screen size (like on a phone or tablet):

So a couple of neat things happen:

• The search bar now stacks under the top left links
• The banner goes hidden
• The dropdown menus get replaced by a more mobile friendly menu
• The left side bar is hidden

So that's the kind of ideas I'm exploring right now.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

I am still enjoying the foto of the day.
For many fans throughout the world who don´t have all the cds
of the different bands or have not a chance to see them live
it is helpful to see fine shots on SG 101.
Ruediger from Germany

I agree about liking the POTD, but also agree it needs some new meat.
Probably not something for a redesign topic, though, unless the large number of obsolete stickied threads comes up...

I'll wait to see how it looks; don't do that mobile thing.

Wes
SoCal ex-pat with a snow shovel

DISCLAIMER: The above is opinion/suggestion only & should not be used for mission planning/navigation, tweaking of instruments, beverage selection, or wardrobe choices.

Well, POTD is not part of the redesign. I have never stopped soliciting images, they just have dried up. I can go out and hunt for them, but I have much more important things to do, like this redesign. It will also take time to go through the photos and delete ones that may not be relevant anymore. So I'm kind of at the mercy at what people send me, and quite honestly no one sends any in anymore.

Jeff, you don't have to worry too much. The site will operate the same, but just hopefully better on phones and smaller devices.

Thanks for the offer to help Ariel, I appreciate it.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Thanks for the encouragement, it is really dawning on me how much work this is going to be. I'm really going to be relying on the stock look of the Foundation CSS framework initially, so its going to look pretty plain. I'm still thinking about hiring a designer to help spiff it up.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Brian wrote:

So I'm kind of at the mercy at what people send me, and quite honestly no one sends any in anymore.

Brian, if you need new photo's, just let me know. Got lot's of them posted in the past through my own site(s). But if you like, I can sent you a selection, for use on SG101.

www.alohasluts.com
Aloha Sluts on BandCamp
www.arnyzona.com (my photography)
Aloha Fest on facebook

Last edited: Feb 17, 2016 02:36:18

So back to the topic. I'm going to push up the changes I made soon. The changes will only affect the Yahoo Group area of the site for the time being. Please keep in mind everything is basically a placeholder. I want to get feedback and see what it looks like on small devices. So if you have specific comments on colors, graphics, fonts, etc I want to hear them.

A secondary question is you'll notice there is no shoutbox on the converted pages. That's simply because I haven't gotten around to porting it to the new design as it is kind of complicated. I intend on adding it back, but just wanna check first: is it worth keeping? I kind of like it, but if everyone thinks its dumb I won't bother.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Hard to say much since I know so much is placeholder - the only big thing bugging me is how the navigation stretches out to fill the entire screen width. Looks kinda wacky on my 1440p screen, with the down arrows nowhere close to the menu item they belong to and right next to the menu item to the right. Personally I would keep the navigation max 1200px wide and centered like the rest of the content.

On the whole, really exciting! Mobile menu is snappy and easy to navigate. Need to make the "menu" text clickable instead of just the hamburger but I'm sure you've got a long list of to-dos.

Storm Surge of Reverb: Surf & Instro Radio

A couple of tips:

Take the color scheme from Fred's logo.
Add subtle gradients and shadowing (all can be generated via CSS).
Clever use of inverse (white on dark bg) for important information.
Maybe that can be a start.
An example:

I can supply you with the hex colors if you want.

Try to span the elements wider for higher resolution displays:
Beyond 1170px there's a lot of real estate wasted. That would mean tons of white space on large displays, and very small fonts on high res phones.
At some point, all the fonts need to be increased by % of screen size.
4K will be standard in a few years, so take care of your breakpoints now!

Here's the logo with transparent background for easier implementation.

JakeDobner wrote:

Leave lots of white space and sell ads!

By all means, please make it as animated, CPU-intensive & auto-refresh skittish to navigate as the rest of the web.
[/sarcasm]

Wes
SoCal ex-pat with a snow shovel

DISCLAIMER: The above is opinion/suggestion only & should not be used for mission planning/navigation, tweaking of instruments, beverage selection, or wardrobe choices.