ISAPI Extensions

You may even ran across developers mentioning in classic ASP, you could rewrite ISAPI extensions. Well, this is ASP.NET and there’s better ways.

Create 2 Virtual Directories in IIS

Where you create a virtual directory for NON-WWW and WWW. Adding a Host Header of “www.site.com” for the WWW version, no Host Header for the NON-WWW, yet in the “Home Directory” tab of the Properties for that site; important to enter “http://www.site.com$S$Q” (note the “$S$Q” which ensure correct redirection of all other pages beside the homepage) check “The exact URL entered above” and “A permanent redirection for this resource”. This works, yet it can get sloppy if your organization hosts many websites on a one web server. And this does not solve the problem of SEO friendly URLs

Manually creating Files or Directories to Redirect

Uuuuugh. This is the worse solution I had to resort to at one point. As not to be penalized by search engines for 404 errors due to upgrading our website and no longer containing one to one links, I had to create folders and sometimes files on the web server, then similar to the method above, manually create permanent redirects in IIS.

Using ISAPI Rewrite

I’ve seen many developers recommend this product, tried the free version and just couldn’t get it to work. It’s a simple install on the web server and supposedly an edit of a httpd.ini file yet I had no luck… again some don’t have the luxury of installing applications on production web servers.

Apache web servers easily accomplish this via .htaccess file placed in the root of the web application. The purpose of this article is to hopefully offer a similar, clear and easy way to simulate an .htaccess file for IIS.

The Problem:

• Too many methods loosely explained by developers on their blogs.
• Many don’t have the luxury to have access to the IIS management tool on the server.
• Which brings me to a method pointed out by Tom Kraak Search Engine Friendly 301 Redirects Without Touching IIS. Doesn’t require access to IIS, no installs on the server, and no cost. There’s an Open Source project called UrlRewritingNet.UrlRewrite which basically gives you the same power as Apache’s .htaccess file.

A Solution:

How to install UrlRewritingNet.UrlRewrite:

1. Download the Zip file here: http://urlrewriting.net/159/en/downloads.html

2. Copy the file “UrlRewritingNet.UrlRewriter.dll” to you web applications’ “bin” directory

3.a. Open your “web.config” file then find and replace:

</configSections>

3.b. with this:

<!--URLRewritingNet Module to redirect NON-WWW to WWW and URL Rewriting-->
    <section name="urlrewritingnet" restartOnExternalChanges="true" requirePermission ="false"
type="UrlRewritingNet.Configuration.UrlRewriteSection, UrlRewritingNet.UrlRewriter" />
  </configSections>
<!--URLRewritingNet Module to redirect NON-WWW to WWW and URL Rewriting-->
  <urlrewritingnet configSource="ExternalRewrite.config" />

4. then add this to <httpModules>:

<!--URLRewritingNet Module to redirect NON-WWW to WWW-->
      <add name="UrlRewriteModule" type="UrlRewritingNet.Web.
UrlRewriteModule, UrlRewritingNet.UrlRewriter" />

5. Create a file called “ExternalRewrite.config” at the root of your web application to place all your redirect rules. Below is all we need to automatically redirect all web traffic from NON-WWW to WWW:

<urlrewritingnet xmlns="http://www.urlrewriting.net/schemas/config/2006/07" >
  <rewrites>
    <add name="RedirectDomain"  virtualUrl="^http\://site.com/(.*).aspx"
    rewriteUrlParameter="ExcludeFromClientQueryString"
    destinationUrl="http://www.site.com/$1.aspx"
    redirect="Domain"
    redirectMode="Permanent"
    ignoreCase="true" />
  </rewrites>
</urlrewritingnet>

Sitefinity Admin Screenshot

This series was created to appeal to Web Designers who use or are considering using Sitefinity or seeking a good ASP.NET content management solution. There are some resourceful websites out there but none really focused at us Designers. That’s not to say I won’t offer Developer friendly tidbits here… just expressing the trials and successes I achieved and sharing knowledge from a Designers’ perspective.

What is Sitefinity?

Sitefinity is a commercial ASP.NET Content Management System created by Telerik, creators of user interface controls for .NET applications. Sitefinity is the resulting mashup of their .NET controls. 

The beauty in Sitefinity is it’s appeal to 3 main demographics of users: Content Editors, Designers and Developers.

For Content Editors, it offers powerful tools to edit and focus on content driving the website. You can edit a small amount of content or get detailed. One of the commercial features is “Workflow”, where it allows you to create content to be approved by a manager before it can be published to the Live website. Therefore you can have working “Drafts” concurrent with the live website. Another powerful feature is “Version Control”, which keeps a History of every page, which can be reverted to.

For Designers, you can focus only on the design piece your love. It requires a familiarity with ASP.NET Master Pages. Master Pages are essentially template files where you can declare zones where content can be edited by Content Editers without worring about them messing up/with the design… geez I sound like an Adobe Dreamweaver webinar. Seriously, you can put together a feature-loaded website without a Developer!  :-P

For Developers, although you don’t get 100% of the source code (meaning the goodies in the DLLs) everything else has a code-behind or built into a User Control. Or you can create your own user controls! The Membership Provider is built of Microsoft’s provider, you can tap into Active Directory if that suits your organization/client or create your own. There are so many powerful possibilities you can achieve with this framework.

Why Sitefinity?

Sitefinity was the ASP.NET CMS of choice for my company since we’re an enterprise .NET shop. There are many .NET CMS’s out there both open source and commercial, but Sitefinity was the icing on the cake for us since we were already using their UI controls via Telerik.

Some of my work using Sitefinity

I guess this is the part where I huff hot air at my nails and shine them against my shirt or “pop my collar”!

AXA Assistance USA
My company’s website, a mid-size International assistance company dealing in the Travel, Insurance and Financial sector.
http://www.axa-assistance-usa.com

Nimble Software Systems
Software development firm with an Agile project management product built in Microsoft Silverlight.
http://www.nimsoftware.com

AXA Assistance Panama
The sibling website for our company’s Panama office administering healthcare plans to Panama Canal recipients.
Coming Soon!

There’s one other use, but I can’t show it off as it’s an internal system we used in conjuction with our Call Center to deliver content to phone agents.

Pros… well Cons

Sitefinity is not the god-send of CMS… it has its flaws, below is a quick list of gripes I have with it:

• Missing some native components such as Contact Email Form and Google Sitemaps. Although you can grab sample code from the forums or build your own functionality… for a Designer, something like this should come right out of the box.
• Not as easy to deploy. Deploying a Sitefinity website to a shared hosting environment can have more pain than if you hosted your own web server (as some features require levels of trust, most shared hosting plans will only allow Medium trust at most). When we get to that point, I’ll hopefully give some advice to ease those pains.
• Too much configuration. There is a lot of configuration to get the most out of the CMS… Permissions is one.
• No centralized place for free or paid components (YET!) Well, Telerik will soon be offering a centralized place to download for free and eventually purchase 3rd party components for Sitefinity installations. I’ll contributing design templates to stay tuned. 

That being said, don’t be frightened away from it because every Con mentioned has Pros… and best of all, Telerik’s support and forums are extremely helpful

How to Get started with Sitefinity

Create a Client.net account, you will be able to download all Sitefinity products… a license file is required to remove the “You are running a trial version of Sitefinity” message (localhost or IP based development machines won’t show this message). You can get a “Community Version” of the software to test and evaluate. Note: the Community version does not feature Workflow, Multi-lingual support, and Version Control. I only work with the paid version which is $899 license fee per domain name. In the next part of the Series, I will discuss how to Setup a Sitefinity website on a local development environment plus more.

WordPress.org Themes Gives Theme Designers Middle Finger

Be cautioned if you want to share that free WordPress theme you’ve worked so hard on and want to upload it to the WordPress.org Theme Directory because they don’t like Theme Designers. I say this because I want to share with other designers the email string I had with the moderator in my latest attempt to share WordTapp, a free WordPress theme by AndroidTapp.com.

Wooo Whoooooo! The auto queue message:

Tue 4/21/2009 4:10 PM

Thank you for uploading WordTapp to the WordPress Theme Directory.  If your theme is selected to be part of the directory we’ll send a follow up email.

 

–

The WordPress.org Themes Team

themes@wordpress.org

In anticipation the review/approval process would take a few days (as it did with Fresh), I didn’t publish the page  at AndroidTapp.com (it was scheduled for the next day), thus resulted in a bad link in the theme. Plus I had an oversight by keeping test links in the Sidebar BlogRoll section of the theme.

Here’s the corrective actions email:

Tue 4/21/2009 4:10 PM

While reviewing WordTapp – 1.0 we found the following problems:

 

 

 

- Broken link to http://www.androidtapp.com/wordtapp-wordpress-theme/in footer.php and style.css.

 

- There should not be any links hard coded into sidebar.php. Please remove the following links:

 

http://www.androidtapp.com

 

http://www.antoniowells.com

 

http://www.namynot.com

 

 

 

Please fix these items, increase the theme version in style.css and upload your theme again.  Then we’ll review the new version.  You can upload updates to you theme at any time.

 

 

 

Thanks.

 

 

 

–

 

WordPress Theme Directory

 

http://wordpress.org/extend/themes/

 

themes@wordpress.org

So I published the page at AndroidTapp.com to fix the broken link issue, but forgot to remove the links in the Sidebar BlogRoll section of the theme.

Here’s the Rejection email with vague explanation why:

Wed 4/22/2009 11:30 AM

Thank you for submitting the WordTapp theme, however it has not been selected to be part of the theme directory.

 

 

 

Theme credit links aren’t intended to be used to promote sites.

 

 

 

–

 

WordPress Theme Directory

 

http://wordpress.org/extend/themes/

 

themes@wordpress.org

I write back expressing my concerns:

Wed 4/22/2009 12:06 PM

This baffles me as other theme authors have a similar link in their footer; a link to the theme and link to author website. I also submitted a theme a few months back in the same way, the theme is “Fresh” http://wordpress.org/extend/themes/fresh. Here are just 2 examples of your most popular themes with the same credit link: http://wordpress.org/extend/themes/pixeled AND http://wordpress.org/extend/themes/atahualpa

 

The theme has 2 links: http://www.androidtapp.com/wordtapp-wordpress-theme/ AND http://www.androidtapp.com/ which are the same website. Is there something that can be changed? I think it would be unfair to theme designers to not be credited for their work if all links are removed. Please clarify.

Then the moderator goes off into left-field saying now my first theme “Fresh” is not eligible for the theme directory when its been there since October of 2008. His explanation… because this website links to ThemeForest.net which sells WordPress themes. It’s clear they have a grudge against entities that sell WordPress themes, but they’re picking their fight with the wrong people. Idiots don’t retaliate against the supporters of your system!

Then received these retaliatory, robotic and vague responses:

Wed 4/22/2009 12:51 PM

On Wed, Apr 22, 2009 at 11:05 AM, AndroidTapp.com Android App Reviews info@andriodtapp.com wrote:

> This baffles me as other theme authors have a similar link in their footer; a link to the theme and link to author website. I also submitted a theme a few months back in the same way, the theme is “Fresh” http://wordpress.org/extend/themes/fresh.

 

I don’t see a link to androidtapp.com in that theme.  However looking at it now I do see that your site (antoniowells.com) is linking to a site that provides themes that are not compatible with the GPL.  As such that would make your Fresh theme ineligible to be part of the theme directory.

 

 

Here are just 2 examples of your most popular themes with the same credit link: http://wordpress.org/extend/themes/pixeled AND http://wordpress.org/extend/themes/atahualpa

> 

> The theme has 2 links: http://www.androidtapp.com/wordtapp-wordpress-theme/ AND http://www.androidtapp.com/ which are the same website. Is there something that can be changed? I think it would be unfair to theme designers to not be credited for their work if all links are removed. Please clarify.

 

 

Links are intended to go to the theme author, not promote sites.

 

 

–

WordPress Themes

themes@wordpress.org

http://wordpress.org/extend/themes/

I email back this:

Wed 4/22/2009 1:42 PM

I apologize for the mix up. I’ve re-uploaded a new version, there was an oversight on the links in the sidebar.

 

But I do have question about this statement:

 

I don’t see a link to androidtapp.com in that theme.  However looking at it now I do see that your site (antoniowells.com) is linking to a site that provides themes that are not compatible with the GPL.  As such that would make your Fresh theme ineligible to be part of the theme directory.

 

How does “Fresh” theme violate GPL. The theme is free, completely created by me, and I still support designers who have questions or even need help for free???

 

Then receive this:

Wed 4/22/2009 3:31 PM

Your site (antoniowells.com) has a link to a site that support non-GPL themes (themeforest.net), which we don’t want to encourage as those themes break the licensing terms of WordPress.

 

On Wed, Apr 22, 2009 at 12:42 PM, AndroidTapp.com Android App Reviews info@andriodtapp.com wrote:

> I apologize for the mix up. I’ve re-uploaded a new version, there was

> an oversight on the links in the sidebar.

> 

> 

> 

> But I do have question about this statement:

> 

> 

> 

> I don’t see a link to androidtapp.com in that theme.  However looking

> at it now I do see that your site (antoniowells.com) is linking to a

> site that provides themes that are not compatible with the GPL.  As

> such that would make your Fresh theme ineligible to be part of the theme directory.

> 

> 

> 

> How does “Fresh” theme violate GPL. The theme is free, completely

> created by me, and I still support designers who have questions or

> even need help for free???

 

 

 

–

WordPress Themes

themes@wordpress.org

http://wordpress.org/extend/themes/

I email back this:

Thu 4/23/2009 11:58 AM

It seems that regardless of how we upload the theme, you have you mind made up the “WordTapp” will not be included in the directory. I say this because you offer no concrete advice on getting it included.

 

Image if every website (100% of them) that runs WordPress removed the credit “Powered by WordPress” with credit link back to wordpress.org. Do you think it would have caught on with popularity, and your team continuing efforts? I think you would agree if Wordpress was never credited and never became popular, efforts would have been abandoned.

 

Correct… everything associated with WordTapp theme is linked to androidtapp.com as we are giving the theme away to the WordPress community via the popular of that site. Giving free stuff away is one of the core activities of that website.

 

To remove the author credit is unfair in order to get included in the theme directory when every other theme has author credit. Could you suggest how the theme can be included and how can the theme author be credited?

 

Then receive this:

Thu 4/23/2009 11:26 AM
Sites that support those offering non-GPL themes are not going to be allowed in the theme directory.  They are breaking the licensing terms under which WordPress is distributed and we aren’t going to encourage that type of activity.

 

Everything associated with the WordTapp theme still links to androidtapp.com.  Theme/credit links are not intended to promote sites.  Even the androidtapp user profile

(http://wordpress.org/extend/themes/profile/androidtapp) is pointing to androidtapp.com.

 

On Wed, Apr 22, 2009 at 2:58 PM, AndroidTapp.com Android App Reviews info@andriodtapp.com wrote:

> That link can be removed. I would suggest not removing “Fresh” theme as it would discourage me from creating and sharing any new WordPress themes. Also, is there anything else stopping “WordTapp” from being included?

 

 

 

–

WordPress Themes

themes@wordpress.org

http://wordpress.org/extend/themes/

I email back this:

Thu 4/23/2009 3:15 PM

I see your point. I’m not sure how you got the impression that www.androidtapp.comspams in any possible way. Nor does this link to websites that deal in themes that are not compatible with the GPL. We have zero links of that kind present nowhere on any page of that website. If it is not too much trouble to ask you evidence of this? Also, I ask… how do we get “WordTapp” theme included in the theme directory?

It became obvious that WordTapp was not going to be included and the moderator was hiding behind vague excuses, but I continued to stroke his ego until I got that official “No”.

Here’s the blastfimous email back:

Thu 4/23/2009 2:10 PM

On Thu, Apr 23, 2009 at 10:58 AM, AndroidTapp.com Android App Reviews <info@andriodtapp.com> wrote:

> It seems that regardless of how we upload the theme, you have you mind

> made up the “WordTapp” will not be included in the directory. I say

> this because you offer no concrete advice on getting it included.

 

I’ve already mentioned, theme links are intended to go back to the theme author’s site, not for promotion of sites.  You case is a bit different still because it looks like the author site (your site) is also promoting sites that offer themes that are not compatible with the GPL, which is something else we also don’t want to encourage.

 

 

> Image if every website (100% of them) that runs WordPress removed the

> credit “Powered by WordPress” with credit link back to wordpress.org.

> Do you think it would have caught on with popularity, and your team

> continuing efforts? I think you would agree if Wordpress was never

> credited and never became popular, efforts would have been abandoned.

 

Not asking for no credit links, just asking for credit links that aren’t spam or promoting the breaking of the licensing terms that WordPress ships with.

 

 

> 

> Correct… everything associated with WordTapp theme is linked to

> androidtapp.com as we are giving the theme away to the WordPress

> community via the popular of that site. Giving free stuff away is one

> of the core activities of that website.

> 

> To remove the author credit is unfair in order to get included in the

> theme directory when every other theme has author credit. Could you

> suggest how the theme can be included and how can the theme author be credited?

 

Don’t use the credit link as spam/promotion and don’t promote sites that deal in themes that are not compatible with the GPL.

 

–

WordPress Themes

themes@wordpress.org

http://wordpress.org/extend/themes/

By then I couldn’t believe the audacity of this idiot, to blatantly call AndroidTapp.com SPAM! If you frequent that site or know anything about it you’ll know we never Spam and have free giveaways often. Such as our American Express Gift cards giveaway, or the free T-Mobile G1 cellphone we gave away. We pride ourselves on quality content and since have become the #1 Android App Review website. This was offensive, but I pushed for more.

I email back this:

Fri 4/24/2009 11:51 AM

We just uploaded the theme without any credits, and was not able to remove our credit link on the wordpressprofile page. It’s unfortunate that the creator of the theme design could not receive credit for work.

Then receive this:

Fri 4/24/2009 10:57 AM

Theme links are intended to point the theme author’s site, not for using in promoting sites.  Linking to androidtapp.com falls into that category.

 

The site antoniowells.com is linking to a site ( http://themeforest.net/ ) that promotes themes that are not compatible with the GPL.

 

Neither of these activities are things that we want to encourage.  So, the wordtapp theme would need to link to the theme author’s site and antoniowells.com would need to not be linking to sites that promote themes that are not compatible with the GPL.

 

 

On Thu, Apr 23, 2009 at 2:15 PM, AndroidTapp.com Android App Reviews info@andriodtapp.com wrote:

> I see your point. I’m not sure how you got the impression that

> www.androidtapp.com spams in any possible way. Nor does this link to

> websites that deal in themes that are not compatible with the GPL. We

> have zero links of that kind present nowhere on any page of that

> website. If it is not too much trouble to ask you evidence of this?

> Also, I ask… how do we get “WordTapp” theme included in the theme directory?

 

 

 

–

WordPress Themes

themes@wordpress.org

http://wordpress.org/extend/themes/

I email back this:

Mon 4/27/2009 3:16 PM

Hi, now that we’ve pulled our credit links out, is there anything else stopping the theme “WordTapp” from being included?

Just to prove my point, all but 1 link was removed from the theme: http://www.google.com/search?q=wordtapp (as you cannot upload to WordPress.org Theme with the Author link empty in the “style.css” file. There must but at least one link). We I linked to the source where other potential downloaders would look to find the theme anyway: Google.

Then receive this:

Mon 4/27/2009 5:12 PM

The theme URL is http://www.google.com/search?q=wordtapp  ?

 

Look, it’s clear you want to promote your androidtapp.com site with this theme.  Themes that do that aren’t a good fit for the theme directory.

 

On Mon, Apr 27, 2009 at 2:16 PM, AndroidTapp.com Android App Reviews info@andriodtapp.com wrote:

> Hi, now that we’ve pulled our credit links out, is there anything else

> stopping the theme “WordTapp” from being included?

 

 

 

–

WordPress Themes

themes@wordpress.org

http://wordpress.org/extend/themes/

In conclusion, this is why I titled this rant “Caution: WordPress.org Hates Theme Designers!“. I challenge this idiotic moderator to post comments here. It’s even obvious how Plugins get more respect knuckles as they can be easily updated from your WP Admin, while Themes must be manually downloaded. Not to mention when they suspended themes, unexpectedly removed themes, and realized how much of a mistake that was then reinstating the theme directory.

If you’ve experienced similar or worse treatment in sharing your theme, please comment below. This is your way to fight back and express your opinions! Even if you support the moderators responses and think I’m an idiot… I’d like to hear your blasts.

I’m better managing my time and writing topics to hopefully crank out more frequently and completed series. Much time has been devoted to www.AndroidTapp.com, which is turning into a huge success (I’ll report more about that later).

I’m refocusing my topics here into series about the following:

Learning Web Design, A Guide for Beginners. Which will be a series from concept to completion how to design a professional website based on my own guidelines discussed in this series.

ASP.NET for Designers. Discussing techniques and tutorials on learning ASP.NET for Web Designers.

Sitefinity Design. A Content Management System (CMS) created by Telerik using their .NET controls. It is great for custom development, yet designer-friendly and even better for non-tech content editors. I wil explorer designing and developing on this platform as the resources are NOT plentiful than that of WordPress.

Produce more Free Themes & Templates. Everybody loves free stuff right?!?! I have a few free Themes & Templates out there that need updating, plus I will crank out more beautifully designed themes and support those as well.

The newly launched social network website AndroidTapp.com is giving away a new free T-Mobile G1 cell phone, the winner will be chosen at random. Utilizing various “Web 2.0″ methods to gain community participation in the promotion. Promotion starts Monday 11:59pm CST December 22, 2008 and ends Monday 11:59pm CST January 19, 2009. Participants can submit several entries by:

AndroidTapp.com is pioneering delivering relevant promotions and unique content their Android target market. The entry methods are also painlessly quick too. A few commenters stated it took all of 5 seconds to signup, 1 click to Digg it, or just a few more to follow on Twitter.

When the winner is drawn, I’ll post it here!

Design – now we can crack open Photoshop!

Now that we’ve taken time and analyzed the scope of project, we have our creative direction, Sitemap, and sketches we can now crack open Photoshop. (See the before and after in the captions below)

(Right: Here is a screenshot of the original Photoshop design layout, notice the owners portfolio shot, it was changed towards launch as her clothing color scheme did not compliment the web page design. Left: Plan D Website Sketches gave me an opportunity to establish page structure, draft the homepage splash, interior pages, and other notes.)

Breaking Bad Habits

Mindy Wagner of Viget wrote a great article about Bad Habits we as designers often do in Photoshop (slap on the wrist and must stop it)! Since then I’ve been trying to clean up my act.

Design before you Code

Now that the homepage was designed, my attention was focused on the Interior Page design. When designing each interior page I wanted to do something more interesting with the background images. I wanted each section to have a different “green” background image. Images that not only reflected green, but imagery that corresponded to the particular website section.

Image Slicing

Image slicing for the Web in science of its own. You have to balance: Functional Layout, Image Type, and Size File/Compression.

Functional Layout

When slicing you have to keep in mind the functional layout and how it correlates to the design.

Image Type

Once you reach a certain apex in this field, you can predetermine the appropriate file type; JPEG, GIF or PNG. JPEG file types are best suited for pictures or graphics that cover a wide color range with the greatest compression. GIF files types are better for images with more flat color ranges and offers great compression (I also use this type for transparent images but it has a drawback of jagged edges). PNG file types offer crystal clear images and transparency without jagged edges but at the sacrifice of a larger file size and compatibility in older browsers. For example, IE6and lower have trouble natively showing transparent PNGs, they display with a light blue or light grey background color, versus transparent.

Size File/Compression

Pay close attention to this area as some designers disregard this area because the average Internet surfer these days have some form of broadband Internet connection, therefore the latency would not be that noticeable. Consider mobile users as the number of mobile devices are increasing. For high traffic websites the total page size should not be so heavy as to decrease the load on your web server(s).

One technique I like to use is keeping pre-sliced graphic assets in layered PSD format separate from the page designs (Why… when clients change their mind, you can easily revisit). For example, the logo below originally did not have “Real Estate” text. I was able to easily go into the PSD asset file, add the text and replace the graphic. Additionally, I use the same naming convention of the PSD file as the finished file to save time renaming. So “logo_plan-d-real-estate.psd” could easily save as “logo_plan-d-real-estate.png”.

The best way to slice a web page is to analyze the design knowing what elements to make images and what elements should be handles with CSS, or both! See the numbers on the screen below for tips explanation:

1. I used PNG img for logo for best background transparency for the brown gradient below it.
2. The mini icons are placed in the left padding as background images with CSS.
3. Text fields can use 1 background image and repeat horizontally with CSS.
4. The star bullets and transparent white are separate images and controlled with CSS.
5. I used in page styles to override the default CSS set in the external CSS file. Knowing the rule of thumb with CSS helps; the last referenced Class or ID will display.
6. Take advantage of the native background repeat behaviour in HTML elements. To give it more spice, I made the background image transparent, but presents a challenge in IE6.
7. The orchid uses CSS layers to float a transparent PNG image slightly over the main panel text.

When you slice your web page properly, you notice that the imagery is comprised of much smaller images creatively put together with CSS.

Code – now we can crack open Dreamweaver

I had to code the page with respects to 2 aspects. One being the PSD to HTML and the other being coding for CMS Made Simple. The latter will be explained more in detail in the third part of this series.

Why do I need to code the page twice? Not really coding twice, yet the initial coding is done in the PSD to HTML stage. The set of coding for CMS Made Simple comprises of slicing the PSD to HTML code into blocks for the CMS. A CMS Made Simple template, or any CMS theme or template, SHOULD NOT have content in it. Rather a separation of layers, meaning; the template is usually separated into header, body, and footer. Subsequently, those elements separate, usually in modules, things like navigation, search bars, and widgets. All of the fore mentioned elements are marked up with CSS and the content is pulled from the database. This model allows for optimal uses; maintenance, software upgrades, website redesigns, search engine optimization, etc.

PSD to XHTML

So what is this “PSD to XHTML” or “PSD to HTML” anyway? It’s a design philosophy amongst Web Standards compliant web design. The firm PSD2HTML.com explains the philosophy best:

Structure

Many Web Designers use Wireframes in their design process. I try to avoid them unless; the project is larger involving more web designers or Usability team, corporate clients usually require them (better to show that than your Sketches), or when I know I will transferring the design off to another designer.

Since I already established my structure from the Sketches, I start laying out the design as if there would be no CMS applied to it. I do this for an Interior page and the Home page (that’s all we need). We’ll use the CMS to fill out most of the other pages.

Valid XHTML & CSS

One important thing we shouldn’t forget, validating our XHTML and CSS using services like W3C Validation Service. I wrote a great article on tips to remember when designing web pages for XHTML Strict. In the Plan D Real Estate website I designed it for XHTML Transitional, which passed that standard.

In Conclusion

This phase of the process shows how you go from the sketches to actually something aesthically pleasing in Photoshop, then using PSD to XHTML techniques to prepare for coding CSS design in Dreamweaver. In the next phase; Development, I’ll explain how to slice the template for CMS Made Simple and the development effort involved there.

I have not been able to post on my Web Design blog in a while because I’ve been crazy busy multi-tasking the launch of 4 new websites. One in particular just launched today called Android Tapp. Android Tapp is a social network website created to fill the void of many people wanting to see the Android App Market created by Google without having an Android powered phone like the T-Mobile G1.  The Android Market is comparable to Apple’s App Store for the iPhone. With the Android Market having over 400 Apps (at the time of this post), users need clear help fishing through which are worth downloading. With that idea sparked many more:

• You can easily Rate Android Apps
• Read our concise Reviews about Apps
• Post your own Comments or Reviews
• Interact with rock-star mobile App developers, as they are interviewed
• Get Freebies like wallpapers, contest giveaways, etc.
• And hot-off-the-press News about the Android Market

So whether you’re a G1 owner, tech geek or iPhone-hater… check out the new website. Your feedback is greatly appreciated in the Comments below:

The first interview on AntonioWells.com will start off with a colleague and good friend of mine Falaah Shabazz. Falaah is a Photographer, Graphic Designer and Marketer of Falaah Shabazz Photography. Specializing in commercial, fashion and concept photography and one hell of a graphic designer and marketing guru.

AW: Tell us a little bit about yourself?

FS:Well I was the, Son of a Share Cropper and… No, seriously, I am just a regular guy. I am a divorcee with three beautiful children and very single. Unlike a lot of individuals, I have a career that I enjoy and love. Photography allows me to be creative and provides me that much needed outlet to keep from going crazy. Being my own boss and having the ability to control all areas of business is also a plus.. I’m just big kid too, I love Nitro (gas) powered RC cars & trucks, all types of electronic gadgets and this new organic BBQ popcorn I’m eating! Ummmmm umm!

AW: Why did you want to become a photographer?

FS: In addition to being a photographer, I am a Graphic Designer. I was working on a project for a local band. The previous photographer was not available and I suggested that I shoot their photographs, for a small fee. I picked up the camera and off to the alley we went and amazingly, that is when my love affair with photography began.

AW: Why did you want to become a graphic designer?

FS: I was with an independent record label named CWAL were I worked with THE LEGANDARY TRAXSTER as a producer and recording engineer and we were a self contained unit; we did our own recordings, album artwork, posters, mastering, etc. I got kinda good at it, so after I quit the music industry (That music stuff is crazy!), I still had a good reputation for doing graphic work so I did it as a side hustle, while I worked as a retail store manager for an athletic apparel company. The company went out of business… I was scared I had 3 kids, a house, a wife, crazy bills and I saw it as my chance to take life, restructure it and try to never let someone control my finances again.

“I would rather fail myself, then to follow someone else’s lead and fall on my face due the their poor choices that don’t have my future nor my children as a priority.”

I mean I was making almost the same amount of money doing graphics part time as I was doing 40 hours a week for this retail chain! It only made since to go full time.

AW: Why did you get into Marketing?

FS: While designing graphics, you run into people that do not have a clue as to what they want or need for their business. I realized I was creating entire marketing plans for some of my clients and researched the the field and found it to be profitable.

AW: What school did you go to?

FS: CVS (Chicago Vocational School)

AW: Do you think one needs college or a degree to learn/perfect their skill?

FS: No not at all, Honestly I dropped outta high school in my freshmen year. Dumb… I know but I made it. I got a full time job, my own place at 16 and put my nose to the grindstone!

AW: What inspires and/or motivates you?

FS: The Bugatti Veyron– Yes it is 1.4 million & I will have one lol!

AW: What do you do when you get “designers-block”?

FS: Take a nap and when I wake up I surf the web for design or photographic inspiration.

AW: Do you have a favorite Designer or Photographer and why?

FS: Yes! Too many to name! ( & you Antonio )

AW: What advice would you give to an aspiring Graphic Designer?

FS: When doing graphic design for a client, its about the clients’ desires and needs, not bragging right with other designers! And stop using so many damn plug-ins… be original!

AW: What advice would you give to an aspiring Photographer?

FS: Constantly study your craft and learn to love light, constantly change your style if you do things out of habit when you realize that it’s a habit… change it!

AW: What type of equipment do you use?

FS: Photographic:

• 1) Canon 5D
• 1) Canon 20D
• 1) Elinchrom Ranger RX as speed battery pack with
• 1) A –head
• 1) S-head
• 2) 750 watt sec travel lights
• 1) Canon 50mm 1.4 lens
• 1) Canon 135mm 2.0 lens
• 1) Canon 85mm 1.2 lens
• 1) Canon 28-135mm 3.5 lens
• 1) Canon 70–200mm 2.8 lens
• stands, soft boxes etc.

Graphic Design + Photo Processing:

• MAC Daul 2.3 Ghz Power PC (6 gigs of ram)
• Samsung 19” monitors
• Photoshop CS4 with no Plug ins!!!!!!!!!!!!!!

AW: PC or Mac?

FS: MAC BABY!!!

AW: Do you use music while you work?

FS:Yes, a lotta rap (old skool)

AW: What are the tools you couldn’t live without?

FS: My G5 & my Camera

AW: What upcoming projects are you working on?

FS: I have a photography seminar called “The Flex Your Photo Seminar” sharing my trade secrets with my peers, covering Creative lighting, shooting techniques, model instruction and photo retouching

AW: Well, the motto on AntonioWells.com is to give back, or give something free. Is there a Tip, Trick , Technique or Advice that you can share here?

Lighting Corrections using Photoshop CS4

A sample of some of the thing to be taught at the 2008 Phlex Your Photo – Key to success seminar.

Thank you Falaah for that interview, keep up the great work!

Fresh is a clean and minimalistic 3 Column BlogEngine.Net Theme suitable for resource blogs or even a company website. Built for BlogEngine.Net Version 1.4.5+ and Widget Ready.

This theme originated from a WordPress theme converted into BlogEngine.Net (an open source .NET blogging project) and I will give it away to the BlogEngine.Net blogger community. I will give away the Theme files, source PhotoShop file, and offer support for the theme. (Showin’ luv to my .Net peeps )

Features:

• 3 Columns: Left Content, Left Sidebar, Right Sidebar
• Wigdet Ready Right Sidebar
• Clean Web 2.0 minimalistic color scheme
• Ads can be placed in the Sidebars
• Photoshop PSD file included (with some custom icons).

Download It. Get It. Use It!
Downloaded 778 times

 

If you have downloaded Fresh or are using it, leave your website address in the comments…

This article will concentrate on the full Website Design life-cycle, from ”concept-to-completion”, of a Professional website I recently completed for NAMYnot Multimedia. The goal is to give other aspiring web designers the inside tips, tricks and processes they’ve been yearning for. This will be a 3 part series:

1. Creative Direction, Sitemap & Sketches
2. Design & Development
3. Flash Animated Introduction

Project Synopsis: The anatomy I’ll be breaking down is the Plan D Real Estate website redesign. Plan D Real Estate offers professional services in Residential Sales and Buyers Representation, Residential and Commercial Interior Design Consultation, and Home Staging incorporating Green sustainable friendly materials in the Chicago Metro area. The client did not want a typical realtor website, instead desired a website that showcased the aesthetics of interior design and home staging, as well as a marketing vehicle for the real estate industry.

The scope requested a Flash animated introduction, photo gallery, blog engine, emailing list manager, and the client wanted the ability to manage the content themselves. This instinctively suggested to run the website on a Content Management System. CMS Made Simple, an open source PHP CMS software, was the CMS of choice as it offered all the capability needed natively, and the few features that were not included can be easily downloaded with 3rd party plug-ins. More about the CMS will be covered in Part 2: Design & Development. 

The Creative Direction

In interviewing the client and learning more about the interior design style, target market, and newly created company brand; I learned they already had a well designed logo and mailer marketing material. It was actually designed by a friend and colleague of mine, Falaah Shabazz. So, the creative direction already had a great start. See below the starting inspiration:

There are several elements from this marketing mailer piece alone to build a creative direction from… lets start the anatomy:

Warm, Earthy yet Vibrant Color Palette

When you see the color choice, it immediately “pops” the design, yet the various shades of brown warms the palette. I have attached the core color scheme as a PhotoShop Swatch, download the Plan D Website Color Swatches Palette. Additionally, I’ve listed the hexi-decimal color values below:

Blue: #4590BF
Green: #82BF45
Brown: #593F2F
Orange 1: #F25D27
Orange 2: #F2522E

Swatches created with Adobe Kuler

Details, Details, Details…

Let’s first look at the logo brand. The mixture of script typography and serif face type for the “D”. Notice the lineart 3D tree, glossy star bullets, measurements, and schematics details that correlates to the brand. These details, such as the glossy star bullets and measurements, were used in the website design in the header navigation. I wanted to transfer as many creative details and elements into the website as possible.

Typography

Typography in the mailer piece has the liberty of exotic off-springs of Times Roman font, the Web is a different story. With only a handful of fonts to choose from, I chose to use Times Roman for navigation and sub-navigation (using CSS to transform the text in all caps), Georgia for H1-H5 page headers, and Trebuchet MS in content areas for readability with finesse.

Modern Decor Home Staging Photographic Creative Direction

The interior design style of the client was modern, chic, “green” with slight oriental accents. Being a designer for a while, sometimes you notice right away where the stock imagery came from. I recognized some of the photos from iStockPhoto. So I logged into my account and purchased licenses for similar imagery. You can view my Designer’s Spotlight of all the imagery used in the final website.

I also wanted to make some part of the design “outside-of-the-box”. To explain, I recalled a CSS Web Design article I read on SitePoint by Jina Bolton Breaking Out of the Box with CSS Layouts. The image of the orchid and butterfly then became a focal element of the design, in which the butterfly will be used later in a Flash animated intro. I wanted the orchid to organically appear, fuse into, and overlay the design. In Part 2: Design & Development; of this anatomy I will share how I used CSS layering and PNG image transparency to achieve this effect.

The Sitemap

The web sitemap is an integral part of building the website as it determines structure; whether sub-navigation is necessary, what categories are needed, and determine the functionality needed in the CMS. Plan D’s sitemap was fairly simple and only went 3-4 nodes deep:

• Home
  • Bio
    • Accreditations
  • Services
    • Home Sales
    • Marketing & Advertising
      • Gallery
    • Interior Design & Home Staging
      • Gallery
  • Gossip (Blog)
  • Raves (Client Testimony)
  • Tips
    • Home Buying Articles and Advice
    • Home Selling Articles and Advice
  • Contact

In building the sitemap, I confirmed the need for header navigation and sub-navigation respective to the category.

The Sketches

Upon gathering a lot of information and establishing a creative direction, I was able to start sketching. I have always sketched web pages on paper before starting, but it was only until recent years I understood the significance of this. Sketching in web design gives you the opportunity to quickly draw what the user interface will look like, build structure and layout, placement of elements, factoring usability, jot notes, etc. It’s an area for trial and error. It is better to make mistakes here than to do it in Photoshop or when converting to HTML (PSD to CSS/XHTML as they nickname it).

Plan D Website Sketches gave me an opportunity to establish page structure, draft the homepage splash, interior pages, and other notes.

If you’ve examined the above image, you’ll notice I had sub-navigation in the first few sketches on the left, but the final sketch was placed on the right. You can also see minor header, sidebar, content area and footer design styles. If you squint hard enough, you’ll see my notes about the “outside-of-the-box” orchid, notes for width pixel measurements and visual effects to apply.

In Conclusion

This method of web design is my personal approach, my set of processes that work, and are rock solid for me. (In a future blog article I will share the 1 time I did not follow my process and the project almost was a disaster). So hopefully the first part of this series gave some insight on the creative thought process of designing a professional website.