No More Soccer.org

If your Region website still has links to Soccer.org, it’s time to fix them! Soccer.org no longer redirects to AYSO’s national website. It now sends visitors to a children’s soccer destination site.

All URLs should direct to www.AYSO.org

Happy Holidays!

Make Your Website Pretty (and Consistent) with CSS Classes

A class is a line of code you add to an HTML element, giving it a specific look depending on what is defined in a style sheet.

Classes can be a more difficult concept to understand, but they can make your life so much easier when it comes to styling a webpage. They can give your page a consistent look without much work at all. Here’s how they work:

Let’s say you want a blue border around certain elements, but you don’t want to program it each time you make a new element. That’s where a class comes in. Classes can be applied to any element, such as a div or a paragraph tag, a link or an image. Let’s start with the style.

In the internal or linked style sheet (note: this DOES NOT work with inline style), we’ll create a class called makemeblue. All class names are preceded by a period in CSS.

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.

Steal Our Graphics…it’s Okay!

A lot of Regions like the graphics we have on AYSO.org and have asked or requested to use them on their Region websites. Yes, it’s okay for you to use our graphics on your Region website, social media pages, etc. However, we don’t need to re-create them for you. Here’s an easy way to take a graphic/image off AYSO.org and place it on your website.

1. Find the graphic you like and right click on it.
   
2. You now have two options – you can save the image, or link to it.
   1. To save the image, select the “Save Image As” option (or an option similar to it. I’m using Firefox for this demo and all browsers have different but similar options)
   2. To link to it, select the
      1. “View Image Info” option. A window will pop-up with the complete URL for the image. Copy this url.
      2. “View Image” option. It will open the image in either the same window or a new window. Copy the URL out of the address bar in the browser.
      3. “Copy Image Location” option. This does all of the work for you and will copy the URL.
         

The Value of Facebook Insights

For those of you with Region Facebook pages, are you keeping up with your Facebook Insights?

Facebook Insights is a handy tool available for all business pages. By checking your Insights – which are basically the metrics of your Facebook page – you can find out how your posts are engaging with your Facebook audience, where your Facebook fans live, what language they speak and much more.

Above is a shot of Insights for AYSO’s National Facebook page, under the “Likes” tab. You’ll see that the highest segment of our Facebook fans is women age 33-44. With this knowledge, I know that every now and then, I should craft a post tailored to this audience. This helps me achieve high engagement and in turn, more Facebook fans.

Here are some things to consider for your Region:

Widgets Everywhere!

Widgets are becoming more and more popular as a means to import information from other sites and display it on your own. Most of them are fairly simple to add to your website (usually a JavaScript or an iFrame) and they can give your website added value and help increase traffic. Did I mention most of them are FREE?

Some popular uses of widgets include:

Facebook Widget
These widgets let you add a small feed of your Facebook timeline to your website. It helps to let people know that you also have a presence on Facebook and that your Region’s volunteers and parents are engaging there as well. The Facebook Activity widget can be found here.

Twitter Widget
Similar to the Facebook widget, this app allows you to display your Twitter feed on your website. It will let people see some of your tweets and prompts them to connect with you on Twitter for more info. Here’s a popular Twitter widget you can add to your homepage.

So, What's a Style Sheet?

Back when the web first started, there were tags like <font> and <u> that were used for formatting text. In 1996, CSS1 came out and slowly started to replace the old formatting tags. Now, many browsers have stopped support for these tags, making CSS the standard in the web design world.

Once you get used to the formatting, CSS is very simple to use. There are three ways to use CSS

• in a linked style sheet (external)
• a <style> tag placed in the header of a page (internal)
• an inline tag placed directly on the element it’s affecting.

Linked Style Sheets

The linked style sheet is created in the same format as the <style> tag in the header of the page, only it’s an external .css file that is pulled into the HTML page. You can load an external CSS file with the following line of text:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

How to Make Your Online Community a Safe Haven

Did you know Safe Haven has an Online and Social Media Policy? It covers everything from Facebook and Twitter use to email communication. Here are two important highlights from the policy:

Never post team rosters with names, jersey numbers and/or contact info. While some families may think this is useful, it is very dangerous to have this information posted in a public place (Region website, social media page). If that information lands in the wrong hands, they will have access to important details about minor children – allowing them to attempt to contact that child if they so choose.

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.

Is Your Region Website Searchable?

When a family decides it’s time for their kid(s) to play sports, some parents are familiar with AYSO and are out there actively searching for your Region on the web. But, there are plenty of other parents that aren’t acquainted with AYSO – and may not be sure that there is any local soccer program in their area.

This is why it’s important to be sure that your Region website is “searchable” or in other words, uses positive SEO (Search Engine Optimization) practices. For those of you not familiar, here’s a handy SEO beginners guide.

In a nutshell, focusing on improving SEO will ensure that your Region website ranks highly in Google search results – making it easy to find for those unfamiliar parents I mentioned. Here’s a quick trick to find out where you stand: Google “youth soccer (your city name here)” and see if your website appears on the first page of results. Yes? That‘s a good start. No? We’ve got some work to do!

Basic HTML

As the Manager of Digital Media for AYSO, I work with HTML on a daily basis, so it comes very second nature to me. I know this is not the case with the majority of the world, which I often realize by the strange looks people give me when I start talking “code.” Therefore, I thought it would be beneficial to a lot of you if I did an entry on basic HTML.

Whether you know it or not, you probably come into contact with it at some point while editing/updating your Region’s website. It can sometimes look like a foreign language, so it’s important to know what’s what. Here are some common tags you might come across while editing your website.

A quick note before we start: Most tags have two parts: the opening part and the closing part. The opening part starts a certain element style. Everything that comes after the opening tag will contain that style. The closing part comes at the end of the element and stops that particular style from appearing. Note the paragraph example below and how the <p> opens the style and the </p> closes the style. A slash before the letter indicates a closing tag.

Interactive Slideshows For Your Homepage

jQuery offers some neat effects that are easy to integrate into your website. All the user needs is JavaScript enabled in their browser to view the slideshows. It’s a clean way to present items such as upcoming tournaments, important news or announcements. Research shows that people gravitate towards images and visual representations of announcements – which makes a slideshow a great addition to any Region website

Here is a link to SLIDEJS, a simple one to use. They have multiple options for the slideshow, including text versions, image versions and a version with thumbnails. You can even change the transitions from a slide to fade.

The code is as simple as shown below:

AYSO Social Media Webinar Tonight

For the webmasters out there that also handle your Regions' social media initiatives, I’m presenting a webinar tonight that may have some valuable information for you.

Social Media 101: Using Facebook and Twitter to Increase Registration is a webinar focused on how to take advantage of these social media tools and all of the features they offer. I’ll go in depth with Facebook especially, explaining how to use/analyze Facebook Insights (metrics), how to properly adjust your admin and moderator settings and much more.
 
The webinar is tonight, 6:00 p.m. - 7:00 p.m., PT.

I hope you can join me! Learn more about the webinar and register here.

How to Add Margins and Padding to Your Content

Adding extra spacing around a paragraph or an image can make your content more aesthetically pleasing and easier to read. You can do this by changing the margins or the padding on a specific object. When you’re creating a paragraph, think of it as text inside a giant rectangle. With no padding and no margins, the text will be flush on the edge of the rectangle. See below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.

CODE: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.</p>

Note: the black border is just for example and is “invisible” in the code above.

HOW TO ADD PADDING

Padding adds space INSIDE the border of the rectangle. Let’s add a padding of 15 pixels to give the text some nice breathing room.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.

CODE: <p style="padding: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.</p>

This will add padding to all four sides of the object. Margins work exactly the same way, except they add space on the OUTSIDE of the box.

Facebook Time-Saver: How to Schedule Your Posts

A lot of webmasters also act as the admin for their Region’s Facebook page. If this includes you, here’s an easy time-saving tip that will make your job a little bit easier: Schedule your Facebook posts ahead of time.

Facebook recently added this useful feature this summer – and it’s easy to use. When posting a status update, photo or video, you’ll see a small clock-shaped button in the bottom left corner, as seen here:

The AYSO News Widget

We recently debuted a news widget for use on AYSO Region websites. It’s fairly simple to use and comes in three different sizes to complement a variety of website layouts.

The widget is programmed in JavaScript, but doesn’t need to be placed in the page’s header tag. Simply copy the JavaScript tag and place it wherever you want it to show up on your website. If you want to have text wrap around the widget, you can place it in a DIV tag and float it in the text. Below is an example of how you would do that:

Code: <div style=”float: right;”><script type="text/javascript" src="http://marketing.ayso.org/js/aysonewswidget200.js"></script></div>

The DIV tag defines a division or a section in an HTML document and is used to group element, and then formats them with CSS.

To add the news widget to your website, visit the Region Toolkit.

For more information about how a DIV tag works, visit the W3C Schools website. They have great information on all things HTML/CSS.

Floating Images with Inline Styles

There is a wide range of webmasters in AYSO and I want to get a feel for what we have out there. I know we have quite a few of our websites on the Clubspaces platform. Do you prefer to use the design view or the HTML view when editing pages? Sometimes it’s easier to edit the page in HTML mode to get things to look exactly the way you want - the design view can be a little tricky to format things specifically. 

Styles are one way you can format your text and images. Most styles should go in the header of the HTML page. However, if you have a Clubspaces site, you don't have access to the page headers, so we use what are called inline styles. Inline means that the style is applied directly to the element instead of in a separate location. Here's one way to format your page with styles (CSS) to get a nice format:

FLOATING IMAGES

Say you have an image and you want your text to wrap around the image; similar to a magazine or newspaper style. You could use a table to format it, but it's not always precise and can get messy. Styles can make this work very easily with just a few simple words.

Here is a basic image tag:  <img src="myimage.jpg">

To float this image, you would add the BOLDED RED text to the tag above:

<img src="myimage.jpg" style="float: right;">

Welcome to AYSO's New Blog for Webmasters

Hello everyone! 

We are so excited to be launching this brand new blog for AYSO’s webmasters. From updating Region websites to running AYSO social media – webmasters are such an important component of an AYSO Region. We hope that this blog will be a place for you to learn new things, connect with fellow webmasters and discover ways to make social media work for you and your Region.

Time for personal introductions – my name is Aliya Hassan. I’m the Senior Editor of Marketing Communications here at the AYSO National Office. My position encompasses several different things, but here are the highlights: I create, edit and send AYSO’s newsletters (there’s a lot – see them all here!), I handle all of AYSO’s social media initiatives (Facebook, Twitter, Youtube, Pinterest, LinkedIn, Instagram and more), I write, edit and post content on AYSO.org and I manage the Google Analytics for the national site with a focus on improving SEO (search engine optimization).

In a nutshell – I’ll be your go-to person for anything social media and SEO related, and that’s what the majority of my postings will center around.

Your feedback is important to us, so please do leave comments if there’s anything you’d like to share! And if you’d like to stay connected with this blog and our future posts, there’s a subscribe link at the bottom.

Welcome Webmasters!

Hi all of you AYSO webmasters out there! My name is Jen and I will be here to help you with everything and anything web related! I am the Manager of Digital Media and Graphic Design at the AYSO National Office and have been working on websites since 1997, so I have been through most of the trends of the web, and can help with just about anything related to your websites.

We'll have a wide variety of information in this blog, from simple HTML and how to place an image on your website, to advanced things like fun and interactive modules you can put on your website. We'll help you get your websites found on search engines, as well as help you make sure all of your Region's most important information is listed on your website.

We chose to go with a blog over a newsletter to help encourage a community atmosphere. Feel free to comment, ask questions or answer other people's questions. I will help with as many questions as I can, but others are encourage to put in their two cents. After all, the web is nothing but a giant collaborative effort, right?

Here's a little bit of background on me before I start posting away. That way you can see what my professional background is and where my strengths lie.