Why Change the Layout?

Some people fear change, I love change (well for the most part). I wanted a new layout that would give more emphasis on my Photography. After all, I seem to do more blog posts on Photography than anything else really.

Some of you know about http://www.tyleringramphotos.com. It was a photoblog that I ran somewhat separately from this site, but I found over time, I would be just repeating a lot of the same photos. I tried to make the photoblog more of a portfolio site, but decided to just let it go and concentrate my photo efforts here.

I also wanted to change it up before our trip down to Costa Rica. My camera is coming with me and I will be sure to post magnificent photos of the area we will be in, and thought increasing the space for photos here would be a good idea.

What Changed?

I pushed the navigation menu up above the entire site. I thought it was a nice way of getting it out of the way.

I expanded the width of the site to 1000 pixels wide. This will help accommodate the size of the photos I wish to display which will be 800 pixel wide. This also eliminates the need for using the Lightbox that the 500 pixel wide photos currently use. According to Flickr’s ToS, the use of the lightbox technically takes away from the experience of using Flickr, so I guess that is a bad thing.

The header image is still pulled from my Flickr stream at random. I increased the length to the full 1000 pixels wide and increased the height to 250 pixels. this gives a much larger header image. Because my photos are typically 800 pixels wide on Flickr, I did use PHP’s GD Library to increase the size of the photo. There is small loss of quality of course, but I still think it looks really cool.

You will notice a “Featured Post’ slideshow. It is Ajax based and loads with both Firefox and IE (why are you using IE still anyway). I haven’t had time to play in the other browsers, but according to the place I got it from, it’s supposedly compatible. Let me know if you experience issues with it. I think it’s cool and have always wanted one.

I got rid of my Sidebar. Yup, I started hating it anyway. I’ve moved the Categories, Recent Posts and Recent Comments to the footer of the site. This keeps the main focus hopefully on my big beautiful photos. Right?

The main content will accommodate my 800 pixel wide photos, with room to spare. After all, since I love Photography so much, I thought it would be best to share the photos in a nice, large way.  Such as this photo:

Isn’t that beautiful? The rising sun off the beaches of Punta Cana, Dominican Republic. If you have to scroll to see that photo, you really need to upgrade your monitor. Though technically you should still be able to see most of it on a 1024×768 resolution, but I don’t know why you’re running your resolution that low to begin with.

Added some cute little Social Media icons near the header. No need to show how many people follow me right?

The main page (index page) will show up to 5 posts with excerpts along with a 500 pixel wide photo. The excerpt code is custom, which includes a custom call to the WordPress database (MySQL) so strips out any HTML it sees. It works better than the default WordPress function the_excerpt(), or at least I think so.  I also have a function that pulls the first image from the post and uses it as a 500 pixel wide thumbnail, same as before but that was 100 pixel wide. I also tweaked it a bit to load quicker (hopefully).

I guess that is about it. There have been some little tweaks to the code here and there. Primarily to the code that handles the recreation of images for the various locations on my site.

What’s Next?

I’m sure I’ll tweak things as I find them. If you notice anything out of place, don’t hesitate to tell me here via Comments, Twitter or even contact me via my Contact me page.

I will be writing a small WordPress plugin to deal with my contact form. Currently I use cFormsII but it is just too much and always gets stuck in my spam filter. I will look at creating a small, simple (or minimalist) contact form.

I might look at creating a WordPress plugin to better handle the “Featured Post” Slide show. For now it is changed manually (via HTML).

What do you think?

I’m alright with criticism. If you like it, what do you like about it? If you don’t like it, what part(s) and what would you do to make it better? Let me know via the comments section!

The past few hours I have been pretty geeky. I’ve been looking into Flickr’s API (application programming interface) and how I can monkey around with it and PHP. What did I want to accomplish? At the beginning I didn’t really have a goal, I wanted to see what I could do with it, how I can access my photos and from there I would figure out something fun to implement.

Well it seems I have figured out something cool. If you’ve noticed the larger photo on the header of my page, the one above the Flickr RSS thumbnails, it is a bit more dynamic than usual. Previously I had 5 (I think) header images that I created in Photoshop and was using PHP to randomly insert on when the page refreshed. Now I can be a bit lazy at times and I haven’t looked at updating those 5 photos in a while, so I was thinking how I could incorporate my Flickr photos with my website in order to help give my photography a bit more exposure.

So what’s different? Go ahead and refresh the page, it should show a random photo of mine from Flickr. Though there is a catch, it isn’t the fastest system yet and it doesn’t always show something cool. Let’s see if I can explain the functioning behind how it currently works. I might have a revision or two, but for now I think it’s pretty cool!

1. Pull the last 400 photos from my Flickr Photostream (pulls XML data)
2. Select a random photo using PHP’s rand() function and create URL for photo
3. Check to see if it is in landscape or portrait orientation, discard if it’s portrait
4. Select the middle third of the photo, remember the “Rule of Thirds” for photography? Hopefully this is the more interesting portion of the photo. If not, tough luck! Typically my photos are 800×533 on Flickr
5. Create a new 850×118 jpeg image and copy random photo into its placeholder, resize to width if needed
6. Display photo in all its glory as my header image

Not bad for a couple of hours of work. Either way it allows for a more dynamic header and some more ‘freshness’ too!

I am looking for your feedback on this! Is it slow to load? Do the photos suck? Is it a cool idea? Is it random enough? What do you think?

I can just sit here and refresh my screen all day looking at whatever random photo is pulled from Flickr.

While I sit here and look over my various sites including my Photography site, I noticed that the unordered lists were not styled. Raul also mentioned how I should write about styling unordered <ul></ul> or ordered <ol></ol> lists within a WordPress theme, as his was also missing styling. This won’t be a terribly in depth post about how to completely restyle your unordered or ordered lists but it will hopefully help you learn the basics you need to know when playing with them, within your WordPress Theme or Template. This also applies outside of the world of WordPress as well since I will not be targeting a particular class or id name within a stylesheet.

The Lists

Alright I’ve mentioned both unordered and ordered lists, but what is the difference between them? Normally, I use unordered lists <ul></ul> which are primarily used for listing items in no particular order, like a shopping list!

The other is an ordered list <ol></ol>, which I don’t think I ever use. Ordered lists are for listing items in a particular order. Wasn’t that obvious?

Now that we got what they are out of the way, what do they look like in HTML?

Simple and straight-forward list right? Though now you are probably wondering how do you go about editing your stylesheet for your theme to suit your needs? Well, it too is pretty straight-forward.

CSS – Cascading StyleSheet

Your cascading stylesheet is located among the rest of your WordPress Theme files (/wp-content/themes/your-theme/) and is usually called stylesheet.css.

Now stylesheets can vary greatly from theme to theme,  but let’s try to keep this uncomplicated and apply a specific styling to the above list. We would modify the above list by adding a class reference or name to it.

We give the class the name mylist just for easy reference, typically it is best to name it something that will be easily identifiable to you for editing purposes. With your favorite text editor (notepad, notepad++, simpletext, bbedit, etc) open up the stylesheet.css file. Chances are you do not have a class called mylist so let’s get started. Pick an area to insert the class declaration, I normally place it after the #content declaration. The cascading stylesheet is typically read from top to bottom, hence the name cascading.

This will set up the class declaration for the unordered list we’re about to create. We will start filling in the guts of the style as well as editing the internal parts of a list which are the list items <li></li>. Some attributes that I modify when I play with a list, whether or not its an ordered or unordered list, is the padding and margin. You can also change the look of the “bullets” you decide to use as well.

What the above does is changes the look of the “bullets” to discs, I also remove the margins from the list. This will remove the extra spaces around the list itself. I find sometimes that when I insert a list within a paragraph or between paragraphs there is too much of a space between them all. Setting the margin to 0 will help. I then nudge the list over by 10 pixels which is like indenting it. If you are using an ordered list <ol></ol> you can change how the numeric representation looks too, like numerals, roman numerals etc.

To style the list items you start a new declaration below the parent style.

Say we wanted to change the color of the items within the list to a red and underline them, this is how you would apply the style:

Globally Changing Your Lists

Another option you have is to globally change how your ordered and unordered lists work. Instead of using a class or an id you would just use the tag itself:

This would give the default style to any <ul></ul>(unordered) tags throughout your whole WordPress Theme.

Afterthoughts

• Cheese
• Bacon
• Milk
• Bread
• Eggs

The above example is how my blog (custom WordPress Theme) handles unordered lists. The CSS behind the list is relatively simple too:

Take the outer class (or parent) post, which is typical of most WordPress Themes. I’ve told the stylesheet.css to use a disc type with adding padding to the bottom of the unordered list. I then tell the list items to nudge over by 25 pixels and pad them a little bit as well. This allows for an easier to read list of whatever I decide, or at least I think so.

More advanced styling would be to remove the default bullet style and replacing it with a positioned background graphic. Perhaps you have a logo you would like to use as the “bullet” instead. You can see this in action over at my photography site. Any unordered list use a background image (of a single arrow) as the “bullet”.

Typically WordPress Theme navigation (like home, about, contact etc) are also unordered lists, though they have a bit more styling applied to them. The style applied is usually the removable of the “bullets” (list-style-type:none;) and aligning the items horizontally not vertically (display: inline .

Hopefully this has shed some light on ordered and unordered lists within your WordPress Theme or in general web design usage. I’ll answer any questions you might have, and if any of the above is incorrect, please feel free to correct me so I can make changes.

One of the aspects of web development and design, or even blogging is trying to find photos which you can use without having to pay for them or paying very little for. Today on Twitter there was a mentioning of a stock photography website that I believe many people might find useful when trying to find stock images for their web layouts or even blog posts. That website is FreeDigitalPhotos.net and as long as you give proper attribution back to them you don’t need to spend a single penny.

If you want a higher resolution (greater than 640×436) then you will have to start paying money. Though once you’ve paid for the photo’s use you don’t need to leave any attribution to anyone for that particular photo.

FreeDigitalPhotos.net

If you a photographer and looking to perhaps earn some extra money for your photos, you can sign up and sell them on the website as well. There is a bit of a process to get registered as a photographer to upload your work, though if you are good at what you do I am sure it is a relatively smooth process. The free (lower resolution) photos wouldn’t make you money but you can earn what you want (minus their 25% commission) for any higher resolution photos someone purchases. You set your own prices. That’s a pretty cool idea.

FreeDigitalPhotos.net

Their library is pretty good too and ranges from Animals to Everyday Items you may find laying around the house. So far after a quick look at their website it seems to be promising for those who want to add images to their blog post or website without having to dish out any extra money.

So if you are looking to spruce up your website’s content a bit or perhaps looking for a new header image, you could look at their collection of stock photography. Granted if you are looking for a header image, you may have to look a purchasing something a bit larger than the low resolution photos. 640×426 is not that wide enough for most full-width headers. Though the low-resolution would be great to have inline with your website’s content to add a bit of colour to them and also offer the eye a bit more something too.

Every so often I like to look at various aspects of my blog and tinker with them. It’s nice to change things up a little bit but after doing a new blog theme for my site, Robyn pointed out the new layout lacked some items it previously had that she liked. The Categories on the sidebar and the Navigation links on the single page.

I remember reading (not that I remember where) that as a web designer what you should do is get your friends and family to play with a layout you create, watch over their shoulders to see what they do. See where they go to click or what they do when navigating around a page. This I find helps when making your page easier to navigate for general users.

With Categories, Robyn liked to see if there was any other posts related to a particular Category I have on my blog, she could do that easily with my previous layout but not with the current one. So I added it back to the sidebar to help her and others who might find it useful. I also went through some of the Categories and removed some of the ones that were either redundant or didn’t make sense.

I also added the previous post link and next post link (if applicable) at the top of each single page which is dynamically generated anyway by WordPress. I made the font smaller and removed the weight so it does not interfere with the post’s title as much as it used to.

Contact Forms Fixed

Flickr Photo By Pink Sherbet Photography

I had an issue with my contact forms, though I am unsure how long I have actually have had the issue. If you were trying to get a hold of me via my contact forms and did not hear back please try again.

The email address I use for all my online dealings is hosted by Google’s Domain Apps and I was not receiving email from DynamicShark.com via the contact form I have created there either. The odd part was that the contact form worked fine if I sent the message to another email address but not to a Gmail account. I could also send the contact form data to the proper location when it was on my development server here at home, just not when it was on my live servers.

It turns out that my webhost (Bluefur) had a default set up so that if the scripts were running locally off of it, it was being smart and taking the  message and rerouting it to it’s own mail servers (that’s where my domain/websites are hosted of course). Though because the email portion of my account is not set to handle my domain mail at Bluefur,  it was just dumping my messages into /dev/null, sort of like a blackhole.

Tech Support for Bluefur was great at troubleshooting the issue with me and helped fix the issue relatively quickly.

My contact forms are working properly now so feel free to use them if you need to get a hold of me.

Recently I was asked to look at modifying a ‘Premium’ WordPress theme and while browsing through the code of the theme I noticed a couple things that people should be wary of when purchasing themes, or at least in my opinion. In today’s day and age in the World Wide Web there are various good practices a designer and/or developer should look at when creating websites or themes for web applications and the first one I would like to point out is the use of <table> tags for layouts. The second issue I have noticed, heard of and read about is how Themers will insert their own Affiliate IDs into preloaded Ads such as Google’s AdSense.

Issue Number 1: <TABLE> Tags Should Not Be Used For Layouts

The above code I had to clean up to understand what was going on

That’s right, the HTML <table> element should strictly be used for tabular data and not for website/theme layouts. In the past Tables were easier to use when ensuring your page looked the way you wanted it to. If you get into complicated layouts, Tables can start being a really large pain to work with in regards to rendering the cells to proper dimensions as well as compatibility across platforms. Mobile devices (with their smaller screens) will probably not render layouts in Tables properly and will be really buggered up or really squished.

Updating a Table layout can also be quite a task, especially if it has multiple rows that span across and down the page. Need to add a cell into the middle of a table? Is the table based on precise measurements (such as pixels) or is it based on percentages? I’ve had to deal with tables that use 1px wide cells to help nudge things around the screen. Also if the person who created the layout with Tables doesn’t follow good practices (such as indenting) then it can be really hard to modify and you might spend hours trying to figure out where everything is.

Then What Are <TABLE> Tags Used For?

This is tabular data and what <table> tags should be used for

Like I mentioned above Tables are used for tabular data. Do you have a long list of items with prices perhaps? A Table would work best, especially if you have lots of information to present. If the information is to be in the form of a spreadsheet then a Table would be used.

How Do I Check If  A Layout Uses Tables?

To check if a layout uses Tables extensively you can usually right click on a theme’s demo and select ‘View Source’. If there are a lot of <table></table>, <tr></tr>,<td></td> tags that will give you indication of a theme based on Tables.

Should I Not Get A Theme If It Uses Tables?

If you plan on updating or modifying your theme with little effort then I recommend not using it. It also is an old coding practice which is frowned upon by other web designer and developers.

Table layouts do not load as quickly as say a layout done with DIV tags. Though there still might be some debate about how much bandwidth a DIV based layout will save you over a Table based layout but DIV based layouts are the current standard for web design/development. They are also easier to work with when you need to modify things. They help keep code clean too if done properly!

Issue Number 2: Check PreLoaded Affiliate or Ad Links

Another thing I have noticed with Custom WordPress Themes is the use of the Themer inserting their own Affiliate ID into the preloaded ads. I guess if the person who purchases the theme does not care about monetizing their own website then why not right? Well if you are into monetizing your own website then I would recommend checking the preloaded Ads or Affiliate links if there are any and fixing them.

Why Does This Matter?

Well if your Custom Theme has preloaded Google AdSense ads that you did not configure, then when someone clicks on an ad the person who created the theme (for which you might have paid money for) will get the credit for that click and ultimately make some more money off your site. I guess people could argue the pros/cons of this practice, but to me this seems a bit too sneaky.

I remember Rod posted about forced ads that were preloaded on a WordPress theme he downloaded. When Rod went to remove the ads from the theme, the theme no longer worked. He reinserted the code and the theme continued to work. Another sneaky practice!  I am alright with giving attribution to the person who created the theme, but to try and make additional money off of it via sneaky tactics such as this just doesn’t sit right with me. Rod ended up removing that particular theme right away once he found that out.

If you are looking at using Free WordPress Themes, or Paid (Premium) WordPress Themes I would take a moment or two to perhaps look over the code. If you do not understand the code or where to look have someone else look into it for you. Make sure people are not trying to make money off of you without you knowing it. I am sure not everyone does this but just keep and eye out for it.

As some of you have seen via Twitter I have been starting to post links to a blog called WestCoastAlpine.com. What some of you might not know is what this blog is about, hopefully I can help explain it in case you were curious. If you are into winter activities in British Columbia or just in general I recommend following our updates (you can subscribe to the RSS feed) as we hope to provide more information about the local ski conditions as well as some other interesting information as often as we can.

What Is WestCoast Alpine dot Com?

WestCoast Alpine is a project of Robyn’s and mine related to the ski and snowboard activities of British Columbia. Currently we have been reporting on our adventures at the ski resorts such as Cypress Mountain, Grouse Mountain as well as the infamous Whistler/Blackcomb.

We will also be writing about the various events on the ski resorts around British Columbia such as the Telus World Ski and Snowboard Festival at Whistler/Blackcomb or the Kokanee Winterfest at Mount Washington. We may not get out to them all but we will try and keep up to date on what’s happening with them.

Don’t forget when we do our ski/ride road trips that we have plans for throughout the winter season, we will be writing about our accommodations, conditions of the runs as well as anything else that we come across in our travels.

We will also be keeping tabs on the equipment manufacturers.  Reporting on new released gear from such companies as Solomon, Burton, Head, North Face, Heli Hanson and others. After all, the more I get into snowboarding the more the gear and equipment fascinates me and I might even become a gear whore! With that of course I am sure we will be writing reviews of various gear we purchase as well throughout the year.

This project of ours also introduces Robyn into the world of blogging. She so far really enjoys it as she does like to write. It was also a fun way of combining one of our common interests and introducing her into another aspect of my life, yes the online life.

Behind the Scenes

WestCoast Alpine is a WordPress blog theme of my own creation. I will also be tweaking it over time as we build it up with more content. I have always been a fan of using 2-column layouts which are centered. I find it easier to work with a variety of resolutions starting at the 1024×768 and up. If you are running less than that, well you should upgrade your monitor, video card and/or bump up your resolution to at least that.

The left column (main content) allows for up to 500px wide images/photos. This also allows for plenty of space for copy without having it looked squished or stretched too far. The right column (sidebar) is roughly 250px wide and will allow for up to two 125px wide button ads (if we see fit to use them) side by side but allows for some decent sized copy such as links or little blurbs too.

The layout itself was created in Adobe Illustrator and then sliced apart and glued back together using good ol’ CSS. I do try my best to keep everything XHTML and CSS valid as that is just good practice. I find that sometimes I do have to edit the output of other people’s WordPress plugins to ensure it is XHTML and CSS valid but that’s another story.

So come by, read a few posts and say hi to both Robyn and I over at WestCoastAlpine.com!

One thing I find myself doing is constantly learning, especially when it comes to knowledge related to web design and development. I have always had a dislike for school but at the same time I have always enjoyed learning about whatever I can. With web development I have been looking to further my skill set and in an effort to do so I have been looking to branch off into the design side of the industry. With that in mind I choose to jump into the world of Vector images and artwork with Adobe Illustrator.

Why have I wanted to learn the basics of Adobe Illustrator?

I wanted to learn Illustrator to get a feel for vector artwork and illustrations. I believe in the land of web design, skills in illustrator can help when creating layouts that are more visually appealing as well helping clients brand themselves by creating logos that are not resolution dependent. You know, being able to use your logo on various types of media: from screen to print and beyond! It can also help in designing more unique websites that are more graphically and visually appealing to targeted audiences.

My Adobe Illustrator course was a level 1 course that helped me learn the basics and fundamentals of the program for creating vector images. While taking my Graphics Design (aka Communication Design) overview course, Illustrator also allowed me to digitize my homework and gain a better understanding between the two relationships print and web work can have.

So what have I learnt?

Recently I have been wanting to create a Vancouver skyline type vector and came up with the following:

I took one of the many photos I took the other day and traced it out with the Pen tool. I find Illustrator to be pretty fun when I finally learnt how to properly use it. I added some white highlights to perhaps make it stand out a bit more and hopefully other people like it. I do anyway. I think it can be pretty recognizable to at least people of BC.

While working on it I remembered that Rebecca’s website uses the Vancouver skyline in vector form as well. My vector image is quite similar to the one she uses and it looks like it was created from a photo shot from the same location mine was shot at; off of Stanley Park.

So now all I need to do it work on my Illustrator skill and keep on being creative. Perhaps I can redesign my blog into something more interesting and unique. I find that I need to keep an edge and keep my knowledge, skills all all that up and current. It seems there are web designers and developers everywhere and I need to make a mark and keep ahead of the pack as best I can.

Today is one of those creative days I have where I like to think about ‘what can I do to make my site more interesting?’ Well as I was browsing over at John’s new layout which was designed by UBD I noticed that he displays his Twitter follower count in a dynamically generated graphic that was created by TwitterCounter.

I looked over at TwitterCounter to see what they were about and after looking at my followers (as of this posting there are 175 of you!) I noticed at the bottom that Dani McDaniel created a fun looking graphic which utilizes a piece of javascript code to pull your follower number. Now I thought it looked cool, interesting and a bit more fun than the regular chicklet you see (such as the one on John’s site) and since I love to use Photoshop to create new things (which is also a form of practice) I came up with the following image for my site:

As you can see from the above image it was set up to work with my right side column with a drop shadow to create the illusion of either sunken or popping out depending on your vision. The javascript is placed in a relative spot using CSS so that my number of followers is displayed. Pretty neat huh?

WordTwit

If you run a WordPress blog and have a Twitter account I would recommend combining WordPress and Twitter with a creation from BraveNewCode: WordTwit. What WordTwit does is allows you to automatically generate a tweet when you post something new. What I like about it is I write post set it to a future date and forget about it (until I read comments etc). WordTwit kicks in when the post is published and all your followers are notified of your new post!

wpCommentTwit

Another plugin that I love using and will be using when I get my new blog designed and running is the WordPress plugin I wrote called wpCommentTwit. This plugin allows you to be notified (similar to the way WordTwit works) when someone has left an approved comment on your blog. Your Twitter Bot (which you create) sends you a Direct Message (which skips the API timer delay) and you get instant notification of a new comment. If you are not logged into Twitter then the Direct Message will be there waiting for you when you do.

If you are into the Social Media scene are using Twitter yet? If not why not? Join Today and Follow Me!

Recently I have been kicking around the idea of creating the main page of my blog to mimic that of a Magazine style layout. Displaying the most recent post at the top and then a breakdown of the next 4 posts in 2 columns each with excerpts is what I have had in mind. At the very bottom I have included the 2 most recent reviews I have done here on my site as well. It seems more people like the gadget type reviews than anything really.

Why did I do this?

I looked over my blog’s statistics that are collected by Google Analytics and found that majority of my traffic does go directly to individual posts rather than my main site. Though traffic that comes from other blogs tend to point towards my main page (root domain) and I wanted to show more interesting posts to those who visit the main page. I also thought that offering an excerpt instead of the full post at the main page would allow for a more varied listing of posts that I offer people to read. This also allows people to have to scroll down less when they land on my domain.

In doing a change like this I find that the first few sentences will need to be able to grab the reader/visitors attention and entice them to click on the Continue Reading link so they can read the rest of the post. I also have created a script which will scan the posts and find the first image tag it finds, creates a thumbnail on the fly, and then adds it to the excerpt. Grabbing reader’s attention visually is also a big help since most of us enjoy seeing images or photos of what they are reading.

West End of City of Vancouver

The above picture was inserted to demonstrate the thumbnail script in action. On the main page of the site (while it is in the top 5 most resent posts) the script till grab it, thumbnail it, and insert it in the excerpt. This of course will not work once there is 6 posts published in front of this one but hopefully it gives you an idea.

What future plans do I have for something like this?

When I find more time (after I free myself from doing product reviews) I’ll look at creating the thumbnail script into a WordPress plugin, though I see this mainly for technology sites such as www.futurelooks.com (where I got the idea from) or other blog sites with magazine style layouts. Who knows perhaps there could be other uses for it.