Tag Archives: Design

Handy Magento Upgrading Links for 1.5 to 1.6

English: Magento Commerce Logo
Image via Wikipedia

When upgrading Magento, it doesn’t hurt to have some handy resources. I’ve pulled up a few for doing the upgrade from 1.5 to 1.6:

Some other handy links for upgrading that aren’t specifically relevant to 1.5-1.6 upgrades:

And if you are running Magento on a Hostgator server, this may be handy for upgrading with SSH: How do I get and use SSH access – Hostgator support portal.

Enhanced by Zemanta

Internet Explorer Truncates Long CSS Files

I came across an interesting quirk in Internet Explorer a couple of days ago whilst working on a project for a client.

There is a section on their website that has an extensive set of stylesheets that is around 3,500 lines long. Combined with the stylesheets for the rest of the website, the total is about 6,500 lines.

The design was all finished and looked great in Firefox, Chrome, Opera, IE 7 and IE 8. However, then I did up the set of styles I mentioned that ended up totalling 3,500 lines. Due to the way I lay out my stylesheets, these started at about line 2,000. Which meant about 1,000 lines were after them.

While I’m working on something new I test in Firefox with Firebug and then once I’m finished I adjust for IE. So all of a sudden when I tested in IE 7 and 8, they are not displaying things correctly, including things in the design that were working previously. Using IE’s built in developer tools I was able to see that there were stylesheets simply not being applied to things that they should have been after about the 4,500 – 5,000 line mark. The entire stylsheet was loaded though and could be viewed.

I began tweaking things in the IE specific stylesheet since I couldn’t get it to work by editing the regular stylesheet. Once I realised that I could copy things directly from the main stylesheet into the IE one and it worked without tweaking, I started to think something odd was going on.

Cutting the extra 3,500 lines out put the site back to normal in IE, except for what those things affected.

If I put those lines in a separate stylesheet, everything worked perfectly fine again.

So it seems to me that for some reason IE just will not read more than around 4,500 to 5,000 lines in a stylesheet. It could perhaps also be total characters, however I didn’t test to find at exactly what point it stopped reading so I can’t be sure.  Fortunately, simply adding in an extra stylesheet did solve the problem, and given the nature of the extra CSS, it probably should have been done that way in the first place so that it could be loaded solely on the pages that actually need it. It should be noted that the total lines are still the same, they are just split between two stylesheets now, one of which is only loaded on certain pages.

I did a quick search for this but didn’t really come up with anything similar elsewhere, so if you have had a similar issue, I would love to hear about it!

It seemed to be consistently about the same place in both IE7 and IE8, so hopefully it won’t find it’s way into IE9.

John Bortolin Photographer

John Bortolin is a photographer based in Lennox Head that specialises in wedding photography as well as portraiture and landscapes. He looks after the photography for weddings all over the Northern Rivers region including Byron Bay, Ballina and Lismore. He came to me at TerraMedia with an existing static website that had been intended as an online showcase of his photography.

John Bortolin Wedding Photography
John Bortolin Wedding Photography Home Page

I revamped the website for him, cleaned up some of the design issues and produced a gallery system that is clean and efficient, showcasing his landscape, portrait and wedding photographs.

Continue reading John Bortolin Photographer

My Work Area

Over at Onextrapixel they have just done a showcase of the work areas of 88 designers. I was invited to include my work area, however, it was Good Friday that I received the invitation and being the Easter long weekend, I didn’t really get my act together in time. However, since I took a photo anyway, I figured I might as well put it up here.

My primary work area:

My Work Area
Where most of it happens.

Most of the work areas shown on Onextrapixel seem to me to have been tidied up before hand, this is mine though, how it is 90% of the time. I do every few weeks have a tidy up, but for the most part this is it, filing and everything.

The machines you see are as follows:

Macbook Pro

This goes everywhere with me and probably gets more use than the workstations! I love it and it is great for most purposes. It is a 15″ Unibody Macbook Pro with an Intel 2.4ghz Core 2 Duo and 4gb of RAM.

Mac Pro

My favourite machine of the lot and now my primary workstation, this is a beautiful computer to work on. It is an 8 core machine with 2x 2.8ghz Intel Xeon CPU’s with 8gb of ECC Registered Memory. The screen I’m using for it is a 23″ Samsung (beautiful screen).

This is the beast that does all the heavy lifting. All the big graphics jobs are done on this machine. It also has a Logitech Di Novo Keyboard for Mac (much nicer than the standard Apple wireless keyboards and feels a lot like the Macbook Pro keyboards) and Apple Magic Mouse (multi-touch for a desktop computer = awesome), so it’s just like using a Macbook Pro, but with more power than you know what to do with.

Windows 7

The third computer you see is my old workstation which is now running Windows 7. I haven’t gotten rid of it yet simply because it is still a nice computer. It’s running a 2.4ghz Intel Core 2 Quad (Q6600 from memory) with 4gb of RAM, so it is still quite fast, even faster now with Windows 7. It’s complimented with dual 19″ Samsung LCDs.

I use it primarily for email management and testing on Windows. I do run Windows virtual machines on both my Mac’s, but sometimes it’s just quicker and easier to use this computer. It is also where most of the games are played (when I occasionally have time to play them).

What else is there?

Hidden in the recesses under the desk is also a Thecus N4100Pro NAS which handles data and most of the backups for all the computers. You’ll also see I have lots of filing and an Epson Multi-Function Printer. I did have a whiteboard, but I honestly don’t know where it is. I put it somewhere before I went on holidays over Christmas. It’s now MIA. Kicking around on the desk somewhere is an 8 port Ethernet switch, 4 port Ethernet Gateway and an Airport Express. There are cables everywhere beneath the desk – it’s a bit of a nightmare, especially considering there is also a NAS and a few UPS’s down there!

So that’s pretty much it, my work area. Ideally I want to put in another desk and move the Mac Pro to it and set it up with a better drawing space. As you can see my current drawing area is fairly limited and requires me to move keyboards before I can do any drawing.

I do have to admit, I like the idea of a minimalist style workspace, but there is just no chance of it happening, there is just too much that has to go somewhere in my work area!

Where else do I work?

One of my favourite places to work is actually on the sofa on my upstairs balcony. I love it up there. I take the laptop up there for a few hours at least once a day. It’s an excellent change of pace and results in some excellent design ideas. I’m thinking about starting a YouTube channel for TerraMedia which will probably be filmed on my balcony.

What do I do with all those computers?

As you may know, I am primarily a web designer. I own TerraMedia, a web design and development business where I specialise in Drupal websites and Drupal theming. My clients include small, sole trader businesses such as myself through to medium sized companies and online enterprises including e-commerce websites and online communities.

You can find me on Twitter at the following accounts:

Or you can find my on my other websites at:

Finding The Path To Your Drupal Theme

Ever needed to reference a file in your Drupal theme? For example, an image from your page.tpl.php file, or a JavaScript file?

You can hard code the path, which might be something like:

/sites/all/themes/mytheme/images/myimage.jpg

Or, with a little bit of PHP, you can use Drupal’s built in path_to_theme() function. This function will print out the path to your Drupal theme from the root directory.

So, in your theme you might have this image, but instead of writing:

<img src=”/sites/all/themes/mytheme/images/myimage.jpg” alt=”My Awesome Image” />

You could write:

<img src=”/<?php print path_to_theme(); ?>/images/myimage.jpg” alt=”My Awesome Image” />

At first glance it is slightly longer and might seem like more effort to do. Think of it a bit differently though. What if you want to rename your theme, or use your theme on a different domain name? You will need to change the hardcoded path. By using Drupal’s path_to_theme() function, it will dynamically figure out the path to your theme directory for you.

We can then take this a bit further with Drupal’s base_path() function. This particular function returns the path to the base Drupal installation. If you have it installed in the root directory of your hosting account, then this will simply be a /.

The real benefit of this is if your Drupal installation is in a different directory. For example, /drupal. If this is the case, then your hard coded path would be /drupal/sites/all/themes/mytheme/images/myimage.jpg the path_to_theme() function will still only return /sites/all/themes/mytheme though, and the browser will not be able to find your image. The reason for this is that it only determines the path from the base installation directory of Drupal. So, to make sure your theme is truly dynamic and capable of dealing with this, you would use something like this:

<img src=”<?php print base_path() . path_to_theme(); ?>/images/myimage.jpg” alt=”My Awesome Image” />

Now if you have Drupal installed in a sub-directory called Drupal, this would actually return the full path we need: /drupal/sites/all/themes/mytheme

One thing to remember if you use this is that the path_to_theme() function doesn’t put in a trailing / or start off with a / so you will need to put these in before adding in the rest of your files location. Comparatively though, base_path() does add a / both before and after the path. So if you use it, you will not need to prefix it with a /.

This works in Drupal 5 and 6, and I believe is going to continue to function the same way in Drupal 7, so your themes will be all set to work on any server without needing to adjust the file paths. Give it a try!

You can also have a look at these functions in the Drupal API documentation:

Don’t Settle For Less

I get emails from a website called Service Seeking when there is a job listed that is related to my field of work, specifically web design. I have practically given up on it though as there seem to be a number of firms on there now that come in with quote on under $1000 on pretty much every job, including jobs that I cannot see any way possible to do for under $6000 unless those working on it are paid around the $2 an hour mark. It’s just not possible.

I find firms that offer quotes like this to be degrading, they devalue the job and the designer. The brand image should be an important part of any business. A business should be willing to recognise that they need to spend money to get a job done well. Once it’s devalued, it can be difficult to help customers realise that our time as designers is valuable, that we are in control of how their business looks online and that subsequently if we are undervalued, we cannot make their business look good.

There was one new job listing posted today that reads:

“Hi, I am currently in the process of putting together my own … business and as I am still in the researching stage I am just simply after quotes so that when I am ready to hire in a few months I know exactly who to call. I am after a company that can build my … site exactly to my needs, be easy and helpful to work with, fast and can also host my website for me. I expect to pay no more then $1000 if not less and would like my website to be put together in a couple of weeks as when I am ready to go I want to get up and running asap.”

I’ve edited out a couple of points that may make this business identifiable, but what they are asking for here is pretty unrealistic. Part of one point that I had to remove is that they are after e-commerce functionality as they need to be selling things online. They want it for under $1000 AND done in a matter of weeks. Basically it’s a case of wanting the world for nothing, which is becoming all too common in web design. Let’s break it down and look at it more closely.

Let’s say we use Drupal for the content management system on this project with Ubercart handling the e-commerce side of things.

  • Installation of Drupal with Ubercart and other required modules could be done in about half an hour.
  • Customisation and testing of Drupal, Ubercart and other settings could take anywhere from an hour upwards. In my experience it averages at 5-10 hours.
  • Setting up and testing Ubercart with PayPal could take half an hour to an hour.
  • Doing up the graphics for a design with a customer that sounds like they are going to be picky could be anywhere from 2 hours to 15 hours.
  • Converting the graphic design to a Drupal template using another template such as Framework to form the basis of the design could be 5 to 15 hours as well depending on complexity of the design, not to mention ensuring that it suits the e-commerce side of things as well.
  • Consultation times, could vary from 1 to 10 hours.
  • Miscellaneous extra 1 to 15 hours.
  • Total minimum: 15 hours work.
  • More likely minimum: 40 hours work.

At an average rate of $85 per hour, that’s an absolute minimum of $1275, but more likely $3400. That’s still a cheap e-commerce website, and costs more than 3 times the amount they want it for. Most e-commerce sites that I have worked on have been around the 50-60 hour mark or higher. By devaluing the market, clients don’t realise just how much they need to invest in this sort of thing.

Compare it to radio or TV advertising where advertisers will unquestioningly pay $5000 upwards on advertising campaigns, many looking at over $20,000 for one campaign, it’s a big difference, especially considering your website is advertising for you 24/7 compared to your TV or radio advertisement that’s only 30 seconds or so here and there!

One thing to keep in mind is that you always get what you pay for and you certainly cannot get the world for nothing. Don’t get me wrong, there are some quality designers that have specials and do quality work for cheap. In the end though you need to analyse what you need and be prepared to pay for it. You don’t have to pay top dollar, just ensure that what you are paying for is what you really want.

A final example to leave you with. I had one client previously whom I quoted for. They decided to go with another group who quoted them about a fifth of what I did. After the other group completed the website, I thought I should point out to the client the (numerous) accessibility issues with any non-IE7/8 browser. By the time they had paid the other group to get everything right, they ended up paying more than what I had quoted them in the first place, so paying a bit more to start off with would have saved them both time and money, and potentially saved them on any damage to their reputation that the poorly designed website could have caused.

Investigate your options and make an informed decision, don’t just go with what seems to be the cheapest.

CSS Clip Property

I recently came across the clip property on the Web Designer Wall, it’s a property I’ve not heard of before, probably because I’ve not really had a need for it, but now that I know what it does, there are so many things it would save time with!

The example below is an excerpt from the Web Designer Wall:

.clip {
 position: relative;
 height: 130px;
 width: 200px;
 border: solid 1px #ccc;
}
.clip img {
 position: absolute;
 clip: rect(30px 165px 100px 30px);
}

How it works is you have a surrounding element, such as a div or li which sets the overall width and a border which gives the appearance of masking the image. It also sets the position of relative so that on the img tag, we can absolutely position it within the outer element.

The img tag is then set to position: absolute; with a clip property that clips the image to a rectangle shape (so it can also be a square).

The uses of this property are potentially huge, especially for image galleries, and you can also resize images by specifying the width and height on the img tag. Perfect for a gallery, as long as the images you are scaling aren’t huge, you don’t want images that appear small ot take a long time to load after all!

The big downside of this is that according to the SitePoint CSS reference, Internet Explorer up to and including version 7 do not fully support it, so you may need to use a variation on the syntax especially for Internet Explorer. The way I understand it,  you just need to use spaces instead of commas in the rect() syntax for Internet Explorer, but I haven’t had a chance to test this yet to be sure.

Even if it doesn’t work fully in Internet Explorer, you could easily implement it in a way that will gracefully degrade in IE.

I’m looking forward to using this property, have you used it on one of your sites? I’d love to see how you’re using it, let me know in the comments!

Experimenting with Landing Pages

At TerraMedia, I am currently working on an interesting project. That is, I am working on pushing the website up in search results for a number of different regions.

One of the ones I am working on at the moment is users searching for  web site design and related services in the Byron Bay region. If you do a quick search in Google for “web design Byron Bay” or “Byron Bay web design” or similar, TerraMedia cannot be found on the first page of results. The home page of TerraMedia is visible on the second page in the case of both those queries, but we would like it high up on the first.

There are a couple of places to start here, the first is to update the home page to more specifically target Byron Bay, or, to create a landing page which is optimised for Byron Bay searches. We don’t really want to adjust the home page too extensively as it is currently placed quite well for a number of other regions, so we decided to begin with landing pages, starting with Byron Bay.

To start off with, I have setup a new page on the TerraMedia web site that has all of the keywords we are looking for in both the page title and the page address. The page that I have set up is located at http://terramedia.com.au/web-site-design-services-byron-bay and uses some new copy that is based on copy used in other sections of the website combined with some newly written information to help target potential Byron Bay clients.

A sub-domain or domain that is specifically relevant to these terms may be easier to rank higher, but at the same time, they would lose the benefit of being on the terramedia.com.au domain and could confuse the user in the case of a completely different domain name. Wouldn’t you be confused if you went from say “websitedesignservicesinbyronbay.com” to “terramedia.com.au”? That domain is an exaggerated example and is much too long, but I’m sure you can see how it could get confusing.

Now that the page is created I will be developing links to it and marketing it through our Facebook page and Twitter account.I want to get twitter followers for our page to see how it goes. The aim is then to push this page up in search results specifically regarding web site design in the Byron Bay region.

Template Work

As I am currently working on the new WordPress template for this blog, the design is quite regularly becoming unusable with numerous broken sections as I am testing.

Please feel free to continue browsing the website, and please bear with me in the mean time, once it’s all finished it will look very schmick, just like the template designs I put together previously, but with some new refinements to make it even easier to use, and look even better. To maintain a reasonable level of usability as much as possible, I will be switching back to the “Classic” WordPress theme when I am not working on the template.

Thanks for your patience, have a good one!