Archive

Archive for March, 2009

Website Redesigning

March 18th, 2009 No comments

If you run a website, chances are you often wonder whether it is the right time to do a total redesign of the layout of your website. Here are some points to consider:

Are you thinking of a redesign just for the sake of it? If you answered yes to that question, it is not yet the right time to do a redesign. Remember, a design serves a specific purpose. If you are not sure whether to do an overhaul of your site, keep in mind that your current design might have a specific purpose that you might not know about. You will lose that function if you do a redesign.

On the other hand, if your website has had the same website design since 1990, perhaps it is high time to do a redesign. The last thing you would ever want to happen to your site is when visitors leave your site without taking a look at your content just because the design is old fashioned. If this is your case, here are some points to ponder before doing a redesign.

Redesigning your website is like performing plastic surgery on it. Your website loses its current identity (for the better or worse) and your regular visitors might not recognise your new design at first glance. You risk losing them just because they thought they landed on the wrong page. Hence, it is very  important that you retain a characteristic feature from your old layout. Perhaps it is the logo of your site; perhaps it is the same text style for the title for your site.

To play it safe, put a poll on your site to let your visitors do the talking. If they think it is necessary for the website to have a fresh look, give it to them!

Categories: Website Design Tags:

5 Simple Ways to Improve Web Typography

March 17th, 2009 No comments

Type is one of the most-used elements of the web. Think about it. Unless you are YouTube or Flickr, chances are your site visitors are coming for your text content – not the fancy packaging that surrounds it. So why are web designers still treating text like a secondary element?

Good typography brings order to the page and increases legibility. It allows people to process information faster.

A more scannable, readable site means happy visitors. Happy visitors return often, buy products, leave comments, and share the site with friends. See why it might be worth thinking about?

I could blather on forever about how far typography has come on the web, and how far yet it has to go. I have frequently bounced between web and print design. When you’re going from InDesign to TextMate, the limitations of web type are crystal clear.

But plenty has been said about what web type can’t do. This isn’t going to be another rant. Instead, let’s focus on a 5 easy fixes for the typographic eyesores that abound across the Web.

1. Use A Reset Stylesheet

Stupid, but true: No two browsers use the same presentation defaults. Differences in padding, margins, headings, and indentations are rampant. If you want your page layout to be more consistent across browsers, it pays to start with a CSS Reset stylesheet.

Use a reset stylesheet for better web type.

Two I recommend:

Yahoo’s CSS Reset Stylesheet
Eric Meyer’s CSS Reset Stylesheet

2. Watch Your Measure

Measure refers to the length of a single line of type. A longer line = a longer Measure. Studies have shown that for optimal readability, running text columns such as your main body copy should be somewhere between 45 – 75 characters (30 – 50 ems) including spaces. This is one of the reasons that fluid designs (ones in which the columns expand and contract to fit the browser width) are harder on the eyes.

Additionally, your leading should increase with the length of your Measure. Leading is the amount of white space between lines of text, and is controlled via the CSS line-height property. If you need to use an extra-long Measure, make sure your leading opens up.

Likewise, if you have a small column such as a sidebar with a short Measure, your leading should be tighter. I find the default value most browsers assign is a little too tight. A line-height of around 1.4em works well for most body content.

3. Tend To The Space Between

It’s not just about your text – its about the space that surrounds it. Too little space makes text hard to read, but so does too much. The key is to find a simple balance that guides the eye from one element to the next.

 

One of the common mistakes new designers make is to fill every inch of space. White space refers to the empty or “negative” space around your content, and it is crucial. Take a look at a well-designed magazine such as Dwell or Good and you’ll see that even though it costs the publisher money to print each page, they leave abundant amounts of white space around the text. The page will be in balance and your eye will move from space to space effectively.

In addition to adjusting your line-height (as mentioned in #1), try increasing your padding and margins. Unless you’re trying to pull of a crazy visual trick, there should always be a good amount of white space around your text. Don’t let it butt up against other elements, especially images. Let your content chunks (headings, paragraphs, sidebars, etc.) breathe.

Mark Boulton wrote a very informative article about White Space for A List Apart, check it out.

4. Don’t Go Font Crazy

A good rule of thumb for any designer is: use no more than two font faces in your design. Two font faces can look very stylish. A List Apart uses variations of Georgia and Verdana to create an elegant and polished look. But continuing to add font faces to your interface creates unnecessary confusion. Similarly, avoid using too many font sizes, colors, or treatments on a page or in a paragraph or they will compete with each other instead of adding emphasis as intended.

Although font stacks and technologies like sIFR and Typeface.js allow you to specify just about any font you want as the default, resist the temptation to go wild with the body copy. Decorative fonts are best kept to headlines because they affect readability. Think about it – when is the last time you picked up a paperback novel set entirely in Comic Sans?

When creating font stacks, pay attention to the size of your pairings. Some fonts that look similar render at very different sizes. Verdana and Arial are a great example of this. Typetester is a great tool for comparing core web fonts and creating a successful stack. Another useful tool called Font Stack Builder shows you what percentage of users will see each variation.

Regardless of what fonts you decide to use, make sure they are not teeny tiny. I know its hard… tiny text looks cool. But think about the poor, squinting users! Keep body text above 10 or 12 pixels. If you insist on teeny tiny, at least use relative sizing for all those IE 6.0 users who otherwise couldn’t make it larger. Read Wilson Miner’s article on font sizes for a great take on the debate.

5) Don’t Neglect The Details

The client provided the content. Adding it to the site is just a matter of copying and pasting, right? Wrong, wrong, wrong. This is a trap web designers fall into all too often.

Even those of us who diligently add heading tags, format each paragraph and organize bulleted lists with care forget some important typographic details. Many (including me) missed out on formal typography training, so you can’t blame us entirely. But the devil is in the details. Its time we embrace these basics:

Use smart quotes

What’s the difference between smart quotes and dumb quotes? Smart quotes (also known as book or curly) are curved and have both an opening and closing style. Dumb (straight) quotes are usually straight up and down. An apostrophe is typographically just a single quote so the same problem applies. A dumb quote (also called a prime) should only be used between measurements. For example, 6?4? uses double and single prime quotes.

 

Unfortunately our keyboards default to prime quotes. Microsoft Word and other text editors just correct them for us as we write. Adding smart quotes to HTML pages requires more work from the web developer because you need to use markup to produce opening and closing quote symbols. I see the same problem with em and en-dashes, ellipsis, trademark and copyright symbols. Coders take the easy way out by replacing them with hyphens, multiple periods, a large TM and the infamous (C). Using the right symbols does make a difference visually. Do it right and make editors everywhere smile.

How to make smart quotes:

#8216; = opening single quote
&#8217 = closing single quote
&#8220 = opening double quote
&#8221 = closing double quote

I know – no one wants to spend all day hunting down quotes. Luckily, tools like SmartyPants and Textism can do much of the legwork for you by automatically formatting text that includes smart quotes and the like.

Read “The Trouble with EM and EN” from A List Apart for more detail on the subject and the UTF-8 character encoding for most common special characters.

One caveat – lots of CMS text editors (like the one this site uses) won’t let you implement smart quotes without extra plugins. Sad, but true.

Stop putting two spaces after a period. Please! It’s not necessary and its actually rather annoying.

On your links, use border-bottom: 1px solid instead of text-decoration: underline. Underlines can run through the descender characters (g, j, p, q, y) making them hard to read, especially when using smaller font sizes.

And while it has nothing to do with typography, running a quick spell check never killed anyone. Even if all you did was copy and paste, a spelling error that slips through to a live site reflects badly on everyone involved.

Pay attention to those 5 fixes and your site designs are sure to improve. Remember that these are just a starting point. Good typography is a learned skill just like anything else, and it requires study and practice. Always keep an eye out for sites that are getting it right and make note of what they are doing. Need inspiration? Check out the sites below for examples of great web typography and post examples you find to be inspirational.

Top Five Web Design Tools

March 17th, 2009 No comments

Just like in most other professions, a web designer’s set of tools is what brings a concept into fruition. There are many applications available to our disposal, but there are some that just stand out from the crowd. The tools in this article are what’s regarded as the most popular tools used for web design.

Last week, you were asked to vote on what you thought was the best web design tool. Close to 280 of you shared your opinion on what the best web design tool is.

In this article, you’ll find the five web design tools that garnered the most votes.

5. Fireworks

Adobe Fireworks is a commercial raster and vector graphics editor hybrid from Adobe that’s available for the Mac and Windows operating systems. Designed specifically for web designers (unlike Photoshop), Fireworks brings you a plethora of tools and options that make full web layout prototyping a breeze.

Among its notable features are: "slices" for slicing and dicing a design mockup into HTML/CSS for rapidly creating prototypes (though you should avoid using auto-generated source code for the end-build), the ability to package an entire site design as a PDF with clickable components for interactive and impressive site prototypes, and optimization tools for making your web graphics as lightweight as possible.

FIREWORK

4. Dreamweaver

Adobe Dreamweaver is a commercial application for web development that’s available for the Mac and Windows operating systems. Its featured-packed suite of tools and options include: syntax highlighting and very smart Code Hinting, a built-in FTP client, project management and workflow options that make team work effortless, and Live View – which shows you a preview of your source code. Dreamweaver tightly integrates with other popular Adobe products such as Photoshop, allowing you to share Smart Objects for quick and easy updating and editing of graphics components.  

 

Dreamweaver

3. Panic Coda

Panic Coda is a shareware web development application for the Mac OS X operating system. It seeks to reduce the amount of applications (such as an FTP client, CSS editor, a version control system, etc.) you need to develop websites and to improve your team’s workflow. Coda’s one-window web development philosophy uses a tabbed interface for text editing, file transfers, SVN, CSS, and even "Books" which embeds web books that are searchable (it comes with The Web Programmer’s Desk Reference but you can add your own).

It’s simple and intuitive interface allowed Coda to garner the Apple Design Awards Best Mac OS X User Experience in 2007.

2. Photoshop

Adobe Photoshop is a very popular commercial graphics editor available for the Mac and Windows operating system. Created for professional photographers and designers, it is the ideal application for manipulating images and creating web graphics. Photoshop has all the necessary tools and options you need such as: Filters – which automatically adds effects to your image or a selected section of your image, extensibility and automation with Brushes, Actions and Scripting, and workflow enhancement features like Layer Comps and the Revert option.

1. Firebug

Firebug is a free, open source in-browser web development tool for the Firefox web browser. It’s many features include: on-the-fly HTML and CSS editing for tweaking or debugging, a Console for logging, analyzing and debugging JavaScript, and an intuitive Document Object Model (DOM) inspection tool to help you quickly see how the elements of a web page relates to one another.

Firebug’s popularity is so immense it’s one of the few Firefox extensions that have its own extensions (like YSlow and FirePHP)!

Categories: Webmaster Tools, Website Design Tags:

Floats, CSS, Divs, the Refresh Button, Firefox, and Frustration

March 17th, 2009 No comments

WordPress is a funny beast, really it is.  Usually, building a WordPress site involves something like digging through a hundred pages of templates until you find one that’s merely passable.  Once you do, you grab it and start hacking away at everything to make it your own – CSS, HTML, everything.  And it’s fine.  Really, it is – the internet’s built on sharing ideas.  The problem appears once you start inheriting other people’s problems.  In this case, I had to hit the refresh key just to get my divs to float correctly.

The thing with using a tableless design is that people tend to create an outer division to put other inner divisions into.  Usually this looks like a main content box with two columns in it, which is what I had.  In order to get those columns to line up side by side, you tell the css of those divs to float:left;.  Here’s where we inherit the problem, however.  When I visit the page for the first time, or reload the page without using the cache, the floats start clearing one another, even though I have never set a clear css property on either of the divisions.  (If you don’t know what I mean by “clearing”, imagine you want to put two columns side by side, and instead they stack on top of one another.)  The whole ordeal was rather frustrating, until I noticed one thing.

The outer, main content division had a property from before I started editing the css.  The outer div was set to display:table;.  I don’t know if it’s a bug, but the issue remains:  If you have an outer div set to display:table, the inner divs will clear each other regardless of how you float them. The solution?  I didn’t need the outer div to act like a table, so I just removed the display:table; property and now all is well.

I don’t know if you’ll be able to remove the display:table; property from your outer div, but you’ll have to find a way around it if this problem occurs in Firefox for you.  I hope this helps someone track their problem down.

Why You Want To Be A Craftsman Instead Of A Cowboy

March 17th, 2009 No comments

There has been a bit of a code war going on or at least a some what heated debate on code quality and programming principles.

I’m not going to rehash everything but I will sum up the two sides and throw my opinion into the ring. Why does my opinion matter? I’m not so sure that it does but you can be the judge of that. What I do think is different about my opinion than the opinions that I have heard/read so far is that I can’t place myself in either camp. I am not a coding cowboy that just cares that “it works” and I am not a bureaucratic standards Nazi either. I’ll talk a bit more about why I am ducking for cover in no man’s land in this battle of opinions.

The Coding Cowboys Say
Jeff Atwood and Joel Spolsky sure hit a sore spot when they suggested that learning programming principles just wasn’t worth it and just getting it done was more important.

Jeff likened principles and guidelines to the Ferengi and their 285 Rules of Acquisition saying that every situation in programming cannot be governed by a set of rules and there isn’t a one size fits all pattern to solve everything.

Joel refers to the SOLID principles as “extremely bureaucratic programming that came from the mind of somebody that has not written a lot of code.”

The Craftsmen Say
Jeff and Joel’s comments sparked a lot of rebuttals from the ALT.Net community. It is understandable since those comments attack the very foundation of TDD and DDD. I am not going to bore you with a list of everyone that chimed in but I want to highlight a post that I think sums up this position in a clear and nice way.

Justin Etheredge made a great post is response to the criticisms. I have been reading Justin’s blog for a while and I like the way he views software. He likens software development to carpentry and woodworking, both are a learned craft. You don’t get good a carpentry by throwing things together and ignoring building codes. Patterns and principles are like building codes.

My View On The Whole Thing
I was a bit surprised at first to hear Jeff and Joel’s comments because they are some smart guys that have produced some successful software. I highly doubt, regardless of how it came across, they intended to imply that you should ignore all guidelines and just string together your code. Unfortunately, the comments of their posts make it all too clear that this is exactly the way a lot of programmers took it. What’s worse is bad programmers will use this as a defense for their resistance to improving their skills.

Like I said, currently I am somewhere in no man’s land. For too long I had the mindset that would take Jeff and Joel’s comments and use them as an excuse to ignore patterns and principles. From the beginning of my education in software development, no importance was placed on “good design.” My college training only focuses on teaching the syntax and considering that “knowing” the language.

After a few years of living in denial, I had to accept that their was far more for me to learn and I began my journey out of the cowboy coding camp and started striving to develop software in a TDD manner. I still have a lot to learn but facts cannot be ignored. Since making an effort to improve my craft I have seen a significant drop in the amount of bugs found in new software I am producing and the bugs that are found are smaller and much similar to solve. So that is my take on the whole thing and I hope that this at least peaks someone’s interest to dig a little deeper in regard to becoming a craftsmen and taking pride in the code they produce

* Hat tip to Scott Schiller for pointing out this older, but somehow forgotten post.

Categories: Designing, Softwares Tags:

Going full circle: could falling back to Flash solve IE’s lack of canvas support?

March 17th, 2009 No comments

There is an interesting blog post* and demo code on Azarask explaining Flash Canvas as a solution for IE’s lack of support for Canvas:

    How does FlashCanvas work?

    FlashCanvas is modeled after ExplorerCanvas which means it is a turn-key solution for adding Canvas support to IE. You can code away, happily using open standards and then use FlashCanvas to forcefully and silently upgrade IE to also being standards compliant.

    There are two main components in FlashCanvas: the base FlashCanvas.swf flash file (a mere 688 bytes), and the FlashCanvas.js wrapper. I’ve used the excellent swfobject.js to embed the Flash into the page.

    The FlashCanvas.js file implements a fake-canvas object and converts all existing canvas element into a flash object. The javascript intercepts canvas commands and forwards them to the FlashCanvas.swf movie file using the ExternalInterface provided by the flash player. The flash movie clip then interprets the command and draws accordingly.

Aza originally thought that this would also solve the performance problems other fallbacks to VML have but found out that sadly enough this is not the case because of the lag between ActionScript and JavaScript via ExternalInterface.

    Each call via the ExternalInterface is taking approximately 0.5 ms. Since we know the time it takes to call an actionscript method from javascript, we can deduce the amount of time it takes for Flash to render. For the example1.htm page it takes ~24 ms to render 20 anti-aliased lines. In Safari a call into actionscript takes roughly 0.4 ms — this is only the call time, it doesn’t include the time to render anything. For example1.htm a single “particle” calls actionscript 3 times with the commands: [lineStyle,moveTo,lineTo]; each particle takes 1.2 ms in JS-to-AS calls; to take 1 second to render the frame ~833 particles need to be rendered.

There are few more ideas in the comments to the article and this might be an interesting concept to take further. Somehow it seems ironic to go back to Flash to make IE render standards, but then again VML is proprietary, too.

Categories: Webmasters Resources Tags:

WordPress 2.7 Launches – Coltrane

March 17th, 2009 No comments

WordPress has released a new version of their popular blogging platform. WordPress 2.7 or “Coltrane” main new feature is an overhauling of the backend user interface of the software. Since the last redesign of the WordPress interface in version 2.5 many users had been vocal with their dissatisfaction with the design and layout. It’s too early to say now but so far there have been nothing but praises for the new interface and new features such as sticky post – which allows bloggers to to “stick” a post to the top of their blog no matter it’s post date.

word

A very informative video was also released with wordpress 2.7 that details it’s new features, the inspiration behind the changes and much more.

Categories: Webmaster Tools Tags:

Real time Traffic Statistics And Analysis From FeedJit

March 17th, 2009 No comments

You probably noticed “Live Traffic Feed” widget that I have in the right sidebar and today I took a deeper look what else I can get from it… Turned out this little widget is quite more powerful than it looks from outside.

In the basic view FeedJit display visitors in real time with the link to the referring page so you can check who sending you traffic right from your front page. If you click on “Watch in real time” link on the bottom of the widget it will forward to the FeedJit website where you can see more extended results.

For example if visitor was referred by the search engine – there will be exact search term he used to find your site. Also it shows browser and operating system visitors are using and if they left your site by clicking on one of the links – you’ll see which link it was. Two more options – visitors map and statistics for most popular pages.

This little widget could be a very nice analytical tool but the drawback is – it does not provide any historical data. All you can get is real time 20 or so results. If at some point developers decide to add some historical traffic results it can be very useful tool, probably even better than Google analytics which is far from being accurate.

Good thing I noticed – this widget loads very fast (much faster than Digg of Feedburner) and does not affect speed of your pages. Everything is external – all you do is insert small code snippet (can use sidebar text widget).

So if you want to have some fun watching who is knocking in the door and how they found you – go check out FeedJit.com and let me know what you think of it. Widget is free to use and does not require registration.

 

feedjit

Have something to say regarding the subject in my post? Post your comment and I will be happy to thank thank most active commentators with direct link!
Did you learn something new today or like my point of view? Subscribe to my full RSS feed in the your favorite reader or get new posts delivered by Email directly to your inbox.

Categories: Webmasters Resources Tags:

Magento Installation Guide for Dreamhost

March 17th, 2009 No comments

I’ve been watching the Magento e-commerce project for about the last month and a half – since Ben sent me a link to it. It’s an open-source e-commerce package, that primarily aims to pickup and improve where OSCommerce, Joomla + VirtueMart, and ZenCart have left off – streamlining a CMS (Content Management Sytem) and E-commerce shopping cart. This also means built-in SEO (Search Engine Optimization), Google Checkout integration, varied customer groups, and much more…. straight out of the box. The problem appears to be that there are a lot of people on the Magento forums who are running into problems, and don’t have a clue on how to get it running under their Dreamhost hosting account. Unfortunately it also looks like the previous article(s) for Magento+Dreamhost installs have disappeared, or are outdated. And that’s where this article comes in…

If you just so happen to be one of those whining idiots, or clueless n00bs, then you’re in luck! I’ll take you through a step-by-step process of installing Magento on your Dreamhost account. But please be forewarned: This requires some “advanced” techniques, so if you don’t know what Putty/SSH or a command-line are, then STFU and GTFO, n00b. Just kidding. Hopefully I can explain those things too, and increase your knowledge. In fact, it may even get you laid! But probably not.

   1. Step 1 – Dreamhost: Create domain
      Obviously we need a domain to work with here. I’ll be using ‘magento.webinade.com’ as my test domain. Be sure to set it up to use PHP5, that’s a Magento Requirement.

Step 2 – Dreamhost: Give User Shell Access
We need to have shell access in order to connect to the command line and configure magento. In the Dreamhost Control Panel, go to Users > Manage Users and then click Edit next to the user you chose for your domain. It should take you to a screen like this, where you can set the Account Type to Shell Account. Step 3 – Dreamhost: Create MySQL Database
We need a MySQL database setup for Magento prior to the install. Magento stores data and configuration settings in MySQL. In Dreamhost go to Goodies > Manage MySQL. Then scroll to the bottom to set up a new database. If this is your first database, you’ll also want to set up a hostname – typically something like mysql.yourdomain.com will work. Step 4 – SSH in to Server
And now the fun begins. Let’s start by SSH’ing into Dreamhost. If you don’t know how to do this, go download Putty if you’re on a Windows machine. Open it up. Type in the domain you’re hosting magento on (magento.webinade.com in my case), make sure the Port is set for 22, and connection type is SSH. You will then be prompted for a username and password. Type them in (don’t be alarmed if you don’t see anything when typing your password). If you are successful, putty will return something along the lines of ‘[server_name]$’ like in the picture below. You’re now logged into the command line of your Dreamhost linux server. Step 5 – Download Magento from Linux Command Line
Now that we’re logged in, we need to download Magento. To do so, type the following command:
wget

I’ve been watching the Magento e-commerce project for about the last month and a half – since Ben sent me a link to it. It’s an open-source e-commerce package, that primarily aims to pickup and improve where OSCommerce, Joomla + VirtueMart, and ZenCart have left off – streamlining a CMS (Content Management Sytem) and E-commerce shopping cart. This also means built-in SEO (Search Engine Optimization), Google Checkout integration, varied customer groups, and much more…. straight out of the box. The problem appears to be that there are a lot of people on the Magento forums who are running into problems, and don’t have a clue on how to get it running under their Dreamhost hosting account. Unfortunately it also looks like the previous article(s) for Magento+Dreamhost installs have disappeared, or are outdated. And that’s where this article comes in…

If you just so happen to be one of those whining idiots, or clueless n00bs, then you’re in luck! I’ll take you through a step-by-step process of installing Magento on your Dreamhost account. But please be forewarned: This requires some “advanced” techniques, so if you don’t know what Putty/SSH or a command-line are, then STFU and GTFO, n00b. Just kidding. Hopefully I can explain those things too, and increase your knowledge. In fact, it may even get you laid! But probably not.

   1. Step 1 – Dreamhost: Create domain
      Obviously we need a domain to work with here. I’ll be using ‘magento.webinade.com’ as my test domain. Be sure to set it up to use PHP5, that’s a Magento Requirement.

Step 2 – Dreamhost: Give User Shell Access
We need to have shell access in order to connect to the command line and configure magento. In the Dreamhost Control Panel, go to Users > Manage Users and then click Edit next to the user you chose for your domain. It should take you to a screen like this, where you can set the Account Type to Shell Account. Step 3 – Dreamhost: Create MySQL Database
We need a MySQL database setup for Magento prior to the install. Magento stores data and configuration settings in MySQL. In Dreamhost go to Goodies > Manage MySQL. Then scroll to the bottom to set up a new database. If this is your first database, you’ll also want to set up a hostname – typically something like mysql.yourdomain.com will work. Step 4 – SSH in to Server
And now the fun begins. Let’s start by SSH’ing into Dreamhost. If you don’t know how to do this, go download Putty if you’re on a Windows machine. Open it up. Type in the domain you’re hosting magento on (magento.webinade.com in my case), make sure the Port is set for 22, and connection type is SSH. You will then be prompted for a username and password. Type them in (don’t be alarmed if you don’t see anything when typing your password). If you are successful, putty will return something along the lines of ‘[server_name]$’ like in the picture below. You’re now logged into the command line of your Dreamhost linux server. Step 5 – Download Magento from Linux Command Line
Now that we’re logged in, we need to download Magento. To do so, type the following command:
wget http://www.magentocommerce.com/downloads/assets/0.8.16100/magento-0.8.16100.zip

That should download the 0.8.16100 beta version of Magento to your home directory, and should look like this:
Step 6 – Unzip Magento & Move it to the Live Domain
Run the following command to unzip Magento. You’ll get several hundred lines, telling you which files it is extracting where. It should extract everything into a folder called magento.
unzip magento-0.8.16100.zip

Run this command to move the contents of the magento folder into your live site:
mv magento/* magento.webinade.com/
mv magento/.htaccess magento.webinade.com/.htaccessObviously replace magento.webinade.com with the folder your domain is in. You will not receive output from the above two mv commands, unless there is an error. It will simply return you to the command line. The commands and output should look similar to this:
Step 7 – Magento Install
Now that we’ve got the files extracted, and hopefully in the right folder, let’s load up the website. It should show a page like this:

To continue, agree to the license. The next page is localization information – defaults are good for most, but feel free to change these. The third page is for downloading updates to Magento. This is important, and this is where some problems often arise. You can ignore the first two section, SVN Installation & Package Management Through The Web. The third part of that page is what’s important. Open up putty again and type the following command, changing the name of the folder of course to match yours:
cd magento.webinade.com/
./pear mage-setup

That should produce some output similar to this:

Good! Now, the next line:
./pear install mage-core/Mage_Pear_Helpers mage-core/Lib_ZF mage-core/Lib_Varien

This should produce similar output:

Unfortunately, we can’t run the third line just quite yet. We need to change the PHP variable in the ./pear file. Right now it just makes a call to “php” on the system – which by default on Dreamhost is PHP4. Let’s modify the file with Midnight Commander – a file manager similar to that of the old Windows 95/98 or XTree Gold. We need to change it to reference PHP5. Run this:
mc

You’ll then need to navigate (with your arrow keys!) down to the pear file, and hit F4 to edit it. Scroll down to line 62 (again, with the arrow keys!). Line’s 61-63 will look like this:
else
PHP=php
fi

Change them to this:
else
PHP=/usr/local/php5/bin/php
fi

Hit F2 to save, agree. Then hit F10 to quit. All of the above should look like this:

Now we can run the third command:
./pear install mage-core/Mage_All mage-core/Interface_Install_Default

It should look like this now:
#

Unfortunately, that may update/overwrite the ./pear file we just modified. You’ll know if it does, when you try to run the next command:
./pear install mage-core/Interface_Frontend_Default mage-core/Interface_Adminhtml_Default

And you get an error saying “Permission Denied” or “No valid packages found.”
#

Step 8 – Rinse & Repeat (Fix Permissions on ./pear and Update Again)

If you get one of the above two errors (which you should), you’ll need to do two things. First, you need to change the file permissions on the ./pear file, like so:
chmod 755 ./pear

Second, you need to modify ./pear again to fix the PHP version it is referencing (like above). Run this:
mc

You’ll then need to navigate down to the pear file, and hit F4 to edit it. Scroll down to line 62 (again, with the arrow keys!). Line’s 61-63 will look like this:
else
PHP=php
fi

Change them to this:
else
PHP=/usr/local/php5/bin/php
fi

It’s not so bad. Just really annoying. I’m hoping the Magento guys will update the scripts in newer versions to run a check on the ./pear file, and hopefully carry over any modifications done to it. Or maybe make some of these configurations more “user friendly” or st00pid n00bs.

Now that that is done, we can run the last command and continue:
./pear install mage-core/Interface_Frontend_Default mage-core/Interface_Adminhtml_Default

Victory! Hopefully it looks like this for you:
Step 9 – Finish Magento Install
Now that is all done, we can continue on with the Magento install. Click the “Continue After Manual Download” button in your browser (You’ve still got your browser open, right?). Some of you may or may not receive an error here. I didn’t on my first install of Magento, but I did on my webinade test install. If you do, it may say and look like this:
Path "/home/.donald/magento/magento.webinade.com/app/etc" must be writable
Path "/home/.donald/magento/magento.webinade.com/var" must be writable
Path "/home/.donald/magento/magento.webinade.com/media" must be writable
Image:

Don’t worry! These are easy fixes. Run these commands at the command-line (in Putty):
chmod 777 ./app/etc/
chmod 777 ./var
chmod 777 ./media

Now click the “Continue” button in the browser and the errors should be gone. You’re now presented with a Configuration page, with all kinds of great MySQL settings and textboxes. Fill them in to match whatever you created you MySQL database with earlier. You’ll also want to check the box that says “Use Web Server (Apache) Rewrites” – this is good for SEO. You can check the Box for SSL URLs, but only if you have an SSL certificate installed and configured for your Dreamhost account. My page looks like this:

   9.

      Click Continue, and the next page will present you with form fields to setup your Administrator account as well as create an Encryption Key. Follow the instructions, fill in the boxes, and click Continue.
  10. Step 10 – All Done!
      You’re now done setting up Magento. Sit back, relax, crack open a cold beer (or bottle of wine), and let the gorgeous chicks flock to you. Maybe not?I suggest you login to the backend and start playing around. There is a lot of configuration that needs to happen before your store will go live, including customizing your own store design. There is a lot of great documentation available on Magento’s site, as well as a well populated forum, with several knowledgeable developers and supporters.

Please Note: Magento is in BETA! This means that you will more than likely run into problems, small or big. I don’t suggest running a live site on Magento until it reaches a stable release – hopefully by the end of March. Be sure to follow the forums.

And please don’t go whining on the forums, and posting ridiculous threads like “It’s broken! OMGz!!!!!!11!1” or “Magento doesn’t work! MY LIFE IS OVER! KILL ME NOW!” It doesn’t solve the problem. Others can’t help you, and you look like an idiot. Have some respect for the developers and supporters, and post knowledgeable threads, detailing what specifically doesn’t work. And please, please, please search the forums before posting. Odds are, someone else has had the same problem.

Feel free to post any questions or comments below. I’m always open to discussion and support. I’ll be playing with Magento over the next week, and hopefully will have a positive, thorough review.

That should download the 0.8.16100 beta version of Magento to your home directory, and should look like this:
Step 6 – Unzip Magento & Move it to the Live Domain
Run the following command to unzip Magento. You’ll get several hundred lines, telling you which files it is extracting where. It should extract everything into a folder called magento.
unzip magento-0.8.16100.zip

Run this command to move the contents of the magento folder into your live site:
mv magento/* magento.webinade.com/
mv magento/.htaccess magento.webinade.com/.htaccessObviously replace magento.webinade.com with the folder your domain is in. You will not receive output from the above two mv commands, unless there is an error. It will simply return you to the command line. The commands and output should look similar to this:
Step 7 – Magento Install
Now that we’ve got the files extracted, and hopefully in the right folder, let’s load up the website. It should show a page like this:

To continue, agree to the license. The next page is localization information – defaults are good for most, but feel free to change these. The third page is for downloading updates to Magento. This is important, and this is where some problems often arise. You can ignore the first two section, SVN Installation & Package Management Through The Web. The third part of that page is what’s important. Open up putty again and type the following command, changing the name of the folder of course to match yours:
cd magento.webinade.com/
./pear mage-setup

That should produce some output similar to this:

Good! Now, the next line:
./pear install mage-core/Mage_Pear_Helpers mage-core/Lib_ZF mage-core/Lib_Varien

This should produce similar output:

Unfortunately, we can’t run the third line just quite yet. We need to change the PHP variable in the ./pear file. Right now it just makes a call to “php” on the system – which by default on Dreamhost is PHP4. Let’s modify the file with Midnight Commander – a file manager similar to that of the old Windows 95/98 or XTree Gold. We need to change it to reference PHP5. Run this:
mc

You’ll then need to navigate (with your arrow keys!) down to the pear file, and hit F4 to edit it. Scroll down to line 62 (again, with the arrow keys!). Line’s 61-63 will look like this:
else
PHP=php
fi

Change them to this:
else
PHP=/usr/local/php5/bin/php
fi

Hit F2 to save, agree. Then hit F10 to quit. All of the above should look like this:

Now we can run the third command:
./pear install mage-core/Mage_All mage-core/Interface_Install_Default

It should look like this now:
#

Unfortunately, that may update/overwrite the ./pear file we just modified. You’ll know if it does, when you try to run the next command:
./pear install mage-core/Interface_Frontend_Default mage-core/Interface_Adminhtml_Default

And you get an error saying “Permission Denied” or “No valid packages found.”
#

Step 8 – Rinse & Repeat (Fix Permissions on ./pear and Update Again)

If you get one of the above two errors (which you should), you’ll need to do two things. First, you need to change the file permissions on the ./pear file, like so:
chmod 755 ./pear

Second, you need to modify ./pear again to fix the PHP version it is referencing (like above). Run this:
mc

You’ll then need to navigate down to the pear file, and hit F4 to edit it. Scroll down to line 62 (again, with the arrow keys!). Line’s 61-63 will look like this:
else
PHP=php
fi

Change them to this:
else
PHP=/usr/local/php5/bin/php
fi

It’s not so bad. Just really annoying. I’m hoping the Magento guys will update the scripts in newer versions to run a check on the ./pear file, and hopefully carry over any modifications done to it. Or maybe make some of these configurations more “user friendly” or st00pid n00bs.

Now that that is done, we can run the last command and continue:
./pear install mage-core/Interface_Frontend_Default mage-core/Interface_Adminhtml_Default

Victory! Hopefully it looks like this for you:
Step 9 – Finish Magento Install
Now that is all done, we can continue on with the Magento install. Click the “Continue After Manual Download” button in your browser (You’ve still got your browser open, right?). Some of you may or may not receive an error here. I didn’t on my first install of Magento, but I did on my webinade test install. If you do, it may say and look like this:
Path "/home/.donald/magento/magento.webinade.com/app/etc" must be writable
Path "/home/.donald/magento/magento.webinade.com/var" must be writable
Path "/home/.donald/magento/magento.webinade.com/media" must be writable
Image:

Don’t worry! These are easy fixes. Run these commands at the command-line (in Putty):
chmod 777 ./app/etc/
chmod 777 ./var
chmod 777 ./media

Now click the “Continue” button in the browser and the errors should be gone. You’re now presented with a Configuration page, with all kinds of great MySQL settings and textboxes. Fill them in to match whatever you created you MySQL database with earlier. You’ll also want to check the box that says “Use Web Server (Apache) Rewrites” – this is good for SEO. You can check the Box for SSL URLs, but only if you have an SSL certificate installed and configured for your Dreamhost account. My page looks like this:

   9.

      Click Continue, and the next page will present you with form fields to setup your Administrator account as well as create an Encryption Key. Follow the instructions, fill in the boxes, and click Continue.
  10. Step 10 – All Done!
      You’re now done setting up Magento. Sit back, relax, crack open a cold beer (or bottle of wine), and let the gorgeous chicks flock to you. Maybe not?I suggest you login to the backend and start playing around. There is a lot of configuration that needs to happen before your store will go live, including customizing your own store design. There is a lot of great documentation available on Magento’s site, as well as a well populated forum, with several knowledgeable developers and supporters.

Please Note: Magento is in BETA! This means that you will more than likely run into problems, small or big. I don’t suggest running a live site on Magento until it reaches a stable release – hopefully by the end of March. Be sure to follow the forums.

And please don’t go whining on the forums, and posting ridiculous threads like “It’s broken! OMGz!!!!!!11!1” or “Magento doesn’t work! MY LIFE IS OVER! KILL ME NOW!” It doesn’t solve the problem. Others can’t help you, and you look like an idiot. Have some respect for the developers and supporters, and post knowledgeable threads, detailing what specifically doesn’t work. And please, please, please search the forums before posting. Odds are, someone else has had the same problem.

Feel free to post any questions or comments below. I’m always open to discussion and support. I’ll be playing with Magento over the next week, and hopefully will have a positive, thorough review.

Categories: Softwares, Webmasters Resources Tags:

Magento 1.0 Released! (finally)

March 17th, 2009 No comments

Wooooo! It seems the big 1.0 has finally be released, and is out of beta. From the Magento Blog:

    To everyone who spread the word about Magento, told a friend, wrote in blogs, posted and commented in the Magento forums, subscribed to our newsletter, downloaded one (or more) of our 11 preview releases, reported bugs, participated in the Magento community, to the online merchants who waited for Magento 1.0, developers and designers who convinced their clients to wait for the product and our partners who recognized the potential — Thank you for believing

Looks like there are plenty of bug fixes and even some new features in this version! Hooray! Looks like it’s time to update the Dreamhost Magento Installation Guide.

Categories: Softwares, Webmasters Resources Tags: