PHP: Image Directory Repeater

There are lots of great prewritten scripts to build out relatively custom image slideshows. One of the main issues I’ve run into is that these plugins require a listing of images, and sometimes, it is more convenient to just pull images from a folder directory. Well, even if you don’t know much about PHP, it is incredibly easy to write one! Here, you’ll learn the basic PHP code you’ll need to repeat through all the JPG images within a folder.

<?php
   $dir = "directory/*.jpg";
   foreach(glob($dir) as $image)
      echo "<img src=\"".$image."\" />";
?>

That’s it! You just have to update the $dir variable to lead to the folder you want to run through. This script only repeats through JPG images, which you can change by altering the file extension within the $dir variable. Got questions? Ask away!

JQuery Plugin: Simple Textbox Watermark

In a previous post, I’ve written about creating a simple JQuery watermark. The code I wrote in that post is simple, and breaks down how a watermark really works. I expanded on that simplicity with this plugin, but not too far. Most watermark plugins I’ve seen are overly complex, attempting to account for all usage scenarios, when a majority of people only need to handle a small subset of those scenarios. So, I built a light plugin (under 1.3KB) that handles those basic scenarios well and implements easily. Here’s how it works:

Here’s how to implement it:

  1. Add in the most recent version of JQuery and the plugin code.
  2. In a document ready function, bind the plugin to any inputs and textareas you want with a single line of JQuery.
  3. Add the watermark text you want into the title property of the appropriate inputs and textareas.
  4. Apply any CSS you want to style your watermark text (suggested), and that’s it!
  5. Dependent on your usage scenario, call the function to clear out the watermarks before submitting the form.

The javascript:

$(document).ready(function(){
     $('.watermark').watermark();
});

The plugin applies a class of ‘marked’ to inputs and textareas when the watermark is active:

input.watermark, textarea.watermark { color: #000; }
input.marked, textarea.marked { color: #999; }

You’ve got to include your title property and the watermark class for the plugin to bind to the form item:

<input type="text" title="WATERMARK_TEXT class="watermark" />
<input type="text" title="WATERMARK TEXT" class="watermark" val="PREPOPULATED_VALUE" />
<input type="password" title="WATERMARK_TEXT" class="watermark" />
<input type="email" title="WATERMARK_TEXT" class="watermark" />
<textarea title="WATERMARK_TEXT" class="watermark"></textarea>

Here’s the javascript function to call if you want to clear out the watermarks before a form submission (just make sure to use the same JQuery targeting you used to bind the plugin to your form elements so you don’t miss anything):

$('.watermark').watermark('clearWatermarks');

It is as simple as that. Did I sell you on it? If so, download the plugin and enjoy! Here are links to both the unminimified and minified versions.

Download Full (1.66KB)Download Minified (1.26KB)

This plugin has been tested in the following browsers:

Chrome Firefox Internet Explorer Safari Opera

If you have any questions or comments on the plugin, please share. I may release more versions if there are specific feature requests that can be implemented without using a heavy amount of code. I want to keep this light, so if you want really advanced features, then this isn’t the plugin for you. But who knows, maybe I’ll write a more advanced one later…

Renaming Your WordPress Theme

When setting up a self-hosted WordPress site, you’ll be using a theme. I always start building my site with a pre-made basic theme such as the default WordPress theme. But then I make adjustments to that theme to fit my exact website, and I typically do so not as a child theme as described in this article, but actually by editing the theme itself. The biggest issue that arises with this methodology is when the base theme you used gets updated, it will overwrite all of the wonderful changes you’d already made to your site. Luckily, there is an easy way around this! Here are the four easy steps to renaming an existing theme to prevent it from updating:

1. Make an exact copy of the theme you plan on changing. The easiest and best way of doing this is using an FTP program like Filezilla. After you’ve already setup WordPress on your site, and installed the theme you are interested in, then go find that folder in your server files. The themes are located wp-content -> themes. Download the theme folder to your desktop rename the folder to your desired theme name.

2. Change a few lines of code in the style.css file. Now that you’ve got a “new theme”, you’ve actually got to change a few files so that WordPress recognizes it as a new theme. The only meaningful file change is the style.css file (which must keep the name of style.css), which references the theme name that WordPress uses. Here is an example of the commented code that needs to exist at the top of your style.css file. If you want, you can keep everything the exact same, just change the theme name to your new theme name.

/*
Theme Name: YOUR_NEW_THEME_NAME_HERE
Theme URI: YOUR_WEBSITE_URL
Description: DESCRIPTION_OF_YOUR_THEME
Version: 1.0
Author: YOUR_NAME
Author URI: YOUR_WEBSITE_URL
Tags: FOR_WP_THEME_SEARCH_IF_PUBLISHED
*/

3. Change a few lines of code in all the remaining files. In almost all of the remaining files, you’ll see something similar to the code below. This is an optional step, but you might as well be thorough and just update all the files to have your new theme name.

<?php
/**
 * @package WordPress
 * @subpackage YOUR_NEW_THEME_NAME_HERE
 */
?>

4. Create a screenshot for the WordPress theme selection page. You might notice inside the folder you downloaded, there is a screenshot.png file. This is the image that shows up in the theme selection interface in your website’s WordPress administration. Make a new screenshot of what your theme actually will look like. The image should be 300 pixels wide by 225 pixels tall. If you are curious, this is the screenshot I did for my own adjusted theme (yes, I used the process described above myself).

5. Upload and install your new theme. Once you are done with steps one through four, you can upload your new theme into the same themes folder you downloaded it out of originally. Once that is done, if you go to the WordPress administration interface for selecting the active theme, you should see your new theme as an option, in addition to the currently selected original theme you had been using. Pick your new theme for the site, and you are all set to go. You’ve got a fully functional theme that won’t get overwritten, no matter how many changes you make!

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.