Jan Shawkey Web Design Portfolio

Websites:

Designed from scratch (using CSS)

The above is a recent site. It contains a fast loading javascript slide show to display the owner's products. Thanks to Dynamic Drive for the javascript code and Grsites.com for the background image.

Aria Spa - One of my most recent sites.  Brought in to make the former site more sophisticated.  One of the additions was a slide show I made from a script by Dynamic Drive.  I wanted the visitor to have some interaction without the pages reloading.  I am getting spoiled by this effect.  The site is particularly light and fast loading. 

TAPS - Teen Adolescent Placement Services - My involvement in this project is to re-design their website and to feature two upcoming major events. I am still in the process of the re-design so you will be able to see some of their original pages for comparison. I took a couple of the colors in the logo and incorporated them in the navigation bar and background. It still needs some more images. The emphasis up to now has been to incorporate the upcoming events.

Lorenzo's Dog Training Team - I was contracted to finish the site after the original designer had to leave the project. My tasks were to tidy up some of the code, increase font sizes, move some images around, etc.  I also edited the slide show, recommending against a continuous moving show and making it play just once.  I also was responsible for moving it from one server where the new site was being constructed to the host server at Yahoo.  Additionally, I had to set up who the contact form was going to be sent to.  This involved choosing to not use the PHP the original designer was using but the code supplied by Yahoo - the host.

 

Dating for Commitment - My client on this project is an author, consultant, and television host. The project involved designing a logo and website using CSS. I also needed to incorporate a Paypal store and online booking service. Videos were included.  I designed a sister site - SparklingIQ.com - that expresses more of the client's personal side. These two projects represent my best examples of designing with CSS from the start of a project.  The latter site also features a Flash logo on the home page.

Analytical Chemists Inc. - My client was re-doing their present site by themselves and had gotten as far as they wanted to take the re-do.  They were going to use frames.  I suggested using no frames and incorporating CSS.  They wanted a simple site.    Note the fixed navigation bar on the side of the page.  If you are using Firefox you can see by the CSS file by clicking here.

Designed from scratch (pre-CSS)

LMP Accounting - This was for a certified Quickbooks consultant. It contains some animating gifs created in Fireworks.

Carl's Delivery - The owner wanted to set off his delivery business from his other operations.  I developed an independent look and we put it on its own domain.

Mobile Homes and More - This is a simple, one page site.  The idea is to get my client's services cleanly and simply presented to his customer base.  Navigation is simple and quick.  Rather than creating a page for each section, I used named anchors, keeping the visitor on the same page.

Thrust and Parry - My own blog. Designed in Dreamweaver and Fireworks. Updated infrequently.  Includes Amazon and affiliate marketing links.

LL Marble Granite Tile - This is still in its initial draft form as I wait for further instruction and images from the very busy owner.

San Diego Courier & Concierge / Baggage Point - This is the website of a company I own.

Sites no longer active - designed from scratch (pre-CSS)

The following site I designed is no longer available live on the Internet.  The owner sold his company to a larger company and the site was no longer needed.  I have moved parts of it to a site I own so you can see what the work looked like.  I have disabled some of the links (i.e., the form page at Cambridge doesn't submit anymore but you will see the extensive form developed.)

Cambridge Estate Planning - A five page site with the main purpose being an online form for visitors/clients to fill out.

These next two sites, too, are no longer active. Thus, they are hosted at one of my sites.

Interview Chair - No longer an active site this site was designed as an e-commerce site tied to Paypal.  It also contains an extensive form for clients to fill out. 

My Pug Mug - A nice little e-commerce site.  I used Paypal for the e-commerce platform. 

Updates to Content Management System sites

Office of James Burnett - My task with this client was to create an animating gif from photos the client supplied.  Since creating the animating gif for their home page, OJB has recently gone on to re-design their website.  It looks like they retained much of the animating gif, while expanding upon it.  You can see my effort here.  I was also tasked with changing the CSS code in different places and creating and adding a small Flash movie.  The client was using a Content Management System.  It was necessary to get up to speed with what the CMS did and where the CSS fit in. 

Martha Christopherson - Ms. Christopherson is a published writer living in San Diego.  She chose SquareSpace to host her website.  SquareSpace is a fine CMS with powerful features.  Ms. Christopherson had done a great job in putting up her website to feature her published works and just needed an experienced set of eyes to help fix a few things.  Some of the work we did over the phone together with both of us logged onto the SquareSpace site.

Why you should use CSS for your website!

External (in a separate file) CSS, or Cascading Style Sheets, are the presentation code that tells your browser how to show your website's content (text and images). The HTML structure - made up of divisions, headings, paragraphs, lists, etc., - holds the content.   CSS tells the browser what font size to use, what color the text should be, where to put the margins, and a great deal more.

Many earlier and present websites - several of mine included - were designed with the content, HTML structure, and presentation code mixed together.

This meant that the each page would have lots of code to tell the browser how to diplay the page. Finding the content - in order to change it or update it - was time consuming.  With all that extra code pages took longer to load, too.

With CSS, one puts all the presentation code in one file and links that file to each page.  Thus, the content is easily found and changed and the presentation code is easily found and changed, too.  With one external style sheet you can tell every page on your site how it should be displayed.  Change the one style sheet and you automatically can change every page on your site.

As an example, look at the View>Page Source for this page.  You won't see any presentation code.  You will see one line of code (5th line) - <link href="css/portfolio.css" rel="stylesheet" type="text/css"> - that links the page to the style sheet.  Take a look at the style sheet to see the presentation code.  Notice how clean and spare it is.

Now, to compare this to the former way of doing things, look at this former portfolio page, then click View>Page Source and see the difference.  See how the content is boxed in with more code.  Look at all the font tags repeating throughout the page!  If you needed to make changes which system would you rather use.  Of course, the CSS system.

Skills:

Hand coding in CSS, HTML. Good knowledge of Javascript. Some ASP, some PHP.

Website Updates and Maintenance:

I have done several update and maintenance projects on websites for which I didn't do the initial design.  These were:

The skills needed in these types of projects is to quickly grasp the structure of a site one didn't set up and maintain the site's integrity while making the needed changes.

Internet projects - non-design:

From 2006 - the present, I have been doing various Internet projects for a business textbook author.   Each of these projects has been a little different. Skills needed have been the ability to get up to speed quickly with each project, work efficiently, keep an eye out for better ways to complete the tasks, and to stay in good communication with the author.  Tasks included Internet research, Access database entries, downloading and uploading files, burning a presentation CD, and updating course outlines.

Flash:

The following are meant to show I have a working knowledge of Flash. My knowledge of Flash is less than that of Dreamweaver and Fireworks but if it is a small project to add to a website I can handle it.

Here is a Flash intro I did using a logo from a website I created

Here is a Flash movie, in the style of a greeting card

Here is a simple Flash cartoon I did

Fireworks:

Here are some examples of Fireworks I have done that are not a part of published websites

Copywriting:

I picked up a little research and writing project some time ago that involved researching certain equipment to write a piece on for an Internet site.  The idea was to frame it from the buyer's perspective.  I have also done copywriting for brochures, sales pieces, and a national magazine ad.

Contact:

Email: jan.shawkey@gmail.com    Phone: 619 208-3301    vCard

Location:

I am locally based in the San Diego area in La Mesa.

Programs Used:

Dreamweaver, Fireworks, Flash, Freehand, MS-Access, OpenOffice

©Jan Shawkey 2009 - 2010. All rights reserved.