Streaming live at 10am (PST)

Youth Baseball Website


#1

I am doing a website for my son's baseball team organization. The preview link can be seen here and the live link is here. Currently there are only a few pages (home, 12U Milanovich, alumni) while I work out the kinks but I could use the expertise of some of you Webflow magicians. Some of the plans for this site include the following:
1. Modal linked to the player name which gives a full player bio [Done]
2. Media gallery for photos and videos
3. A scoreboard ticker for the homepage [Done with a caveat]
4. Other miscellaneous material on team pages like Facebook, Twitter, and GameChanger links, map to field locations, etc.

What can I add to do to make the site better? If you visited this website, what type of information would you like to see? Thanks.


#2

My few cents (:

I would rework the homepage, because for you the site is obvious, but for me it isn't. It misses an important piece of design: the statement, the slogan. One simple sentence that explains who you are and your mission, written in big, containing both "we are" and "we do". You have the mission paragraph lower but you're still missing the slogan. Along with the slogan, propose an action that you'd really like your visitors to take. (call to action button)

So instead of the slider on top (sliders proved not to be as effective as we thought), I would make a nice hero banner all across the site, with the statement written on it. And right under, I would design "cards" to feature and link to the piece of info you currently have in the slider.

Something like this:

PS: sorry for the crappy slogan (:


#3

Great idea Vincent. I will work on that today. What do you think about a slider on an individual team page? Also, slides 2-4 use the slider trigger for the interaction. Can you tell me how to apply the same interaction to the first slide on load initially and slider trigger after that? I hope I explained that clearly enough..


#4

Sliders should be used when you need to display a lot of information and you have limited space available. Sliders shouldnt be used to provide visitors with a toy to play with, or for the sake of having an animation on the site.

When tested, sliders have a very poor adoption, most people won't browse them. It also brings some kind of annoyance when you're reading something and it automatically gets to the next slide.

In another hand, section design is kind of gorgeous (sections with big backgrounds, sectionsbeing one on top of each other). It's easy to browse and you don't miss anything.

So my opinion is you need a reason to use sliders. If you can't find one, don't use it. If you're using a slider to display, say, a lot of players cards, make it obvious it's a slider and give a peek of the next slide. Look on this page what I have done with some sliders and sliders interactions (Fancy Image Slider):

http://sab.webflow.io/interactive-elements

Use a simple, not slider related interaction. Hide the text by default and make it appear onload with a 1000ms delay.


#5

Vincent, would you mind taking a look at this site again? I would like your opinion on the navigation. The slidebars were meant mainly for mobile navigation but I am wondering about it for navigation on anything larger than a cell phone. Additionally, the header with the logo and scrolling scoreboard is broken on iPad even though it appears perfectly on a desktop/laptop. I thought the ipad in landscape view was the same breakpoint as the desktop so it should look the same, right?


#6

The link doesn't work for me anymore.




#7

Sorry, Vincent. Preview link is here. Live site can be viewed here. I am trying to make this the coolest youth baseball site in our area so I appreciate for the assist.


#8

@Aksaunders nice work!

Looking really cool - I actually really like the menu sidebars, even on desktop. If you're not 100% keen on it though, you can just set the menu icon to "display: none" for desktop in the settings pane.

Just one thing I noticed: the header image on the front page isn't filling the full screen width on my desktop.

Just set the it to "cover" in the image settings & it should look perfect.

If you're going for the coolest youth baseball site in your area: mission accomplished in my book smile


#9

@EvanJones thanks for the compliments. The site is coming along nicely. As for the picture not covering your screen...I'm at a loss because it is a background image set to cover in the settings panel. If you don't mind checking it out, here is the public link.


#10

Its amazing! keep it up smiley


#11

@brilliantlights thanks for the kind words. I am working on it but only have a little bit of time each night to work on this after kids sports and family time.


#12

Anyone who can help me work out this problem would be a rock star in my son's eyes. He told me that it looks stupid on the desktop because there are not enough scoreboxes showing on the ticker and it leaves a lot of white space. It looks good on my retina display ipad in landscape and portrait view. My issue is that if I add more slides in the custom code section, it breaks the structure on the ipad even though it looks good on the desktop. Live link is here and preview link is here. See the pictures...


#13

Hey @Aksaunders what you could do is place the ticker within a div instead of a container then adjust the padding for mobile / desktop/phone. This would give you control over how much negative space you have on the left and right.


#14

@Aksaunders so you would not have to really add any more tickers just adjust the padding for the different sizes. Otherwise GREAT JOB your sons got a rockstar and a web dev for a dad lol!


#15

@David_Moore brilliant idea. And it worked perfectly. I have not published the changes yet because I am figuring out why the alumni page appears with the top portion of the screen cut off even though it uses the same symbol at the top of the page. Again, thanks for the suggestion.


#16

The new and improved scoreboard is up and running. Check it out on the live link or at the preview site. Thanks @David_Moore for the idea.


#17

Hey @Aksaunders the site looks great man!

Is this for Columbus, OH?

Just curious because I live in Cincinnati.


#18

Hi @Aksaunders!

Nice work! One question. Your nav menu..is it a Webflow Nav tweak or something you've built entirely from scratch?

Keep it up!


#19

It is a jquery plugin called Slidebars.


#20

The site looks great! Congrats!