White Space in Design (and why it matters.)

White space is the blank space, the empty space, between your content. Many people think this empty space is just a opportunity waiting to be exploited, eagerly awaiting the chance to cram as much content as possible into what’s left.

 

This is not a land to be conquered.

If that is your thought process STOP, back away from the keyboard slowly. White space or "negative space" is actually a tool in the fundamentals of both print and web design and is as easily as important as the content it surrounds.  It’s the space we leave between all of your elements to give a layout elegance and clean form.

The Wild Wild Wonderful World of Tablets!

With more and more people using tablets as their primary window into the internet , it’s critical you understand how your site appears across those platforms, as your sites long-term success rides on this truth.  Responsive design can help your site maintain its look across the various platforms it will be seen on, which will give the end user a cohesive experience. 

This is critical because how users think of your site and how they interact with your content is largely defined by their experience. You can have the best content in the world, but if your end user cant see it or use it, none of that will matter, your sites visitors will dry up, and there will be much weeping and gnashing of teeth. That can further impact how they share you  on social networks and whether they recommend you to others.

Today, many sites sense if the visitor is on a mobile device or tablet will redirect to the mobile version of the site.  The trouble with this is, many of those sites sacrifice some content for a simpler interface.  This can kill your credibility with your audience. On the technical side, it can lead to duplicate URL issues over time, so you want to make sure you account for this when it comes time to redesign your site. So remember keep those sites simple and elegant, the sites purpose before everything else is to deliver your content effectively. Don't be afraid to jump into the world of tablet and mobile optomized web building, its the future and we are all on for the ride.

Save for web and Devices!

This is probably one of the most useful functions built into Adobe Photoshop for web developers. One of the biggest issues we will run into when creating content for our websites or mobile devices, is that the assets we create or cultivate are just to big! with this handy function found in the file tab you can keep the quality of the image high but the load times low by dropping the size dramatically. Remember don't just save, save for web and devices.

WordPress for Websites & the 7 plugins you will need.

WordPress has become a increasingly popular method to create a website due to its ease of use, fantastic and helpful developer community, and the sheer number of high-quality free modules and plug-ins that can add fantastic features and security to your website. Here is list of the seven I recommend everyone start with.  

Akismet Spam Protection
Akismet is a spam filter plugin for comments. It is automatically installed with WordPress, so you simply need to go to your WP-Admin Dashboard and click on Plugins, find Akismet in the list and click Activate. A message will appear asking for your WordPress.com API key, simply click the link and create a WordPress.com account and then copy and paste the key back into your Dashboard.
 
Quick Cache
When a page is accessed on your site, WordPress performs some database lookups and executes a bunch of code. Ordinarily this isn’t a problem, however if you happen to have a lot of traffic all at once, this can slow your site right down. Quick Cache is a plugin that caches your pages periodically to dramatically reduce the load on the WordPress server. You can find the plugin at http://wordpress.org/extend/plugins/quick-cache/
Once installed, click on Plugins in the Dashboard and click Activate. You then need to click on Options in the dashboard menu and find WP-Cache in the menu. This leads you to a page where you can enable the caching. Don’t enable just yet, because it’s best to do this after you install your theme and have everything working, otherwise you can sometimes have trouble testing changes.
Note that to get WP-Cache working you may need to create some directories for it to write to. The plugin will give you details of what to do.

Catch common usability problems before user testing.

There is a saying I always liked: "Don't try to say again what has already been said better," With that on my mind, I present to you the following link. http://userium.com/ This a excellent checklist/tool in your web development arsenal that allows you to catch common usability problems before user testing. Enjoy, and happy coding.

Click Me!

Choosing the Best Layout for Your Website

You have your domain name and your hosting, but now it's time to get your actual site up and running. Which layout do you choose? There's hundreds if not thousands of layouts to choose from. Does it matter which one you choose? Of course it does.

There are one column, two column, three column websites, and bunches of variations of particular layouts. The simpler your site is, the easier it will be for your consumers to use it. Don't put too much information on the homepage. Homepage space should belong to the absolute most important information on your website.

Comparing Web Hosting Options

We realize that choosing a web host can be a difficult decision to make. They all seem like they offer the same products for the same price. We've decided to break down our featured hosting providers so you can get a direct comparison on the features they offer.

eTeamz…an Easy Solution

eTeamz is partnered with Active, so it’s an easy solution for transferring your website. Active will do the site migration for you, so all you have to do is continue maintaining your site the way it is.

eTeamz is a sports website platform that is similar to Clubspaces. They have 75+ site design templates to choose from. All you need to do is drop in your logo. Their editor is simple and easy to use – no more difficult than using Microsoft Word. They offer a scheduler and a soccer statistics tracker module that lets you enter scores for Region games over multiple seasons. There is an integrated email communication module so that Regions can send out communications to parents, coaches, referees or whomever you need to get information to. The calendar feature lets you create a detailed game calendar with dates, times and locations so that parents can keep on top of their child’s schedule. They also have a product called MessageCast which allows the Region to send out text messages to anyone on the recipient list (Similar to Rained Out used at the National Games last year).

Why Choose the Active Youth Network For Hosting

The Active Youth Network offers website and ad hosting for youth sports organizations. The thing that’s emphasized most with their product is their integrated advertising.

Their advertising is completely handled by the company. They choose family-friendly companies to advertise on their websites. By accepting their free website, you agree to have their advertising on your pages. Regions can receive a share (70 percent) of the revenue from these advertisements, which is a great revenue generator for your Region.

They also offer a “QuickAds” solution where your Region can sell ads to local advertisers. These ads can be managed through the Active Youth Network website. By getting local ads, Regions can earn an extra 70 percent commission on top of the 70 percent received from Active Youth Network.

What Blue Sombrero Has to Offer

Blue Sombrero is a web platform that is specially designed for sporting groups. They are owned by Dick’s Sporting Goods, so they already have a foothold in the sports industry.

Their websites come with a content management system (CMS) that allows you to choose a layout and easily edit the content for that layout. They have a wide variety of themes to choose from, which makes each page consistent across the board. All of their templates are designed to work on all browsers, so you don’t need to worry about cross-browser functionality. Their free-flowing design adapts to screen sizes so it works well on mobile platforms also.

If you decide you want something more customized than what they offer, you can ask for a custom design (for a price, of course) and still utilize their site functionality.

Their websites offer some modules that could be useful to a Region, including scheduling and reporting. To utilize the scheduling module, all you need to do is upload your schedule from an excel file. With a few steps, your schedule is available on your website. As for reporting, they have a bunch of stock reports available for whatever kind of data you need, including player stats!

It’s Registration Season. What Should Be On Your Website?

Lots of Regions are in the thick of registration right now. Parents will be out there looking for places to sign their kids up for soccer. How do you make sure they sign up with your Region?

1. Make sure your homepage is up to date. Make sure that vital information such a registration times, dates and places are visible or somewhere that they can easily be located. These dates are the first thing parents are looking for when they go to your Region website right now.
    
2. Put together an FAQ for Registration. Parents will have questions about registration – what ages can you register your child at? How many registrations are left? I missed a registration, how can I still register? These are all questions that are common during registration, and if you have an FAQ page next to the registration information that contains these types of questions, you will eliminate the need for parents to physically call or email the Region. Don’t know which questions to put on the FAQ page? Ask the Regional Commissioner or the Registrar for your Region (or whoever fields those calls/emails).
    

Shorten Your Page Content with Pop-Overs!

Content-heavy web pages can get really long, really fast. There are some ways you can embed small web pages into your website (or hints/tips for pieces of content) with jQuery.

Pop-over windows are an easy way for people to quickly get more information about anything on your webpage, without them leaving the page. We use them on AYSO.org to show video content, or give a little extra information on a “Learn More” link. These pop-over windows are called a lightbox, and there are many different versions of code out there to use. AYSO’s National Office uses the lightbox called Fancybox. It works with images (for an image gallery), inline text, iFrames, Flash files, Google Maps and YouTube. It has been tested on every browser too, so you know it works. You can view demos of Fancybox and download the code here.

Make Your Website the Right Way…and Keep People Coming Back!

People depend on the web today for a fast, simple way to access the most current information on any topic. If a site is designed poorly, or doesn’t contain good information, people will stop coming and you’ll lose your audience. Audience is very important in AYSO because if we lose parents, we lose players. Here are some points to keep in mind when working on your website to ensure that it’s the best it can be:

KISS – Keep It Simple Stupid

This is a mantra used throughout user design. No matter how simple YOU think it is, there are people out there who won’t think it’s so easy to use. Test your designs before implementing them by choosing a few (non-tech) people to test it out. Gather their feedback and design it to fit their needs and not yours. Here are some ways to keep it simple:

• Create a clear visual hierarchy on each page
• Take advantage of conventions
• Break pages into clearly defined areas
• Make links obvious
• Minimize distracting elements
• Use common sense

Keep It Focused and Purposeful

Users have a reason to visit a website and it’s usually to find specific information. Anything that gets in the way of that purpose is counterproductive. Eliminate “landing pages”, including introductory animations/slideshows. People don’t want to sit and wait for something to load just to click through it anyway. Let them get in, get their information and get out. Keep your content up to date. Parents will not continue to visit a website to read the same information as their last visit. That doesn’t help the parents stay informed. Know the purpose of your website and don’t stray away from it.

Toggle Your Content in a Snap!

A common conundrum for web designers is how to make a lot of content easily accessible for their viewing audience. It’s difficult to navigate through a really long page with a bunch of jump links.

Here’s a clean and easy way to neatly organize your content so that it’s easy to navigate. We use the toggle method throughout the AYSO National website. If you’ve ever looked at one of the FAQ pages or the new Section Meeting microsite, I’m sure you’ve seen it!

jQuery Toggle Method

Let's use a FAQ example. You have a question with an associated answer. We only want to show the answer when you click on the question. With this method, clicking a second time on the question will hide the answer.

QUESTION: Where is the soccer field?

ANSWER: Down the street and around the corner.

Help Keep Your Region Safe

As your Region’s webmaster, you can help your Region’s families and volunteers stay safe by passing on some Wi-Fi best practices.

Free Wi-Fi is very easy to find these days – plenty of coffee shops, restaurants and other businesses now offer it for free to their customers. While Wi-Fi definitely helps make life easier, remind your parents and volunteers to use it properly.

Typically, free public Wi-Fi is hosted on unsecure wireless networks, leaving them vulnerable to outsiders and possible hackers. Because of this, it’s best not to log-in to any personal, password-protected sites while using unsecured Wi-Fi.

If your Region uses Wi-Fi at your registration events, use a secure network so it protects parents and volunteers. Secure networks ask for passwords before allowing users to connect.

Additionally, secure websites such as eAYSO (https://www.eayso.org) should always have "https" in front of the website address, as opposed to "http." This provides an additional layer of security that both autheticates the site and encrypts information exchanged between that site and a local computer. Be careful that the spelling of the https website name is correct.

For more information, check out this article on using Wi-Fi safely.

The Importance of Good Website Navigation

Website users, especially busy soccer parents, don’t usually have the time to sit and search all over a website to find what they are looking for. You can help keep your visitors on your website with clean, concise and organized site navigation.

There are two common spots for website navigation: the top of the website (horizontally across) or the left side (in a vertical list). These are the two places that most people will look for a list of links to navigate your website. Some websites will also offer a complete list of links at the bottom of each page. People are trained to go there for links as well (but usually as a last resort).

When designing navigation for your website, keep in mind the “Three Click Rule.” A user will click on an average of three links before they leave the website. Try not to bury your links so deep that you have to click more than three times to get to them. You want to get your user to the content they desire as quickly as possible. Note that long lists of links are just as cumbersome as hiding them ten layers deep. Organization is key when creating site navigation.

What Does Your Title Tag Say?

 
A title tag (circled above) is the text that appears at the top of your internet browser, and it is often used when your page is shared on Facebook or Twitter. 

Taking full advantage of the title tag is a great way to improve the SEO for your Region’s website – be sure to include all the important words that not only define your page, but things you think parents/families might be looking for.

We have a class of RCs coming to attend RC Training at the AYSO National Office in the next few weeks. To prepare, I looked up these Region Facebook pages, Twitter feeds and Region websites. I was surprised to find that a couple of the Regions didn’t show up in the results when I Googled “AYSO Region XX.” If they had taken full advantage of the title tags, this wouldn’t have happened.

3 Must-Haves for Every Region Website

Region websites are an invaluable tool for communicating with your community, parents and volunteers. It's likely the information hub for your Region - so it's important to include all the important information you want your members and families to know.

Here are three things that should be on every Region website:

1. Contact Information
This information should be included prominently on your Region's homepage. Whether it's a contact form,  email address or a phone number, make sure it's posted somewhere that visitors can easily spot. Questions arise regularly, and if they are not answered on the website, the parents will want someone to contact. Parents can get frustrated if this information is not readily available on the website.