Shoutbox

sysmalakian: Birthday month starts now!
362 days ago

diceophonic: Vampiro Classics 2024 reissue
343 days ago

SabedLeepski: Sunburn Surf Fest for some scorching hot surf music: https://sunb...
300 days ago

skeeter: I know a Polish sound guy.
228 days ago

skeeter: I know a Czech one too!
228 days ago

PatGall: Surfybear metal settings
148 days ago

Pyronauts: Happy Tanks-Kicking!
126 days ago

midwestsurfguy: Merry Christmas!
95 days ago

sysmalakian: HAPPY NEW YEAR!
88 days ago

SabedLeepski: Surfin‘ Europe, for surf (related) gigs and events in Europe Big Razz https://sunb...
49 days ago

Please login or register to shout.

Current Polls

No polls at this time. Check out our past polls.

Current Contests

No contests at this time. Check out our past contests.

Donations

Help us meet our monthly goal:

100%

100%

Donate Now

Cake March Birthdays Cake
SG101 Banner

SurfGuitar101 Forums » SurfGuitar101 Website »

Permalink SG101 v3.0 new site design

New Topic
Goto Page: 1 2 3 4 5 6 Next

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):

small screen

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

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.

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

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

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.

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 None
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).

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

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

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:

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.

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

Photos for POTD are always welcome. Big Grin

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

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

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

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

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

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:
image
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.
image

Leave lots of white space and sell ads!

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]
Laughing

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.

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]
Laughing

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

Goto Page: 1 2 3 4 5 6 Next
Top