I had a hard time finding a solution to redirect only certain files from HTTP to the secure HTTPS. I found all kinds of ways to redirect the entire site to HTTPS but none for specific pages only. After a few hours tinkering I found a solution using the following code in a .htaccess file:

Options +FollowSymlinks
RewriteEngine on
rewritecond %{http_host} ^example.com [nc]
rewriterule ^(.*)$ http://www.example.com/$1 [r=301,nc]
 
rewritecond %{SERVER_PORT} !^443$
rewriterule ^filename\.php(.*)$ https://www.example.com/filename.php$1 [r=301]

The first part of the code redirects example.com to www.example.com as noted in an earlier post, “301″ Redirects for SEO. The second part then redirects a specific file (filename.php) from http to https. Thus the individual file “filename.php” can only be accesses using a SSL connection.

Posted in Website Design ~ No Comments

Search engines will often regard www.example.com and example.com as two different websites. Because of this, websites usually experience the effects of link fragmentation (inbound links point to both www.example.com and others to example.com). For example, if www.example.com has 5,000 inbound links and example.com has 2,500 inbound links you could potentially combine them so you have all 7,500 links pointing to www.example.com.

To do this you can setup a permanent “301″ redirect by creating a .htaccess file with the below code. This will ensure that all requests coming in to example.com will get redirected to www.example.com.

Options +FollowSymlinks
RewriteEngine on
rewritecond %{http_host} ^example.com [nc]
rewriterule ^(.*)$ http://www.example.com/$1 [r=301,nc]

Notes:

• The .htaccess file needs to be placed in the root directory of your old website (i.e the same directory where your index file is placed)
• REPLACE example.com and www.example.com with your actual domain name in the code above
• This .htaccess redirection method only works on servers using the Apache Mod-Rewrite module

This “301″ redirect method is also a great way to save money on SSL certificates. When the site always points to www.example.com you can by just one SSL certificate.

Posted in Website Design ~ 5 Comments

If you plan to link directly to an .EPS or .AI file for downloading (e.g. logos, vector art, etc.) on a website, you should note that Internet Explorer doesn’t correctly handle these postscript files. If you attempt to download an .eps file with IE it will save it as a .ps file and it will save an .ai file as a .pdf. This is not a problem in Firefox or Opera.

The simple solution is to zip these types of files so IE doesn’t change the file extension, and your visitors can download them without problems.

Posted in Website Design ~ No Comments

Lately I’ve been creating a lot of PayPal “Buy Now” and “Add to Cart” buttons for a few of my customer’s websites. The problem with creating these buttons is that they require an email address to be added to the HTML code, which in turn gets easily harvested by spam-bots.

A simple alternative to using an email address is to use a “referral code” instead. To get the referral code login to PayPal and click on “Referrals” located near the footer of the page. On that page you will find a link like: https://www.paypal.com/us/mrb/pal=VXDE78NC4F3K2. Copy the “VXDE78NC4F3K2″ part of the code and replace the hidden input value of “business” with it in your button code.

Original Code:
<input type="hidden" name="business" value="name@example.com" />

Revised Code:
<input type="hidden" name="business" value="VXDE78NC4F3K2" />

You may ask why I wouldn’t just use PayPal’s encrypted payment buttons. Well, By creating non-encrypted buttons you can easily edit them (e.g. change Price, Item Name, etc.), create new ones fast and dynamically input values via PHP.

Posted in Website Design ~ No Comments

The following is a list of my top 10 favorite online website design tools. Best of all, they are all free services. Let me know if I’m missing something special here.

Note: I intentionally left-out validation and testing type services. They will be covered in another post later.

• Em Calculator
  Converts pixels to ems. Great for converting fonts from px to ems without reducing the base font size to 62.5%.
• Lorem Ipsum Generator
  Generate paragraphs of classical Latin literature from 45 for use as “dummy text” for your mock-ups and layouts.
• The Hivelogic Enkoder
  The Enkoder helps protect email addresses by converting them into encrypted JavaScript code, hiding them from email-harvesting robots while revealing them to people.
• Kuler
  Color inspiration from Adobe Labs. Quickly find, create or share harmonious color themes online, then download the colors as swatches to be used in PhotoShop.
• XML Sitemap Generator
  A fast and easy to use online sitemap generator that creates not only an XML sitemap (to be submitted to Google), but also a sitemap in text format (to be submited to Yahoo!).
• FavIcon Generator
  Easily create a favicon (favorites icon) form most image formats. A favicon is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu and is a good way to brand your site and increase it’s prominence in your visitor’s bookmark menu. This generator by Dynamic Drive even supports transparency when using a gif or png.
• hCard Creator
  A simple form from Microformats.org to create hCards. hCards are a type of vCard in semantic XHTML that enables applications to retrieve its information directly from web pages without having to reference a separate file.
• StatsCounter
  A reliable, invisible and highly configurable hit counter that offers tons of real-time detailed web stats. Through your own profile, manage all the sites you create and setup profiles/permissions so your clients so they can analyze and monitor their own stats too. I find this to be even more informative then Google Analytics!
• IconFinder
  A search engine that queries icons to use on your website with “Creative Commons” or similar type licenses. Not sure if this constitutes as a tool but it sure is a handy time saver.
• TypeTester
  A tool for selecting type primarily for screen as PhotoShop mockups are rendered somewhat different when you slice your PSD into a HTML/CSS layout. TypeTester enables you to see how type will look in its’ natural environment – a web browser.

Posted in Website Design ~ No Comments