Archive for the ‘Web and Graphic Design’ Category

JQuery Plugin: Hide And Show “N” List Items

My previous post was on using JQuery to hide and show part of a list. The javascript was simple and clean, but it was also a little hacky, because it required a hard-coded height to collapse your lists to. I felt it would be a little more appropriate to go further in depth and actually take a parameter for the number of list items you want to show by default. Notice in my sidebar, I automatically hide list items in my categories and popular post lists. I used the first version with a hard-coded height, to handle those. Here’s a really simple plugin that takes an optional number of list items to show, on page load, collapses lists to that number, and appends a link to toggle the list display.

Here’s an example of how it looks after you’ve applied it to multiple lists. You can apply it to both ordered and unordered lists. You can apply a different collapse number to individual lists, or the same number to them all. You can also change the text of the toggle link. As you can see below, there are two completely different implementations, using default settings on the left, and custom settings on the right.

  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7
  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7

To implement the JQuery plugin, just bind the collapseList function to any ordered or unordered list. To stick with the default settings, use the first line of code in a document ready function. To customize the collapse number, and the toggle link text, use the second example.

$('ul.collapse').collapseList();
$('ul.collapse').collapseList({
	'collapseNum' : 4,
	'moreLinkText' : 'custom show text',
	'lessLinkText' : 'custom hide text'
});

Now to the goodies. Download the plugin! Here are links to both the unminimified and minified versions.

Download Full (1.39KB)Download Minified (790B)

This plugin has been tested in the following browsers:

Chrome Firefox Internet Explorer Safari Opera

I’m thinking a more robust version 2 could be in the works, but I don’t know what kind of customization would be needed. There are a lot of possibilities, and I’m just trying to decide what would help more. Feel free to put in requests so I can start working on putting something out.

JQuery: Hiding And Showing Part Of A List

I’ve encountered many situations where I don’t have quite enough space to show all the items in a list, but I still want them to be available. The best example I can give of that is actually in my sidebar to the right! You’ll notice my popular posts and blog categories show less than half of the full list. I definitely wanted it to be easy to access all the categories and my most popular posts, so I didn’t want to have to limit the list. I also didn’t want to make my sidebar overwhelmingly long, causing my skyscraper ad to get pushed to the bottom of the page and below the main content entirely. The best solution was to use JQuery to automatically hide some of the list items, and then toggle them on hover.

This tutorial is a little bit different, but not by much. Instead of using the hover, we’ll actually use a link that needs to be clicked. The hover introduces an extra layer because you have to handle the hover on the list and the hover on the "view more" text added underneath. With a link, you can avoid that extra layer. Here’s an example of what we are making:

  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7
  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7

And more importantly, here’s how it works. First you’ve got to start with some HTML, a list in particular, either ordered or unordered. It is important to have the full list show by default without javascript. We’ll make sure that only if a user has javascript enabled on their browser will we hide any list items (because they wouldn’t be able to show them without javascript).

The HTML:

<ul class="collapse">
     <li>item number 1</li>
     <li>item number 2</li>
     <li>item number 3</li>
     <li>item number 4</li>
     <li>item number 5</li>
     <li>item number 6</li>
     <li>item number 7</li>
     <li>item number 8</li>
     <li>item number 9</li>
     <li>item number 10</li>
</ul>

Next, we move on to the javascript. Just to clarify for anyone that missed the post title, this requires the JQuery library, so make sure to include that! After that, this code is really quite simple actually. The first thing we’ll do is add a wrapper div which we’ll be using to manipulate the visible height of the list. Then, when the document has finished loading, we’ll immediately collapse the list to the desired height (in this case 45px), and add a link to show the hidden items. By using this method, we’ve made sure that the list is still accessible to those without javascript.

After that, we’ll write a function to get run on the click event of that link we inserted. It’ll check, if the link has the class “expanded”, then collapse the list to the given height, change the link text, and remove the “expanded” class. Otherwise, the list will get expanded to its full height, the link text will be changed, and the “expanded” class will be added.

The Javascript:

$(document).ready(function () {
	$('ul.collapse').wrap('<div class="collapseWrapper" />');
	$('div.collapseWrapper').css({ 'height' : '45px' }).after('<a href="#" class="collapseMore">view details . . .</a>');
	
	$('a.collapseMore').click(function () {
		if ($(this).hasClass('expanded')) {
			$(this).prev().animate({ height: '45px' }, 500);
			$(this).text('view details . . .').removeClass('expanded');
		}
		else {
			$(this).prev().animate({ height: $(this).prev().find( 'ul.collapse' ).outerHeight(true) }, 500);
			$(this).text('hide details . . .').addClass('expanded');
		}
		return false;
	});
});

And finally, you’ll need some CSS to define the wrapper div, and basic styling of the list and link.

The CSS:

ul.collapse{  }
ul.collapse li {  }
div.collapseWrapper { overflow: hidden; }
a.collapseMore {  }
a.collapseMore:hover {  }

It really isn’t that bad is it? Now if you want to expand on this, you can. I actually wrote a JQuery plugin to collapse lists to a given number of list items because I felt the hard-coded height was a little bit hacky. It is free, and very easy to implement with just a single line of code! Questions and comments are welcome.

Making A Website From Start To Finish – Part 3

In Part 1 and Part 2 of this tutorial of how to make a website from start to finish, I talked mostly about the preparation before you begin the development and publishing process of the website. Now, in Part 3, I’ll talk about the actual coding and development of the site, the publishing process, and then how to test and improve your site once you’ve finished it. Here’s a list of each item we’ll talk about:

  • Database Design and Creation
  • Site Development
  • Cross Browser Testing
  • Installing Analytics
  • Publishing Your Website
  • A/B Testing, Data Analysis, and Site Optimization

As in Parts 1 and 2 of this tutorial, I’ll use our fake restaurant website as an example for each item in the list.

1. Database Design and Creation: Before you go ahead and build your website, you should determine if you need a database to store any information for display or interaction purposes. If you are using WordPress, then there are tons of plugins that can help with this. If you aren’t using WordPress, then you should build out your table structure, determine the foreign key relationships between tables, build them, and insert at least some test data before you begin your site development. I’m not a database expert, so I won’t go on to describe the details of this step, that’s up to you, I’m just saying you should handle it before you start developing.

For our restaurant website, we can go in one of two directions. We can have hardcoded menus, or, we can use a database to power the menus. If menu items are consistent in structure (if individual items all follow the same pattern of a name, description, and price for example), then I’d opt for a database. I’d set up a table of menu items and menu categories (such as appetizers, salads, desserts, etc.), and possibly seasons since we talked about the menu changing seasonally before. Then I’d handle the foreign key constraints from the categories and seasons tables into the menu items table so that each menu item has a name, description, price, availability (boolean flag so we don’t have to delete items), category foreign key, and season foreign key. I’d handle the interface for editing these database tables later.

2. Site Development: Now that you’ve got your designs, content, database (if needed), and CMS (if needed), you’ve got all the tools to complete your site development. Here’s how I’d recommend going about the development process:

Step 1. Get your header and footer templates or master file set first. To do this, build out a full single page in static HTML with your CSS in a separate document. Now that you’ve gotten a full single page, you can identify where the content is going to change from page to page, thus allowing you to pull out the parts of HTML that will remain the same on every page. With this knowledge, you can separate out your header and footer files (or master file, depending on what environment you are coding in), leaving you with a single working page that uses template file/s plus and external style sheet.

Step 2. Begin building out your other individual pages. Add more CSS as needed. Add in your content as you encounter each page. Hook in your database if appropriate. Focus primarily on all of the static content (whether it is hard-coded or brought in from the database doesn’t matter), and leave the interaction for later.

Step 3. Finish off your development with javascript. Once you are done developing a bulk of (or all of) your pages, you can add in javascript to improve usability and add fun and interesting effects. Javascript is a basic component to a majority of websites now, and many even rely on it. Javascript, being a client-side language, has the potential of really improving user interaction and bringing your site to the next level.

3. Cross Browser Testing: After you’ve finished development of your site, it is time to test! Depending on the complexity of your site, you could include some other quality assurance in this testing, but for simpler sites, for the most part, cross-browser testing is probably sufficient. Currently, it is important to test in IE, Safari, Firefox, and Chrome. It is also ideal to test those browsers on both a Mac and a PC (except for IE on Mac). Depending on what you expect your user base to be like, you may also want to test on an iPad, iPhone, and Android. Between those three mobile devices, you’ll cover a huge majority of your smaller screen sizes.

For our restaurant site, I’d open up the same page on each browser, and fixing any issues that arise in all browswers before moving on to another page. I’d also go through the navigation in an intentional and systematic way. I find this is the best way to ensure you don’t miss any issues.

4. Installing Analytics: Analytics will help you track how many people see your website, and how effective your website is at accomplishing various goals. I’d recommend Google Analytics, a free analytics tool powered by Google. It is very powerful, incredibly easy to setup, and offers all the tools you need to analyze the effectiveness of your site. Google Analytics, as most other analytics tools, require a small amount of javascript code on every page. Add the code to your template files before you publish so that you’ll be good to go when people start accessing your site.

5. Publishing Your Website: Now that you are sure your website is ready for public view, it is time to upload it! If you are using a CMS (such as WordPress), then publishing is easy. If you aren’t using a CMS, then you need some way of putting your new website files onto your server. I use Filezilla for Mac, an excellent FTP client, but there are a ton of good FTP programs out there. With your setup hosting, you should have received FTP credentials. Add them into your FTP software to access your server, and then drag and drop your files in. That’s it!

6. A/B Testing, Data Analysis, and Site Optimization: After setting up analytics and publishing your site, the job isn’t quite done! Now you’ve got to analyze any data that is coming in, and spend a little time optimizing language to increase various conversions and actions on your site. You might want to verify that certain language is getting across your message or bringing people to a different page. I’ve used various A/B testing services, but currently, I’m hooked on Optimizely. This service is not free, but there are free ones out there.

For our restaurant site, there may not be a ton of A/B testing to do, but I would definitely want to see if users were visiting the site, how much time they were spending on it, what content they mostly wanted to read, etc. You can learn what keywords are bringing users in, which can lead to good marketing tools down the line.

That brings us to the end of this three part tutorial on making an entire website, from start to finish. We talked about the beginning stages of branding, planning, and designing, to the middle stages of development preparation, to the final stages of development, publishing, and analysis. I hope it helps you understand how a website comes together, and all the things that you should consider when working on a project the whole way through. If you have questions or comments, obviously, feel free to share or contact me directly. Best of luck on your website projects!

Making A Website From Start To Finish – Part 2

In Part 2, I’ll go over the initial setup of the development of the website. In particular, because I’m a big supporter of using WordPress for most websites, I’ll go over how to install and setup WordPress on your self-hosted (not hosted by WordPress) website. I’ll also talk about the other preparation needed for your early development stage. Here’s the list of what we’ll talk about:

  • Determining CMS Needs
  • Installing and Setting Up WordPress
  • Building Out Site Content
  • Search Engine Optimization
  • Link Building and Marketing

As in Part 1 of this tutorial, I’ll use our example restaurant website as an example for each item in the list.

1. Determining Your CMS Needs: The first thing you need to do before beginning your development is determine if you are going to use an out-of-the-box content management system for your website. This will be determined a lot by whether you, as an experienced web developer, will be maintaining the site, or if a client with no web experience will be managing it. If the site will include a blog, or regularly changing pages, a strong CMS would be an intelligent move. If the website will be relatively static, not change regularly, and when it does, will be updated by someone with web developing experience, then a CMS might be overkill. Setting up a CMS can also take more time than just building a site from scratch, so don’t just opt for a CMS by default.

For our restaurant website, let’s pretend they update their menu seasonally and they want to post specials online weekly. I think that’s reason enough to set up a CMS so that they don’t need to regularly ask you to update it.

2. Installing and Setting Up WordPress: If you ever work on a website that needs a CMS, I hands down, every single time, will recommend WordPress. It has so much flexibility, but at the same time, has a very usable interface for anyone who tries to use it. So I’ll walk through the steps of installing and setting up WordPress for a self-hosted (non-Wordpress.com) site.

Step 1. Install WordPress! Luckily, WordPress has a great installation walkthrough to help you through this process. It is definitely more complicated than if you use WordPress.com and don’t host your site, but it isn’t that bad at all.

Step 2. Download and install the theme and plugins you want. If you are planning on building a more complex site, start with a basic theme that meets as many needs as you can. You’ll adjust it later. Find the plugins that you’ll want. For a basic WordPress install, I recommend the following plugins: Askimet, All In One SEO Pack, Google XML Sitemaps, Jetpack, and Sociable. Askimet is the best for blocking spam comments, Jetpack is created by the WordPress team and comes with a lot of other built in plugins like stats for your site. The SEO pack, Sitemaps, and Sociable are all great plugins to help with SEO and increasing website traffic. All of these plugins (except for Jetpack) make more sense only if you are including a blog in your website.

Step 3. You’ll also want to delete the original page, post, and comment that by default come with the basic install. I never understood why the install came with this content, but it is best to start with a clean slate.

Step 4. Create a new blog homepage separate site homepage. By default, WordPress sets the blog post listing as the homepage of your site. If you want the blog to be in a subdirectory and you want a different homepage, then you’ll have to create these two pages BEFORE you complete step 5.

Step 5. Setup your site preferences under settings. There are a lot of default settings that you might want to change, so be patient, and go through each settings page in WordPress. Most importantly, if you want a separate homepage and blog homepage, then pay attention to the Reading Settings. Set your front page display to a static page, with the homepage as your newly created homepage, and the posts page as your newly created blog homepage.

Step 6. Adjust your theme as needed. This step really ties in with your real development, so I’ll talk about this more in Part 3 of this tutorial.

For our restaurant website, I would definitely use WordPress. I’d try to find a theme that was intended for restaurants in the first place, but I’d make sure it wasn’t overly complex first. I’d definitely set up a static homepage, and I would leave the blog out of the setup for the site. Just because WordPress is by default a blogging software does not mean you have to use it that way.

3. Building Out Site Content: You can’t have a website without content. I usually leave this item to my clients, but they frequently struggle with this task. It is hard for someone who doesn’t build websites, and doesn’t create marketing materials regularly to build out content for a site they haven’t seen yet. It is often a catch 22 situation for me because my clients struggle to build out the content before they see the fully designed site, and I need the full content before I can finish designing certain pages. For example, I can’t design icons, pick stock photos, or handle content layout very easily without the content itself. This is something you always have to go back and forth on, and the content usually ends up being the last thing changed on the site.

For our example site, I’d make sure that the owners provided their menus ahead of time, along with descriptions of the restaurant, contact information, hours, and any other marketing materials they may have already prepared previously. I’d try to build my designs around this content, but I’d definitely try to build the content into the site as I begin the development process.

4. Search Engine Optimization: SEO is an ongoing process. But you should start thinking about it early. To begin with, I’d register the site on DMOZ, an online website directory. There are other directories, but some of them charge to be listed, while DMOZ is always free. Next, you want to consider some of the plugins I mentioned earlier in this post, but you should also consider SEO for your HTML page structure. The faster the page loads, the better the META information you have in the head of your pages, and the better tagging you use with keywords (good header tags and quality content), the better off your site will be. You can also look into using schema.org which helps search engines display information more appropriately in results. This can help you a lot when users are determining whether they want to visit your site or not.

I’d definitely do all of these things for our restaurant website. I’d register on DMOZ, setup good meta descriptions, keywords, and a quality title for each page, keep the page HTML small, use quality keywords in the content, and place them strategically in header tags, and I’d definitely use the schema.org restaurant schema to help with search engine result displays.

5. Link Building and Marketing: The last thing you should consider before you start your full development process is marketing. You want to get a head start on this process before the website is complete. Getting links to your website out there is vital to showing up in search results. The more sites that link to yours, the better off you’ll be. Now is the time to develop any marketing ideas around your new website that you might want to use for advertisement. Pairing marketing and link building with the launch of your website is a smart idea.

For the restaurant website, I’d definitely consider some sort of website special or coupon to reward customers that came to the restaurant via the website. It will encourage them to revisit the site and the restaurant, which is ultimately what we want. I’d also look for local listings to make sure that the website is included in those listings. If you are worried about the website not being done before those listings are public, you can put up a temporary splash page indicating the website is coming soon. That is a common practice for companies that are getting going, want to build an online presence and market, but don’t have their full product ready yet.

Now that all of the pre-development issues are taken care of, it is time to start your real code development which I’ll go over in the final part of this tutorial series, Part 3. I’ll also touch on site optimization and analytics to track the success of your newly created website.

Making A Website From Start To Finish – Part 1

In Part 1, I’ll go over the initial phase of a website. I toyed with calling it the ideation stage, the design stage, or the setup stage, but in reality, it covered a lot of different issues, and it just wasn’t fair to do that. Here’s what we’ll cover in Part 1:

  • Competitive Analysis
  • Hosting and Domain Name Setup
  • Color Palette Creation
  • Branding (Logos and Icons)
  • Developing a Site Architecture
  • Initial Designs

To discuss these elements, we’ll make up a fake website for example purposes. Let’s say we have a client who runs a restaurant. They have no existing online presence, but recognize the benefits of being online. For each item that we go over in the website creation tutorial, I’ll talk about what that item means for our restaurant website example.

1. Competitive Analysis: Before you do anything for your new website, you should look at other websites, particularly those in the same space as what your future website. Pay attention to what you like about these other websites, and what you don’t like. Do they have features you like? Do they have a confusing site structure? Do you like the color scheme? Do you think their logo is creative? Do they have fun interactive elements that you want? Ask these types of questions to start to identify some of the elements you want to bring into your website.

For our example restaurant website, take a look at websites of some other local restaurants, especially some that you would consider competitors. Look at their branding, site organization, and interaction. Find what you like, and what you don’t like. Then use those elements for parts 3, 4, 5, and 6 below.

2. Hosting and Domain Name Setup: Once you know what domain name you want, it is a good idea to secure it just to make sure it doesn’t get snagged up. Domain names disappear quickly, and if you find something you like, lock it down. Pick a name that is ideally short, easy to spell, includes branding, and ideally includes a word that is important for your business. Pick .com if you are a for-profit, and .org if you are a non-profit – other options are less common so users won’t expect them. You could also consider getting multiple domains and redirecting them to your primary choice. Once you’ve picked your domain name, buy it, and setup hosting (usually you can get a cheap deal working with the same service like Go Daddy, Dream Host, or Host Monster (I’ve used all three for clients before).

For our example restaurant (let’s say it is named Pizza House) we’d want to grab pizzahouse.com. You could also consider pizzahouserestaurant.com because having the word restaurant in the domain name could give you an SEO bonus (though I’d opt for the shorter name myself).

3. Color Palette Creation: Now that you’ve looked at competitor websites and snatched up a domain name, the designing can begin! The first stage of designing? Color Scheming! You can also start with logos as a logo that looks good in color needs to look good in black and white first (so in theory you don’t need a color scheme to work on the logo first). Knowing that those two stages are interchangeable, start with some color palette websites like the Color Scheme Designer which I use regularly.

For our restaurant website, I’d want two bright colors (probably red for the pizza association) plus some basic colors like a dark brown and beige for the basics.

4. Branding (Logos and Icons): As mentioned above, you can work on the logo before you have your color scheme, they can work hand-in-hand for sure. Building out your logo is one of the hardest things to do. You need something that is diverse. It will work for a website, but can also ideally be used in print materials and as icons. Outside of the associations you are hoping for your logo to create for your users, a good logo has keeps three things in mind. First, it should work in both black and white as well as color. Logos end up being used in lots of locations, so it needs to be able to be diverse. Second, it is beneficial if it can be kept in a rectangular area. The more obscurely shaped your logo becomes, the harder it is to work it onto things like business cards. Lastly, if your logo can be reduced to a square icon, like the Facebook f, you’ll thank yourself later. You’ll need a few different icons for your website (specifically a favicon for browswers and webclip icons for mobile devices). Once you’ve got your logo and icons down, you are ready to start on initial website designs.

For the restaurant website, we could do an abstracted pizza pie, missing a piece, overlapping with the P in PizzaHouse. That shape, plus a PH would make a great icon, and it isn’t dependent on color to get across the basic concept quickly.

5. Developing a Site Architecture: You’ve got to figure out what kind of information your website is going to have, what pages will contain what information, and how those pages relate to each other. Site architecture has a lot to do with usability, because a user needs to know how to find the specific information they are looking for quickly. Think of a website like a series of folders where you keep your computer documents. Folders can contain file and other folders. In reality, website are actually built with a folder/file structure exactly like we are talking about. Each time you see a forward slash (/) in a web address, it signifies you’ve entered a new folder. This provides context for where the user is in your website and what the information they are accessing pertains to. Luckily, for simple websites, site architecture can be very simple.

For our restaurant website, which is very small, our site architecture will be simple. We could go for a simple homepage that is mostly branding and quick information about the restaurant, with large navigation links to the sub information. Let’s say the restaurant has been around for over 70 years, passed down through a particular family, you’ll want that information on an about page. You can probably avoid a contact page by putting phone, address, and operation hours on the homepage and in the footer. The most important thing is probably the menu, so make sure that the menu is easily accessible, and simple to read by possibly breaking it out into multiple pages. Some of those decisions will most likely be influenced by your competitive analysis from item 1 above.

6. Initial Designs: The last thing in this stage of creating a website is to actually build out your designs/mock-ups. You’ve got a color scheme, a logo, and a site structure. You can design your header, footer, and navigation with that information. Then you can work on your central content area with a few different page mock-ups, specifically your homepage and at least one main content page. With that, you’ll be ready to start setting up and building your website which I’ll begin to discuss in Part 2 of this tutorial!

Making A Website From Start To Finish – Introduction

I’m a self-taught web designer. I have learned almost exclusively from online tutorials, like the ones that I’ve written in the past. When there is a question I have, I Google it. There is a lot I was forced to learn from various projects I was working on, and a lot I chose to learn through my own inquisitive nature. But the one thing that I was never able to read about, was how it all came together. I never really had a good place to go to that helped me figure out if I had covered all my bases for an individual website project. I figured it might be helpful to write up a blog post (or multiple, because this is just way too long for one post) that explained the process of making a website from start to finish. At the end of this series, I’ve made a downloadable checklist to help ensure that for each website project you are working on, you’ve handled each item that needs to get done.

In Part 1, I’ll go over the initial phase of a website. I toyed with calling it ideation stage, the design stage, or the setup stage, but in reality, it covered a lot of different issues, and it just wasn’t fair to do that. Here’s what we’ll cover in Part 1:

  • Competitive Analysis
  • Hosting and Domain Name Setup
  • Color Palette Creation
  • Branding (Logos and Icons)
  • Developing a Site Architecture
  • Initial Designs

In Part 2, I’ll go over the initial setup of the development of the website. In particular, because I’m a big supporter of using WordPress for most websites, I’ll go over how to install and setup WordPress on your non WordPress.com hosted website. Here’s the list:

  • Determining CMS Needs
  • Installing and Setting Up WordPress
  • Building Out Site Content
  • Search Engine Optimization
  • Link Building and Marketing

In Part 3, I’ll go over the actual development of the website and optimization of the website. Yes, that is a two parter! You can’t just make the website, you’ve got to follow up and make sure that what you made is working effectively.

  • Database Design and Creation
  • Site Development
  • Cross Browser Testing
  • Publishing Your Website
  • Installing Analytics
  • A/B Testing, Data Analysis, and Site Optimization

Some of those items have quite a bit of sub items, while others are very simple in nature. Head on over to Part 1 of making a website from start to finish to learn about the initial stages.

Mobile Friendly Design

To make a successful website, user experience is vital, otherwise users feel alienated. By offering what users need, without getting in their way, they’ll be much more likely to return – a key metric in determining website usability. As technology advances at an ever increasing rate, the internet must adapt to that technology (and visa versa). Depending on what type of website you are working on, you should expect anywhere between 5 and 25 percent of your traffic to access it on a mobile platform. It is important to keep in mind what “mobile” is typically used to describe. Tablets are lumped into the mobile category, which I personally think is a mistake. Tablets have one thing in common with phones – they use touch. However, the more important factor in my opinion is screen size. The difficulty that arises in using a fully functional, non-mobile website on a small screen is accuracy. It is difficult to accurately enter fields (like email addresses or passwords) and just as hard to click on incredibly small links. For this reason, it is vital to put effort into a mobile friendly website (mostly for phones, but a little for tablets).

There are some easy steps you can use to do this, and here are a few to put you on track:

1. Add in the appropriate meta tag. It is helpful to tell devices how to render your website. Start with a viewport tag to tell a mobile device how to orient a page when it’s loaded. It also determines if a page can be scaled larger or smaller and if it should rotate as the user rotates their mobile device.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

2. Make bookmark branding work to your advantage. If you want users to be able to add bookmarks to your website on their iOS device homescreens, you need to make yet another favicon. Remember the favicon? The favicon handles what browsers show in their address bar and bookmarks folder. Then, there is the alternative webclip icon, which Apple uses when someone bookmarks a website on their homescreen. The default if you don’t define the image is a screenshot, which is never a good idea. The solution? Make a 129×129 pixel image that you want to represent your website. Think of it as a larger favicon. You can tell iOS devices to use your webclip icon in two ways. One, name your image apple-touch-icon.png (exactly) and put it in your root folder. Or two, tell the devices where to find the image if you aren’t going to put it in your root with the following two link tags:

<link rel="apple-touch-icon" href="FILE LOCATION" />
<link rel="apple-touch-icon-precomposed" href="FILE LOCATION" />

3. Think about file sizes. When using mobile devices, often times people are mobile, making their internet connections slower and potentially spotty. Don’t make it hard for them to load your site with excessive HTML, Javascript, and CSS. But even more importantly, do whatever you can to shrink any images you want to load, and use them sparingly when you can. Code your site intelligently with multiple classes to keep your CSS and HTML clean. Compress your images before you upload them using one of many online or downloadable tools. Don’t include Javascript just for the hell of it, only include it if it will significantly improve your user experience.

4. Consider the difference between hover and click. This is an important one. A lot of usability principles hinge on the feedback you provide to users for their actions. One of the most common feedback techniques used is the hover effect. However, the hover effect doesn’t exist on touch devices (almost all mobile devices nowadays). So, you need to compensate in your design. Where previously, a link may have been fine without an underline because it had a hover effect indicating it was a link, you may want to employ underlines in an effort to be a little clearer for mobile devices.

5. Most importantly, decide between a completely separate mobile website and different style rules. This is the biggest decision you’ll have to make. You have two choices, make a totally separate website (m.example.com versus example.com), or apply a different set of style rules when accessing the website on a mobile device. For large websites that have a lot of functionality, I’d suggest the separate website because most likely they’ll have to cut out certain functionality that is more difficult to use on a small screen. However, for smaller and more simple websites, you should strongly consider just applying simpler styling rules. This option is the one I’ll talk a little bit more about for now.

Start by coding your website intelligently (as I mentioned in point 3). Think about how your want your page layout to be for both desktop viewing and small screen viewing. Using that knowledge, write your HTML so that your CSS can switch the design easily between each version. I assure you, this is a much easier task than it might sound if you know your HTML and CSS well. Take the CSS Zen Garden as proof of that concept. If you write your HTML well, then CSS can make completely different websites come to life. Then, apply the appropriate rules to your mobile version versus your standard version using one of two tactics. You can set the media parameter in your link tag in the head of your document like so:

<link rel="stylesheet" href="FILE LOCATION" type="text/css" media="only screen and (max-width: 480px)" />

Or, if you prefer only one CSS document, you can include all of your mobile only rules inside of the following HTML:

@media only screen and (max-width: 480px) { ALL CSS RULES GO IN HERE }


Either of these two options will trigger the CSS you add when the screen width gets below 480 pixels. If you are curious about how the iPhone 4 handles screen resolution in comparison to the older models, check out this interesting article which points out some more detailed icon information. This 480 pixel requirement could easily change when the iPhone 5 is released, and it certainly isn’t a catch all for all Android phones (such as the Galaxy Note), but it does a pretty good job. If you are curious, you can trigger the mobile version of my website by shrinking the width of your browser screen down to 480 pixels.

Hopefully, this information should set you up to make a relatively friendly mobile website. Of course, it isn’t full proof, so you should always test on as many devices as possible… but it is a start! Good luck.

Server And Client Side: What’s the Difference?

It’s a pretty simple question if you know how the web works, but if you don’t, it is very complicated. To succeed working in the web world, you’ve got to have a firm grasp on the difference between server-side and client-side interactions. If you want the quick answer, here you go:

Server-Side: Server-side interactions require sending data to a server and the server sending data back to you, the client.

Client-Side: Client-side interactions don’t need a server, and data is exchanged or altered on your own computer browser without sending any information to a server.

Now if you need the longer explanation, you’ll first need a little background on how the internet works. The internet is just a mapping of connections between millions of computers around the world. When you type in a web address–such as http://www.google.com/–your computer knows that means go find the computer somewhere in the world that has the website for Google on it (I’m really simplifying things here if you can’t tell). The computer that has Google on it is called a "server". Servers aren’t typical computers. They don’t necessarily have any screens to view anything on, and for sites like Google, thousands of servers are collectively used to house the website.

So now that you understand the web (at least in a basic sense), we can start to learn about what server-side and client-side means with a more indepth explanation. So say you are on Google’s homepage. As a user (consumer) of Google, you can interact with their homepage in a multitude of ways. To understand each type of interaction, I’ll give an example using the Google homepage.

Client-Side: When you rollover a link in the navigation bar at the top and its display changes, you’ve just triggered the most basic client-side interaction, the pseudo class :hover in CSS. For a slightly more complex client-side interaction, by clicking on the "more" link in the navigation bar, a menu expands with more options. This is a very typical client-side interaction using simple javascript to hide and show something on your screen. In addition to CSS and Javascript being client-side languages, you should also include HTML, the basis of all displays in the web. Without HTML, the internet would be completely different from what we know it as today, and all three of those languages are interpreted on your own computer within your own browser, needing no interaction or data transfer from a server.

Server-Side: Now, after you’ve typed a search phrase into the search bar, when you click the "Search Google" button or click enter, you’ve now triggered a server-side interaction. Your computer doesn’t have the information it needs to conduct the search you are requesting, so it must send your search across a series of connections to a Google server somewhere in the world, that then sends back the results that it found for you. This is the basic concept behind server-side interactions. Typical server-side scripting languages include Perl, PHP, Java, and ASP.NET (I could keep going, but who is it really helping?). The key to identifying a server-side interaction is noting when your browser page reloads. Server-side interactions require reloading the browser window to show the results that were found. There is one exception to this rule.

A Combination Of Both: It is possible to conduct a server-side interaction without reloading the browser window. This requires a combination of both server-side and client-side interactions. Using a subset of Javascript called AJAX, we can send requests to a server, and then load those results into the client browser without a page reload. An example of this on the Google homepage is the suggested search phrases that change as you start typing. You type in a few characters, Google sends those characters to their server which then looks at frequent searches conducted by other people to make suggestions, and then sends them back and fills in the drop down menu for you to make a selection.

Now hopefully you’ve got a firm understanding of the difference between server and client side interactions and languages. If you’ve got any questions, don’t hesitate to ask.

Email Client Compatibility – HTML Friendly Emails

As a web designer, I actually do not frequently find myself working with email designs. So when my employer requested some HTML email templates, I had to do some research. I found a fantastic article on HTML emails that really helped me out. It was a bit long though, and I discovered some additional things along the way that I thought I’d share.

The first thing you have to do as a web designer when working with HTML emails is forget everything you know about modern coding standards. HTML email is years behind the curve. You’ll find yourself using inline CSS with limited shortcuts, tables instead of divs, and even deprecated attributes that haven’t been used in years.

The second thing you have to do is settle on a simple design. If you thought cross-browser testing was a miserable experience with four to five browsers (Safari, IE, Firefox, Chrome, and maybe Opera… plus mobile if you desire) try the dozens upon dozens of different email clients that all render differently! There are some good resources out there for cross-email-client compatibility testing such as Campaign Monitor or Litmus, but most charge, and if they don’t, they have a lot of restrictions like frequency of checking.

So here are the secrets to making your emails look good across all of your major email clients:

1. Use Tables For Layout because floating and positioning doesn’t work all that well. If you need something to appear next to another item (such as an image next to text) you should still divide that up into two tables. I know I know, it goes against everything you’ve ever known about modern coding standards and practices. But trust me, it’s the best way to go.

2. Use Inline CSS Only unless you don’t want your emails to all look the same. Some email clients will strip out the head tag or any external style sheet references, and others anything within a style tag. Keep in mind, many of these email clients are browser based, meaning they have their own custom CSS. To protect that CSS, they’ll strip anything out that could interfere with it before displaying it. And don’t even think about javascript…

3. Don’t Shy Away From Deprecated Attributes like width and border for your tables. When in doubt, just include it, because W3C standards do not really apply in the same way for emails as they do for websites. I always double my declarations. If I want my table to have no border, then I put that in my inline style declaration, and as a border="0" within the tag.

4. Avoid CSS Shorthand like "font: 14px Arial;" and instead do it longhand like "font-family: Arial; font-size: 14px;". Some email clients won’t read the shorthand CSS, though admittedly a majority do.

Here’s a bare, one column template that you can use with a single h1, h2, p, and a tag. Notice the XX and YY for your own personal preferences. The 98% width on the main table prevents email client bugs that create horizontal scroll bars.:

<html><body>
<table style="width: 98%;"><tr><td valign="top" align="center">
<table style="width: YYpx;"><tr><td valign="top">
<table width="YY" cellpadding="0" cellspacing="0">
  <tr>
    <td style="width: 600px;" valign="top">
      Header Content Goes In Here
    </td>
  </tr>
  <tr>
    <td style="width: YYpx;" align="left" valign="top">
      <h1 style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Header Here</h1>
      <h2 style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Subheader Here</h2>
      <p style="font-size: XXpx; color: #XXXXXX; font-family: XX;
        margin: XXpx XXpx XXpx XXpx;">Enter Your Main Content Here</p>
      <a href="" target="_blank" style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Link Here</a>
    </td>
  </tr>
  <tr>
    <td style="width: YYpx;" valign="top">
      Footer Content Goes In Here
    </td>
  </tr>
</table>
</td></tr></table>
</td></tr></table>
</body></html>

In a future post, I’ll discuss ways to avoid getting your email marked as spam, as well as other best practices for making a good marketing email.

Vector And Rastor: What’s The Difference?

When working as a web or graphic designer, it is very important to understand the difference between "vector" and "rastor". These are two words used to describe the basic structure of a file or program. Take the Adobe Creative Suite for example, some of the programs included within the Suite are vector based, while others are rastor based. In particular, you should note that Photoshop is a rastor based program, while Illustrator and InDesign are both vector based programs.

Now I still haven’t answered the question of what the difference between the two is though. Well here is your explanation. The word raster refers to pixels (or points if you will), while vector refers to lines. When making an image, you can base it off of two things; individual points in the image that are colored in whatever way you want that come together to make an image, or a bunch of lines that define spaces and colors, thus creating an image. Still not getting it? That’s okay… Let me try by talking about what you’d want to use for different types of projects.

Photo Editing: Photos are loaded with tons of information all the way down to the pixel level, thus making them rastor based. If you were to take a photo and try to expand it ten times larger than it already is, it is going to get blurry. That’s because for every individual pixel of information, you are trying to turn that into 100 pixels, giving it seemingly less detail. But without simplifying that image, there is no way to really replicate it using just lines is there? That’s why photos are rastor based, but are also limited in how big you can make them.

Logo Design: Now say you are working on a logo, and you need it to work in a lot of different places (on a website, on letterhead, on a business card, or on a giant billboard). That means you need an image that can shift in size but not lose it’s definition. To do this, you want to use a vector based software. So if your logo has a "+" in it, you can make that as big as you need without distorting it, because it is defined using lines, and no matter how you alter it, it will always be two lines. Now don’t limit yourself to thinking of lines as having to be straight. Vector based software thrives off using curves. This is why vector based software is so much more ideal for making things with writing in them. Letters just don’t do well under rastor based software because you lose the specific curve of a font to aliased pixels.

And really, that’s the difference between "vector" and "rastor". You want to use rastor software when working with photos. But for pretty much anything else you are going to want to stick to vector software so that your copywriting doesn’t lose quality, and so that you can change the image size without losing quality.

Any questions? Ask away!