Check out some of these online portfolio tools to help you promote your graphic design work.

CarbonMade

With over 42,000 artists and designers currently using its service, CarbonMade provides a great opportunity for you to design your own portfolio site in a JavaScript format. You don’t need any prior knowledge of coding or web design to use it, but you do get a clean canvas to use for your portfolio however you wish. It’s easy to use and update, and provides you with an easily recognizable and memorable web address.

Shadowness

This could be considered the “upscale” portfolio site. The Shadowness website itself is very sleek and sophisticated, and hosts some of the most talented and unique designers out there. While many people simply visit Shadowness for inspiration for their own work, some have signed up simply to be affiliated with such great artists and to receive feedback on their own work.

Coroflot

In this relatively simple portfolio site, you can upload your photos directly to your page. You can also write a bio in your About Me section and provide an email link to your page’s visitors who have taken an interest in your work. While the format for Coroflot is simple, it can improve your appearance on search engines, unlike a lot of Flash-based websites.

Behance

The Behance network is more than just an online portfolio tool. It is also a social networking site for graphic designers. Behance allows more than just photos; it is a multimedia site that allows you to arrange your work however you wish. You can share, comment on and collaborate on work with other artists in the network, most of whom are very open and willing to socialize with other artists, not to mention talented.

Viewbook

Viewbook can be defined in one word: simple. There isn’t much to this site, but it is enough for people who want their viewers to focus solely on their work. The free account allows for 100 images to be displayed, plus most of the features not on a paid account. It will also allow designers to embed their work from Viewbook on other websites and blogs to promote themselves.

While having an online portfolio is a key tool in helping get recognized, you can also increase your online presence through improving your appearance in search engines. Using companies like eVisibility can help your name become more prominent in search engines and help you become even more recognized as a graphic designer.

Galleries

WordPress is getting more robust with every release, yet for some reason, there’s still no great way to do Galleries natively. Fear not, we have found that Nextgen and CataBlog will do the job well enough!

Worpress and Search Engine Optimization

When it comes to SEO, there are absolutely no open source platforms that I’ve seen that do as superb of a job providing tools and automating the process. Keys to wordpress SEO include meta control, monitoring, links and social networking. Here are the best tools for the job:

WordPress Stats Plugin

The WP Stats is actually two essential plugins, one by the creators of WP and the other as a dashboard tool to take analytics through the roof. The WP stats plugin lets you monitor social traffic, alexa, compete, and far more — all enabled and monitored without leaving your admin!

WordPress SEO by Yoast

For years, i used the All in one SEO plugin, and even gave headspace a shot but Yoast knocked them both out of the water for me. The yoast plugin boasts some great tools to help you generate meta content, plus looks and works the way a good WP plugin should.

SEO Smart Links

Internal site links are a huge usability and SEO boost, and nothing helps you build these links better than this plugin. I usually dump in a keyword list that I’ve built with Google’s Keyword tool and over time I aim to write articles and link them to those keywords.

Worpress SEO requires a Sitemap

Don’t let the name fool you, Google SEO sitemap covers all the major search engines and notifies them automatically whenever you publish new content. Don’t skip this one, a sitemap is a must in helping a search engine index your site, and is even more crucial for frequent bloggers.

Faster page loads in WordPress

We all want more cache don’t we? WP Super Cache speeds up your site significantly making your pages load faster, which is favorable for both man and machine! Follow that with Smush.it, Database Optimization and Minification and you’re looking at a 20-30% faster site on average (estimated from personal use and client sites).

Get Social with WordPress

Social networking is huge and most blogs completely fail to engage their audience (guilty), part of the problem is obviously content but the other part is often the tools and approach. If your website is large and well known (or has the capacity to be) why not extend WordPress with BuddyPress and launch your own social network? Or keep it simple and drop in Socialize widgets and Disqus Comments so that your users can engage using existing social platforms.

WordPress Utilities you can’t Live Without

There are a TON of utilities that I would love to talk about, but for brevity I will only mention Scissors and WP DB Backup. Scissors lets you crop and rotate media which is something I hope wordpress will include in its core. WP Backup makes a data backup for you automatically and emails it to you, allowing you to have a backup outside of your host.

I hope these plugins help, and if you feel I missed one that HAS to be on the list, just mention it in the comments below and I’ll argue about it a bit

Developer Extensions

Developer toolbar:

http://www.magentocommerce.com/extension/2271/developer-toolbar

Blueprint Theme:

http://www.magentocommerce.com/extension/2245

Free Magento Extensions

Product Image lightbox:

http://www.magentocommerce.com/extension/1487/magento-easy-lightbox

Product Detail tabbing:

http://www.magentocommerce.com/extension/1725/magento-easytabs

Teaser Box:

http://www.magentocommerce.com/extension/1778/teaserbox

Free Magento Themes

Absolute Magento Theme

http://www.magentocommerce.com/extension/2031/magento-absolute-theme

Paid Magento Extensions

Abandoned Cart Alerts

http://adjustware.com/shop/magentomods_abandoned_carts_alerts.html

Quickview

http://www.magentocommerce.com/extension/574/quickview-1.1

Valentines Day Fonts

Valentines Day Graphics (vector)

Valentines Day Wallpapers

The Good

All around, Magento beats the competition. Here are just a few highlights if you’re not familiar with Magento:

• Magento is Object Oriented
• Magento is secure and scalable
• Magento has a large community that is rapidly growing
• Magento can be extended very easily
• Magento allows for multiple stores and store fronts

The Bad

Magento has a few things that I’m not too excited about:

• Magento is HUGE and bulky
• Magento lacks a WYSIWIG and CMS
• Magento uses a lot of JavaScript in a bad way

Some Useful Code

I’ll feed you baby birds..

Add a CMS Static Block to a page:
Within Magento:

{{block type="cms/block" block_id="identifier"}}

With PHP:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('identifier')->toHtml() ?>

Display products from a specific category on the page:
Many people ask how to display products on the home page.. this is the easiest and most universal solution. Replace category ID with whatever category you want to display

{{block type="catalog/product_list" template="catalog/product/list.phtml" catagory_id="0"}}

Shortcuts:
Store URL within Magento:

{{store url=""}}

Define a new CMS Page Layout

Depending on what version of Magento you’re running, this may be different, but in the 1.3x series, this is how you’d define a new page layout. We’ll define a layout called home for this example:

/app/code/core/Mage/Page/etc/config.xml

        <page>
            <layouts>
                <empty module="page" translate="label">
                    <label>Empty</label>
                    <template>page/one-column.phtml</template>
                    <layout_handle>page_empty</layout_handle>
                </empty>
                <one_column module="page" translate="label">
                    <label>1 column</label>
                    <template>page/1column.phtml</template>
                    <layout_handle>page_one_column</layout_handle>
                </one_column>
                <two_columns_left module="page" translate="label">
                    <label>2 columns with left bar</label>
                    <template>page/2columns-left.phtml</template>
                    <layout_handle>page_two_columns_left</layout_handle>
                </two_columns_left>
                <two_columns_right module="page" translate="label">
                    <label>2 columns with right bar</label>
                    <template>page/2columns-right.phtml</template>
                    <layout_handle>page_two_columns_right</layout_handle>
                </two_columns_right>
                <three_columns module="page" translate="label">
                    <label>3 columns</label>
                    <template>page/3columns.phtml</template>
                    <layout_handle>page_three_columns</layout_handle>
                </three_columns>
                <home>
                	<label>Home</label>
                	<template>page/home.phtml</template>
                	<layout_handle>page_home</layout_handle>
                </home>
            </layouts>
        </page>

Please understand that this is editing the core and will not be protected in an upgrade/update. To properly define this to be compatible with future upgrades, you’ll need to define a simple module to override the core with a local file.

In my last post regarding sIFR, I compared sIFR against a few of the other popular font replacement methods such as Cufon and FLIR. Since there is obviously a great deal of interest in the subject of font replacement, I figured it would be beneficial to show a deeper analysis at sIFR which I believe is the superior out of the three.

A deeper look at pros of sIFR

sIFR is quite different to the many font replacement techniques in the wild. Instead of manually generating each header through an image generator such as FLIR and Cufon do, sIFR is able to load a flash object and replace each element on the fly. The scripted effect works for roughly 95% of world wide web users according to statistics for Flash support and JavaScript support in modern browsers. Note also, that sIFR is by no means required, and degrades gracefully if the user does not have one of these components required. I’m sure some purists would react with contempt, but this method causes no harm to usability and only effects load time if used incorrectly (such as replacing body text rather than headers).

sIFR… what’s not to love?

First and foremost, implementation can be slaughtered. For an inexperienced developer, sIFR can take up to an hour to implement (from what I’ve heard in complaints anyways) and can cause pages to load slowly. From my experience, both are due to an incompetent developer, as sIFR is quite easy to implement if you understand all front-end technologies (which you should be a front-end developer) and only causes slow load time if its used for large blocks of text. Compare sIFR to the first wave of Web 2.0 technologies.. to this day I see wannabe developers implementing 20k+ javascript libraries to do one simple “jiggle” or “ajax” ability, which you can do with a few lines of code if you understand raw JavaScript. We can’t blame the technology for human error.. sIFR is brilliant. It may have a ways to go before it’s perfect, but respecting the principles of semantics, usability, and accessibility.. sIFR by far is winning the race against Cufon and FLIR.

Now to address the purists and their complaint about flash and JS dependency. Plain and simply, if a user falls within the 3-10% that doesn’t have Flash or JavaScript enabled, then BIG DEAL. That’s what good old HTML/CSS are for.. a fall back solution. Should we punish those with modern browsers and technologies for the minority that will get a slightly-less-quality rendering? I don’t punish modern browsers by neglecting the wonders of CSS 3. If Internet Explorer sees a box with square corners instead of rounded.. BIG DEAL. So why should we fight about whether a user has JS or Flash enabled? Heck, you can even use image replacement at that point, if you really want to.

The Big Picture

The real issue is that there aren’t enough fonts supported in Internet Explorer. If we want to point fingers and find something to criticize, there it is. Firefox, Safari, Chrome, Opera.. they’re all supporting more CSS properties such as @font-face. However, due to copyright laws and support from Internet Explorer we are bound to 5-10 fonts that we can reasonably assume the user has installed, and that’s ALL we’ve got. Solutions have been offered and argued but the problems are still much broader.. ranging from font licensing, support and rendering, with no clear solution in sight.

sIFR is one solution of many offered by developers fighting a war for creative freedom. It’s here and now, it’s legal despite the font, and regardless of the few quirks.. it’s usable. If you use it, then I hope you implement it well. If you protest it, then I hope you have valid reasons, and aren’t just complaining because you’re ignorant. Take this post with a grain of salt.. it’s my 2 cents and nothing more.

Read further:

Cufon vs sIFR vs FLIR
Style vs SEO
Fonts and the Law

View Demo or Download

Lansing Web and Technology

If you are a web design or web development firm in Lansing, MI then talk to me personally about an even better version of this application. I’m offering it only to Lansing Web Design Companies because I believe in giving the Lansing Area a competitive advantage when it comes to technology. Feel free to contact me at the email in my header.

Validators

• Total Validator: simple HTML/CSS Validator with browser plugin support
• W3C Validator: the organization that defines markup standards, and validates according to those standards
• Cynthia Says: screen reader which will help you with accessibility in mind

Accessibility

• WebAIM: Introduction to Accessibility
• WCAG: Web Content Accessibility Guidelines
• WCAG Overview: Overview of WCAG Standards
• WCAG Tutorial: A useful educational resource to learn the standards
• Section 508: Federal requirements for web accessibility

Javascript Libraries

• jQuery
• Prototype / Scriptaculous
• MooTools

Firefox Plugins for Developers

• CSS Validator
• CSS Viewer
• Web Developer Toolbar
• Firebug

Tutorials

• W3Schools: Very in-depth, free tutorials on the most commonly used web markup and programming languages
• A List Apart: Articles and tutorials on an extensive list of topics
• QuirksMode: Good articles and test pages concerning javascript and CSS

Download the YUI Compression AppleScript

The AppleScript Source:

on run
	tell application "Finder"
		set this_item to choose file with prompt "Choose CSS or JS file:"
		set dir to the selection as alias
	end tell
	set mypath to posix_path(this_item)
	set dirpath to posix_path(dir)
 
	runCompression(mypath, dirpath)
end run
 
on posix_path(mac_path)
	set mac_path to (mac_path as text)
	set root to (offset of ":" in mac_path)
	set rootdisk to (characters 1 thru (root - 1) of mac_path)
	tell application "Finder"
		if (disk (rootdisk as string) is the startup disk) then
			set unixpath to "/" & (characters (root + 1) thru end of mac_path)
		else
			set unixpath to "/Volumes:" & mac_path
		end if
	end tell
	set chars to every character of unixpath
	repeat with i from 2 to length of chars
		if item i of chars as text is equal to "/" then
			set item i of chars to ":"
		else if item i of chars as text is equal to ":" then
			set item i of chars to "/"
		else if item i of chars as text is equal to "'" then
			set item i of chars to "\\'"
		else if item i of chars as text is equal to "\"" then
			set item i of chars to "\\" & "\""
		else if item i of chars as text is equal to "*" then
			set item i of chars to "\\*"
		else if item i of chars as text is equal to "?" then
			set item i of chars to "\\?"
		else if item i of chars as text is equal to " " then
			set item i of chars to "\\ "
		else if item i of chars as text is equal to "\\" then
			set item i of chars to "\\\\"
		end if
	end repeat
	return every item of chars as string
end posix_path
 
on runCompression(mypath, dirpath)
	tell application "Terminal"
		do shell script "java -jar " & dirpath & "yuicompressor-2.4.2.jar " & mypath & " -o " & mypath & ".min.js"
	end tell
end runCompression

If you like this YUI Compression AppleScript please do share that with me, as praise is my sole motivation for producing scripts for others. I’ve only skimmed the surface of applescript, but with so few scripts out there that meet the needs that I have, I’m sure I could quickly make some other web developer tools for Mac as well.