Web Site Design Blog

Blog Category: Web Design
January 30, 2013

A good first step to search engine optimization is installing Google Analytics. This will allow you to monitor your website traffic and gain insights into your website visitors as well as your website’s performance on Google. If you don’t already have Google Analytics installed on your web pages, you should go ahead and install it now. If you need help installing Google Analytics, please contact me.

Adding an Admin to Google Analytics

The remainder of this article is for clients with Google Analytics installed so they can add a web professional to the Analytics account prior to engaging in Search Engine Optimization.

  1. First, sign into Google Analytics.
  2. Next, click the admin button in the upper right.

  3. Next, select the account you want to work with.

  4. Now select the users tab.

  5. Now click the ‘New User’ button.

    Google Analytics - Select 'New User' button

  6. Enter my gmail address (* see image below for preferred gmail address to use ‘sabesross…’). You can select the Administrator radio button then ‘Add User’ to give me full administrative access. If you need to limit my access, you can select the ‘User’ radio button and add the profile using the list boxes below and finally press the ‘Add User’ button on the bottom.

    Google Analytics - Enter new admin user information

I hope these instructions are helpful as we begin the process of analysis prior to the actual planning and implementation of your website Search Engine Optimization.

Are you ready to get started with SEO on your site? Contact me for SEO rates and details.

June 3, 2012

My website got a little attention the past week. After a couple false starts in Photoshop, I realized I already had a good start in front of me. This realization enabled me to simply focus on changing the things I didn’t like. I am proud of myself for not falling into the all too common designer trap of never feeling it’s good enough and therefore never completing anything. I can get now on with the more important business of developing new content and client work.

Coincidentally I have noticed when working a job that I am not always so quick to throw away an existing design and start everything fresh. I like to analyze what is there first and see how we can move it forward versus starting from scratch. This may be a sign that technologies and the discipline of web design are maturing. You don’t always have to throw away the baby with the bathwater. Just because I didn’t design it or code it doesn’t mean it’s 100% crap. Your previous programmer or designer may have been perfectly capable to up this point and we just need to change the parts that don’t work, are outdated or bother us. Sometimes unfortunately though it is a do over.

The Domain Name

I have been using websitedesignby.com for the past 5 or 6 years. I registered it in 2006 because it was available, short, descriptive and I thought it would look nice as a credit at the bottom of sites I had designed.

Last year I purchased webdesignby.com through GoDaddy’s domain auction service. Since then I had been putting off moving everything to the newer, shorter domain name. When I seriously considered making the switch last week, I realized there was a relatively painless way to do it. I created a webdesignby.com alias in my current domain, websitedesignby.com (using the Plesk interface). So traffic to webdesignby.com would actually land on websitedesignby.com pages. Then I simply changed the siteurl and home options in WordPress to webdesignby.com. I Chopped the site off the logo at the top and was done. websitedesignby.com addresses will remain in tact, once you click on a menu item or link though you will be on the new streamlined domain webdesignby.com.

Attention to Typography

The line spacing and my original choice of serif, purple type for the quotes was really bothering me. I fixed the font size and line spacing issues, got rid of the serif purple text, and put some nice 15px rounded edges and a white background on the <blockquote> elements. I also made sure all of the quotes followed a uniform format with the attribute at the end. This made a huge difference in the look of the website portfolio pages in my eyes. I find myself becoming more of an evangelist for attention to typography on web pages. I still see too many sites using old design trends like small type and tight spacing. Advances in technology have allowed us as designers to have more control over typography choices.

Update WordPress

A review of my site inside of Google Webmaster Tools made me realize the importance of updating WordPress. I had neglected to update since version 2.9.?, WordPress is now at 3.3.2 and apparently Google knows about it and is not ok with it. Fortunately WordPress makes this an elementary task. No more slacking on WordPress updates, done.

Social Media Buttons

I try to keep current with what the kids are doing these days so naturally I have my nose in social media. I had buttons for Twitter, Facebook and LinkedIN but no Google+ up to this point. I know the service has taken it on the chin a in the media but I won’t be ignoring Google or it’s social platform. I actually think they are on top of their game in terms of user interface design. Either way I remain active on both Facebook and Twitter but will continue to hedge my bets and migrate content to Google+ as well. My sharing buttons also got a quick makeover switching from the AddtoAny WordPress plugin to Addthis. Addthis has a few more features for measuring your social button efficacy and I like the new aesthetic they bring.

Commenting

I also went ahead and added Facebook’s commenting feature. I have been watching it proliferate on the web and think it’s a good choice, particularly for sites like mine with light commenting needs. Disqus is also a good community discussion tool I see used often. Facebook comments is an excellent plugin. Just one page with 363 lines of code. I did have a little conflict with the Addthis plugin though. My new Addthis ‘Like’ button was displaying twice when the comments plugin loaded. Moving the FBML setup function in the facebook comments plugin from the footer to just after the <body> tag with a custom hook resolved it. I also checked it using the Facebook debug tool and got a few warnings about some missing og (open graph) meta tags. So I wrote a quick plugin to add these meta tags and get rid of the warnings.

Multiple Personality Disorder Cured

Initially I wrote much of the content from the perspective of we and us. I changed all of that. Initially I felt justified since I do occasionally outsource and work with teams, but the majority of the time it’s just me. For some reason I didn’t feel comfortable talking about my company as a one man show. But it is what it is and I have found a lot of my clients actually choose me because of this, not in spite of it. They prefer working directly with an individual who can give them the personal attention their project requires.

Onward

I went through most of the site content and meta tags and made assorted other tweaks to try and get my Google rank up. There are a few more updates planned around the corner, but in general I feel that an itch has been scratched and I can move on now with other projects. I hope to post some examples of other website updates in the near future. I know there is nothing earth shattering here but I like to keep it simple and hopefully I gave you some ideas on some little things you can do to update your own site.

May 27, 2012

Disclaimer: It’s probably not the oldest living website, but it’s pretty old.

I have been making some updates lately to a site I originally designed for a client in 2001. Naturesong.net is a site that sells CDs (and now MP3 files) of recordings from various natural environments.

2001 Flash Website

Have a look at the original 2001 Flash website. It features a little intro sequence, a poorly drawn animated cursor and I love how the frog hops around the menu. It’s fun to go back and see how things have changed from then to today. It is ok to make fun of my own work.

Rounded Corners in 2001Back then it was cool to build sites using Macromedia Flash (now owned by Adobe). This site was probably designed using Flash 5. We don’t use Flash to design websites any more. Search engines ignore information inside Flash, basic browser functionality is difficult to retain (next, back, bookmarks, etc…) and it doesn’t work on iPhones or iPads. This last item was the probably the final nail in the coffin for Flash websites. As website design has matured as a discipline over the years, the focus has moved away from entertainment value and novelty to standards emphasizing accessibility and usability. Flash is generally not part of those standards although it does have it’s place in multimedia applications such as streaming video, audio and games such as Farmville, The Sims, Journey of Jesus: The Calling, Pot Farm, etc…

The Shopping Cart

The store was originally linked to a turnkey solution that called goemerchant. We basically linked the buy buttons to the 3rd party shopping cart. Somewhere along the way the client decided to drop the third party shopping cart and use his own. I programmed a custom shopping cart for the site that we continue to use today.

Custom CMS

I also provided a custom content management system for the client to manage various aspects of the site including page content, meta tags, products, sounds, customers, resellers and orders.

Edit Products

The client can manage many aspects of the website from the CMS

No More Flash (well sort of)

The audio is now fully iPad friendly thanks to the brilliant work of @schill and his soundmanager2 code. Although it does use Flash (it’s ok for multimedia… remember?) it also utilizes HTML5 fallback for non-Flash devices. There is a ton of functionality packed into this code. I am pretty sure it could cut a Coke can right in half if the situation required.

HUGE Uploads!

You can also now purchase the recordings in a downloadable MP3 format.

Mp3 Player

In order to allow the site administrator to upload huge (150+ mb) audio files I utilized another brilliant piece of software developed by blueimp called JQuery File Upload. HTML5 is used to transport large files to the server via AJAX and display detailed progress information.

Huge file uploads using HTML5, AJAX and jQuery

Huge file uploads using HTML5, AJAX and jQuery

The Design

I decided to stay true to the overall feel of the 2001 design even though the color scheme looks a little dated now. It has kind of a nostalgic kitsch quality to it. I feel the site is still attractive, usable and it still works.

But Wait There’s More!

I could go on about the details that have gone into the different iterations of this website since 2001 but I am sure you have other things to do. I thought this was an interesting point in time to give a snapshot of what a site developed in 2001 looked like and how it’s evolved over time as web technologies and my skill-sets have evolved.

If you want more information, liked or hated this post please let me know. I would be happy to chat with you more on twitter @websitedesignby, facebook, google + or use the comment form below.

May 7, 2011

We now have a demo up featuring a video player developed by Ross Sabes.

Video Player

This player utilizes a full featured custom back-end video database management tool.

Web Video Player Admin

Each video title can support multiple files in a variety of formats (FLV, MP4, Ogg, WebM, etc…) and settings for maximum compatibility and performance across the widest possible array of devices. The player can be customized to detect the users bandwidth and play the most suitable Flash format available. If the visitor is using an iPad, iPhone or iPod the player is programmed to use the compatible MP4 format with both high and low bandwidth options if available.

Video Edit Screen

Videos can be assigned to multiple pages by the administrator.

Select Pages for the Video to Appear On

Select pages for the video to appear on.

Videos can also be tagged for search engines and other custom functionality.Tag videos for addtitional functionality

Visit the front-end here
For a demo of the back-end contact us.

This program was developed using:
MooTools
MediaBox
and MooFlow

October 7, 2010

MediaBox is a very cool MooTools based JavaScript modal overlay. It has a bunch of bundled in features for displaying various types of media and galleries.

One issue that Google would not help me solve was embedded Flash not appearing in the media box in Safari. I could switch tabs then switch back and the Flash would magically appear. I assumed it was a display conflict Safari was having when everything fired at once with the loading of the MediaBox and the Flash embed. A more elegant solution may involve a listener object on the mediabox, but this seems to resolve it.

My solution was to simply delay the swfobject flash embed by half a second using setTimer();.

Here is the version that does not work in Safari (mac):
http://www.websitedesignby.com/mediabox/mediabox-flash-notimer.html

Here is the fix with the timer:
http://www.websitedesignby.com/mediabox/mediabox-flash.html

Direct link to box content containing hack/fix:
http://www.websitedesignby.com/mediabox/mediabox-flash-box.html

August 13, 2010

There are 2 ways a website can be developed: either as static web pages or as dynamic (database driven) web pages. Let’s discuss both varieties:

Static Web Pages
All web pages are displayed using HTML code. Static web pages are essentially a series of linked HTML documents. To make a change to a static website one must edit the HTML code directly on each page. While this may work for a simple web site that has 3 or 4 pages, it quickly becomes inefficient as your web site grows in depth and complexity.

Database SymbolDynamic, Database Driven Web Pages
Database driven websites are fast becoming the standard for website development. The content on a dynamic website is maintained in a database. When a visitor requests information for a page, product, article or photo, that request is processed and returned by a database.

Web Site Maintenance
Typically the information in the database is maintained through a secure administrator log-in area. A well designed administrator log-in area makes it easy for anyone to update the website content without having to learn HTML or sophisticated website design software.

Content Management Area

If you are interested in developing a dynamic, database driven website, have static web pages that need to be converted or want help with an existing dynamic website please contact us for a free consultation. We will be happy to discuss the various benefits and options available to you.

You can also use the comments form below for additional discussion and questions.

April 12, 2010

I am looking forward to the launch of Adobe CS5. Although I have never been an early adopter of major software releases, preferring to read others feedback and take my time to understand the benefit of new features before shelling out hundreds of dollars, this release has my attention.

Adobe Flash CS5
I just got through watching a sneak peak of Flash CS5 at gotoAndLearn.com and it looks like Adobe is hitting the suite spot when it comes to what developers are looking for.

Text handling and fonts have always been a weak point when working in Flash. I am impressed with the features in CS5 that address text flow, better multi-lingual character support and the new font palette.

Flash has established itself as the most popular video streaming platform on the web today. Being able to scrub the video on the stage and add ActionScript cuepoints will be extremely useful timesavers.

Flash’s real power lies in it’s powerful ActionScript programming language that gives developers the freedom to shape the user experience without limits. Code snippets and a host of new features make it easier for programmers to control Flash using ActionScript. The XML-based source files are interesting too. From what I can tell at this early stage it looks like Flash is opening up their traditionally closed, complied SWF files for developers to be able to edit it’s properties and library items on the fly. Not only will this help with using version control, but also unlocks some interesting possibilities with custom content management systems.

The most hype about this release is centered around it’s wide distribution feature. In a nutshell, Adobe wants to allow a project created in Flash to be deployable across any platform (web, desktop, mobile, tablet). Ahead of this release Apple has announced it will not support applications developed using 3rd party (Adobe) software on the operating system running their widely popular iPhones, iTouches and iPads. This latest plot twist in the friction between Apple and Adobe definitely puts a crimp into this feature. However even without the Apple devices this feature will make it easier for developers to port their applications created in Flash to other popular mobile devices running Google’s Android, Windows and others.

I am much more excited about the release of Adobe’s CS5 than I was for the launch of the iPad. This one looks like it might actually be worthy of the hype.

February 6, 2010

I have been using authorize.net as a merchant service provider for many years. They provide a payment gateway that enables you to authorize, settle, and manage credit card and electronic check payments. Their payment gateway can be integrated into your web site to accept payment online, or you can use their virtual terminal to process credit cards manually.

Are you ready to get started with your authorize.net application process?
sign up now

If you would like more information about authorize.net or accepting credit cards on your web site please contact us.

September 26, 2009

You can now log in to post comments on my blog using FaceBook via WP-FacebookConnect.

* I have subsequently removed this functionality.
– The Manager

September 10, 2009

This example uses the php class developed by Mark Sandborn (now hosted at code.google.com here). I made a couple slight modifications to the class. Using Marks’ class I created this form to serve as a starting point for you to present your user with various UPS shipping options and their associated costs to integrate into your own shopping cart.

download my sourcecode for the form
Rates and Service Selection XML Tool Developers Guide from UPS

Happy coding!