Building a Lean, Mean, Quick, Web Machine!

Building a website can be a time consuming process. If you use the wrong kind of assets in building your site, it will become a exercise in patience and anger management. Here is a few simple tips to keep that site light on its feet, easy to build, troubleshoot, and maintain.


Small pages = Fast pages

The art of building a site that loads quickly and is quick to transition is a tricky one. no matter a persons connection speed there is always content to download. How frustrating is it when you go to a page you want to view only to have to wait sometimes, what seems like forever, for content to load. We have all been there. (modem era anyone?) Do your viewers a favor, keep those pages small no more than a couple hundred kb. (yes you can still have images and content and keep it that small)

Favicons are Fun!

Have you ever noticed the cool little icon in the browser bar when you visit a website? Those are called favicons and they show up when browsing a website or adding the site as a bookmark in your browser. They give a website a more legitimate and secure feeling, as well as adding a small branding element to the website.

Any website can have a favicon and they're pretty simple to create. You don't even need editing software to create one! There are bunches of websites out there that will generate the file for you. All you need to do is upload an image.

Favicons are images that are created with an .ico file extension. You place this file in the root of your website, add some small code and it will show up in the browser.

Increase Facebook Engagement with Images

The Webmaster Info Spot has been on a roll lately with informative posts on using/editing photos. To cap off the unofficial series, I wanted to share this good-to-know tidbit of Facebook advice:

Posts with images will receive higher engagement than posts without.

AllFacebook.com did some research, and they discovered that “images have been the No.1 driver of engagement on a page since timeline launched.” That means that images beat out links, videos and text-only status updates for the top spot. And this means that images catch the eye of your Facebook fans more than anything else.

“Posts including a photo album or a picture can generate two times more engagement than other post types,” reports AllFacebook.com

SUPER Simple Photo Editing

For the more experienced Webmaster, you probably have a photo editing tool/software that you know and love. For those on the more inexperienced side, like myself, (I try to stick to writing, editing and social media), we need a simple, easy-to-use photo editor that can get the basic things done quickly.

If I ever need to quickly edit a photo for a Facebook post, inclusion in an e-newsletter, etc., I usually hop on

Make Your Site Say AYSO!

Branding is important in AYSO so that parents know it’s a large, nationwide organization. We have a great selection of branding items available in the Region Toolkit on AYSO.org. Anything you can add to your site that will help it look professional and maintain AYSO branding, will make parents feel that they have chosen a quality soccer organization for their children.

Logo Usage
It’s a good idea to use the National AYSO logo as much as you can in conjunction with your Region logo. We have a logo frame that has been created to help with this venture. It is simple to download and add your Region logo. It helps parents and families see that your local Region is part of a larger national organization that is committed to youth soccer across the country. The logo frame can be found in the Region Toolkit under the AYSO Logo section.

AYSO Colors
It’s also important that the colors used on your website are the correct AYSO colors, and not an offshoot of those colors. You want to make sure that the red and the blue match the colors in the AYSO traditional logo to maintain consistency throughout your website. Below are the color codes that can be used for the AYSO red and AYSO blue:

	AYSO RED	AYSO BLUE
HEX CODE	#EF3E33	#034EA2
RGB CODE	rgb(239, 62, 51)	rgb(3, 78, 162)

Tips for Creating HTML Emails

As the webmaster for your Region, there is a likelihood that you’ll be asked to create HTML emails to be sent to the parents. HTML emails can be tricky because they don’t always display the same in every email client (similar to how an HTML page can display differently in different browers).

Here are some things to keep in mind when creating an HTML email:

Layout with Tables
Your email should be programmed in a table layout to make sure that everything displays the way it should. DIVs are not recommended because of the limits that certain email clients put on the use of style sheets.

Use Inline Styles Style sheets placed in the headers of an HTML email don’t always work, since some email clients (mainly Gmail) limit the types of style sheets accepted. DO NOT use an external style sheet. It won’t work. The best way to use styles is inline in the HTML. Stick with simpler styles, as some email clients are very restrictive. CSS Support: The Ultimate Guide is a good reference of which CSS styles will work with various email clients.

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.
         

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.