In this post I’m going to cover the redesign process moving from v1 to v2. I’ll probably put up a link to the v2 website if people want to check it out. I created the second website from scratch in five days at my old internship. The folder says it was created on Friday July 13th, 2012. I did not spend any time learning html/css after the completion of the first site, and prior to the start of the second. So again, if you have any hesitations about creating your own I encourage you to give it a try.
I started by watching a series on YouTube called Introduction to Dreamweaver CS5 by createthenet. The series are basically videos narrated by createthenet as he walks through the creation of a website. One of the things I really liked about his tutorials is that he starts with blank html page and explains everything from the ground up. If you want to make a webpage tailored to your needs it’s really not worth it to skip steps in learning html and css. Understanding the basics is essential to creating more complex websites and having them look exactly how you want them to. So I buckled in and consistently watched videos up until about the 24th one. Those provided me with enough of a background to create the basic layout of v2 and fill in the content with the exception of the image sliders on the home, photography, and projects pages, and the contact form on the contact page.
I’ll start by dissecting the elements of the index page, which is really the template for the rest of the website.
As you’ll probably notice, I decided to keep some design aspects from v2 in the current website. Most notably the logo and social media icons in the header and also the image slider. The page can be broken down into several elements which are quite standard for most webpages.
The header consists of three elements: the Connor Yamada logo, the social link icons, and the navigation bar for the website. Both the social link icons and the nav bar are covered in detail in the Dreamweaver tutorial series, which I then adapted slightly and styled. The logo was just something I whipped up quickly in Photoshop and haven’t really bothered to change. Together these elements form the header div on v2 and is present on each page.
The content is the meat of your website. Content for content. Above you can see that I have three different elements on the homepage. The first is a jQuery slider called eislideshow. This was not covered directly in the Dreamweaver tutorial, instead I spent some time on google looking for a slideshow plugin I liked and ended up with this one. Integrated jQuery, or any other sort of plugin is generally quite simple. Usually the creator of the plugin will provide some sort of tutorial or sample code for you to copy (just to get it working), which you can then tweak to suit your needs. Google is your friend. I find it easiest to look at a bunch of different examples to figure out how to make something work the way I want it to. I really like this slider as it’s fast, easy to use, and I think it looks really clean. There are option to have it display text over your images, show thumbnails on the grey bar below, and change the delay and autoplay features. You can find it here.
The next element is just a header and some text. Learning how to use the header tags and style text is also something I would recommend doing early on. Getting the right font, font size, font color, and line height were all important design features for me.
The last part is a great example of a “plugin” type element in the form of a donate button from paypal. Many websites offer easy ways to integrate their features or services to web developers in the form of html samples or automatically generated code. This makes it easy to embed videos, media players, or in this case, donate buttons.
Not really much to see here, but this is the last main element of the site. It’s present on every page and is really only there so I could say my website has a footer. The footer in the current site actually has links to social media sites and is basically taken from the header in v2.
Using the header, footer, and content area I was able to create all of the pages of my second site. Each page was basically the header and footer code copied from the homepage with only the content being changed. I didn’t know this at the time but it would have been much easier to create separate php files called header and footer, which can be easily included using the <?php include(‘header or footer here.php’) ?> That way, instead of having to individually edit the header in each file, you can just update the header.php file which is loaded into whichever pages have the include. This makes content management and debugging much much easier and saved me a lot of time in building the current site.
I’ll further cover the image sliders and contact page in the next post however, this is how the majority of the site was created. Once you understand basic page layout and html, it becomes quite easy to create your own content.