Brian
Joined: Feb 25, 2006
Posts: 19251
Des Moines, Iowa, USA
|
Posted on Feb 15 2016 09:57 PM
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
|
JakeDobner
Joined: Feb 26, 2006
Posts: 12159
Seattle
|
Posted on Feb 15 2016 10:02 PM
Oh very cool! Looks modern!
I also vote to pare down the Photo of the Day, I love it but there is some real garbage in there by people not involved in the site and some stuff that isn't particularly relevant. With the advent of improved camera phones, and cameras in general, I think we should solicit more photos again.
|
tired
Joined: Sep 03, 2006
Posts: 332
Herten - Germany
|
Posted on Feb 16 2016 01:15 AM
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
|
CrazyAces
Joined: Jul 31, 2012
Posts: 4052
Nashville, TN.
|
Posted on Feb 16 2016 08:19 AM
Looking good Brian.
Appears that it will be easy to navigate which is good for computer dumb asses like me who panic when they hear the words "re-design" in relation to a program or web page we use.
Thanks for your time, creativity and hard work to keep this site alive.
Cheers,
Jeff
— http://www.facebook.com/CrazyAcesMusic
http://www.youtube.com/user/crazyacesrock
http://www.reverbnation.com/crazyacesmusic
|
Badger
Joined: Nov 16, 2013
Posts: 4536
Wisconsin
|
Posted on Feb 16 2016 01:13 PM
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.
|
Ariel
Joined: Aug 29, 2009
Posts: 1556
Israel
|
Posted on Feb 16 2016 03:56 PM
Badger wrote:
I'll wait to see how it looks; don't do that mobile thing.
You don't want it to be to small either
Responsive design, by the modern standards, should accommodate and benefit large resolution displays as well as small resolution displays. In fact, that's the only parameter that should be considered today, as you have small devices with low to ultra-HD resolution, as well as large displays with the same span.
Brian, I'm also in the middle of designing a website (from scratch), my last web project was 15 years or so... My HTML/CSS knowledge is slowly catching on, but if you need some quick help I'm available (to at least try).
|
Brian
Joined: Feb 25, 2006
Posts: 19251
Des Moines, Iowa, USA
|
Posted on Feb 16 2016 08:43 PM
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
|
ElMonstroPorFavor
Joined: Sep 01, 2006
Posts: 2707
New Orleans, LA
|
Posted on Feb 16 2016 09:07 PM
As somebody who knows what responsive means, I think this'll be great. Looking forward to seeing the results.
— Storm Surge of Reverb: Surf & Instro Radio
|
Brian
Joined: Feb 25, 2006
Posts: 19251
Des Moines, Iowa, USA
|
Posted on Feb 16 2016 09:11 PM
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
|
Kawentzmann
Joined: Feb 27, 2006
Posts: 1057
Berlin, Germany
|
Posted on Feb 16 2016 11:04 PM
Brian wrote:
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.
Design is how it works, not just how it looks. But visuals are a part of how it works.
— The Exotic Guitar of Kahuna Kawentzmann
You can get the boy out of the Keynes era, but you can’t get the Keynes era out of the boy.
|
arny
Joined: Aug 22, 2010
Posts: 611
Netherlands, Europe
|
Posted on Feb 17 2016 02:35 AM
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
|
Brian
Joined: Feb 25, 2006
Posts: 19251
Des Moines, Iowa, USA
|
Posted on Feb 17 2016 08:15 AM
Photos for POTD are always welcome.
— 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
Joined: Feb 25, 2006
Posts: 19251
Des Moines, Iowa, USA
|
Posted on Mar 16 2016 06:33 PM
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
|
Brian
Joined: Feb 25, 2006
Posts: 19251
Des Moines, Iowa, USA
|
Posted on Mar 22 2016 08:32 PM
I've been fiddling with a new design; so far it has infected only the Yahoo Group area, which is probably the least visited area. I'm very happy with how the design adapts to my phone; the side bar collapses and things in the header and footer all rearrange for the smaller screen. I really like how the menu works on small devices also.
Of course the colors and graphics are all basically placeholders. Again if you have suggestions please let me know.
Going to start moving this to other areas of the site next.
— 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
Last edited: Mar 22, 2016 20:34:30
|
ElMonstroPorFavor
Joined: Sep 01, 2006
Posts: 2707
New Orleans, LA
|
Posted on Mar 22 2016 11:00 PM
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
|
Brian
Joined: Feb 25, 2006
Posts: 19251
Des Moines, Iowa, USA
|
Posted on Mar 23 2016 08:19 AM
ElMonstroPorFavor wrote:
Hard to say much since I know so much is placeholder
If anyone has suggestions for the placeholder colors and styling, let me know! Otherwise I may have to hire a designer to flesh it out.
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
Yeah I'm not totally sold on that either. I can try it centered.
with the down arrows nowhere close to the menu item they belong to and right next to the menu item to the right.
Seems to be a quirk of the current version of the CSS framework I'm using. I'm hoping this will be fixed in the next version.
On the whole, really exciting! Mobile menu is snappy and easy to navigate.
That mobile menu rocks. I'm very happy with the way it works.
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.
I'll see if that's possible in the framework.
Thanks for the feedback Hunter!
— 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
Last edited: Mar 23, 2016 08:20:40
|
Ariel
Joined: Aug 29, 2009
Posts: 1556
Israel
|
Posted on Mar 23 2016 12:13 PM
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
Joined: Feb 26, 2006
Posts: 12159
Seattle
|
Posted on Mar 23 2016 12:17 PM
Leave lots of white space and sell ads!
|
Badger
Joined: Nov 16, 2013
Posts: 4536
Wisconsin
|
Posted on Mar 23 2016 12:46 PM
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.
|
CrazyAces
Joined: Jul 31, 2012
Posts: 4052
Nashville, TN.
|
Posted on Mar 23 2016 12:50 PM
Badger wrote:
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]
Your Flash Is Outdated
Your Flash Is Outdated
Your Flash Is Outdated.
My old mac's favorite message while on the interwebs, LOL.
Cheers,
Jeff
— http://www.facebook.com/CrazyAcesMusic
http://www.youtube.com/user/crazyacesrock
http://www.reverbnation.com/crazyacesmusic
|