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)

Codecademy and Learning how to build websites.

In the last couple of years a wealth of web building software has arrived on the market that allows even the most technically challenged to build a pretty sophisticated website. Software like WordPress is even used by professionals to achieve pretty remarkable and sophisticated websites, sometimes though, a person will want more control they will want to start to lean how to actually code.

Years ago, short of going back to school this was a option that was not realistic to the average novice. These days however the game has changed. http://www.codecademy.com/ is a internet learning tool that will guide you step by step through the process of learning how to code almost every major web based language currently in use. I myself have used it to enhance and build upon the skills I already have.  The lessons are easy to follow, dynamic, and well constructed. Best of all they are free!

If you are a up-and-coming web developer and are looking to expand your skills so you can lean how to build your own sites from scratch I recommend this tool wholeheartedly.

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!

CSS Button Generator

Building a website can be a time consuming and stressful task. one of the hardest aspects of design for many people is assets. Something as simple as a button can be a hassle when you don't know where to get the assets to design and eventually code your own. This being the internet some industrious individual has come along and given us a simple CSS Button Generator.

CSS Button Generator will create beautiful  simple CSS buttons for you to use on your web pages without the need for any images. These time saving tricks and tools can turn what was once an arduous task into a painless procedure. remember; work hard, but work smart.

Happy coding.

Do's and Dont's of HTML Email Blasts.

Hey everyone, after a week off we are back with more helpful hints.

With the proliferation of email-blast software and websites all over the internet, its becoming increasingly popular for people to turn to these avenues in order to drive sign ups, direct to seasonal events, and really reach out and impress where a regular email would fall short.

One of the best aspects of these sites is their ability to let you craft a beautiful email-blast whether you have skills in HTML or not. Many people though can sometimes be a little to ambitious when diving into the HTML editors as they tend to carry their skill sets in designing websites into crafting their email blasts and they can be frustrated when the results do not match their efforts

Email clients such as Hotmail, Yahoo, Outlook, Gmail, etc., can render your emails in different ways. What looks one way in Yahoo or Outlook 2003 may appear very different in Gmail or Entourage.
The root of this problem is the variance among email clients in the level of support for CSS (Cascading Style Sheets).

There is no real standard for what an email client should support and how it should go about supporting it. Every email client takes its own approach to rendering HTML and CSS – which is why an email that looks fine in one email client can look different in another.

So how can you or your designer ensure an email design remains consistent and looks great across all these different email clients? Here's a helpful list of "Do's and Dont's" on email blasts and HTML.

Hop on the “Mobile Friendly” Bandwagon

Many people are short on time these days and tend to do their websurfing on their phones or tablets. You want to make sure that your site looks good and is easily accessible on a mobile phone or tablet, especially with the thousands of young parents in AYSO.

You can easily make a separate style sheet that is mobile friendly for your Region website. This style sheet would reduce the use of images and adjust the width to that of whatever device the user is using to surf your site. If this is the route you’d like to take with your website, you can view a full list of tips here.

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.

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.

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

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;">