My Web Design Blog

Why long web pages are good...

2010-03-22T09:27:00.001-07:00

This Conversion rate website wrote a great article. One interesting point is that it seems big or long webpages sell - I'm not talking detailed I'm talking HUGE pages! interesting...

Mootools Js Image Zoom

2010-03-07T00:18:00.001-08:00

Mootools Js Image Zoom

Free Icons

2010-03-03T04:16:00.001-08:00

Free Icons Website. A Great Resource.

Google JavaScript Fade effectf

2010-02-10T07:31:00.001-08:00

from david walsh's handy site

Web Development on a shoe string

2010-02-10T04:27:00.000-08:00

So you want to make a website but don't want to pay a penny to get it done. Its not as hard as you may think.

There are some great free tools I highly recommend:

Paint.net For image editing

Notepad++ For text editing of html, css and js

Firebug For tweaking and testing changes

IE Tab for a quick swap between firefox and IE (the 2 most used browsers) for testing (as Internet explorer is not a standards compliment browser so makes web creation hard)

There you have it, you don't need to buy expensive software like photoshop or dreamweaver, the above make free replacements - sure paint.net does not have as many features but its much more user friendly and sure notpad++ is not a WYSYWIG editor and is not as powerful as dreamweaver but its free! and it will make you better at writing code from scratch. Remember you can always use free templates as a starting point.

I'll list some of the sites I have made with the above soon.

News scroller in Javascript

2010-02-10T03:25:00.001-08:00

News Scroller not used or tried it yet but seems like it could be good.

Great SEO and Analitics tool

2010-02-05T08:14:00.000-08:00

This SEO and Analitics tool lets you check page rank Yahoo indexed backlinks and all sorts of great stuff, that are a bit cheeky and make you use a image you have to put in a webpage - which is fair enough for a free tool - but no fear a note pad page or opening a new tab and using firebug to edit the html will suffice.

Some CSS3 examples

2010-02-04T01:10:00.001-08:00

CSS3 Info and examples can be found here.

HTML Tag Crimes

2010-02-03T08:43:00.000-08:00

Great post about HTML tag crimes I have used some of these on my sites *ashamed face* but I have at least never used blink or marquee.

Conversions

2010-02-03T08:15:00.000-08:00

Lots of traffic is great but if people leave your site unhappy or confused or disappointed or not having done something you like your visitors to do then that's bad.

Conversions are a really good measure of site success. If your an eCommerce site Conversions are sales. However they can be other things as well. This includes, signing up to a newsletter, getting a phone call or email about work or just having people read your content. Whatever you want to call it, conversions are the reason you set up the website in the first place (I want a website to promote my shop, or to promote my theories, or make money etc). So make sure you measure them and they are the focus of your site. Success pages when a person signs up to a newsletter or buys a product are a great way to know your conversion rate or percentage. Pick a page (or 2) that you would ideally like all people to see and measure it. If its a theory or idea you're promoting make sure people have spent a long enough time on the page to read it.

Traffic is a means to an end dont just focus on traffic(via SEO'etc)

Plan a website before Development

2010-02-03T08:01:00.000-08:00

I guess about a year ago I took over the site kwokwingchun.com and moved it to www.kwokwingchun.co.uk. I had wrote some of the articles for the original site when it launched but did not know anything about web design back then. A few years later and hours and hours of re-factoring I'm getting closer to the site I want. I can't help but think if only I knew everything I know now back then. But I guess that's the case with most things in life. The site is about Wing Chun a martial art and it is becoming very popular its just reached the 10,000 hits a month mark (which i think is good for my target area - second highest alexa rank for a wing chun site).

But If I got to start from scratch it would be great. On my next big web venture before i write a line of code I want to plan:

- The navigation structure (how pages link to eachother via what urls)
- The content (how to cover all the topics logically)
- An SEO friendly design that has tags from H1 -> H6
- JavaScript plugins to each page for non important content that make it easy to update all pages (centerally held announcements)
- Analitics - set targets and set up ways to monitor conversions and traffic flow
- Viral marketing strategy
- Then the design
- Then the content

I will also make sure I am using a robots.txt file from the start and an XML site map and search engine WML plugin - then I would like to make sure the images have logical SEO type names - alt tags - titles - custom tool tips. As I write the pages I want SEO all the way down the content. I want fast loads from the start this means compressing javascript and css but keeping backups of the original (separate) scripts. compressing images to the exact size and making sure the height and width are specified in the code. I would also like make sur i dont commit accessibility crimes. I would want a good blog and RSS and favicon linked in from the start.

Then It would get submission and be awesome.

If you try and do some of this after you end up having to do redirects robot excludes rewriting css all the time - losing images and re-uploading them having to compress later and it makes far more work and is soul destroying.

Javascript breadcrumb navigation

2010-02-02T14:14:00.000-08:00

Instant Javascript breadcrumb navigation Great bit of code (after you strip it down a smidge).

Tracking outbound links (in Google Analitics)

2010-02-01T06:26:00.000-08:00

So you link to other sites and would like to know how many clicks those links get? An easy(ish) way i have started to use is to add an extension /outbound/ to my website and then make a page for each outbound link i want to track (that's the "hard" bit) the url now looks like http://www.mywebsite.com/outbound/yourwebsitename then on that page you add google analitics and a 301 forwarding javaScript that sends traffic to the target website. You will also want to add the address /outbound/ to your robots.txt disallow so it wont get indexed. Or add a no index rel tag to the link. Now in google analitics you can see how many page views http://www.mywebsite.com/outbound/yourwebsitename has and this will tell you how much traffic you have sent another site.

I wont lie this is pretty hacky, but it works well. The only implication is that the site you link to many not get the same amount of page rank because they did not get a straight link (but im not sure about this).

I think Facebook use this method (with nasty auto generated URLs) - well they gave me the idea anyway as facebook links seem to do this.

Google Talk about SEO

2010-01-30T15:41:00.001-08:00

Google SEO video explaining why and how you should make websites so they do well in terms of search results and ultimately conversions.

JavaScriot Shopping cart for PaPal

2010-01-22T03:39:00.000-08:00

Seriously Good very easy to use and will make a big difference to some basic eComerce sites

JavaScript Product Highlighter

2010-01-17T07:23:00.001-08:00

Very cool and very clean uses MooTools

CSS clip property

2009-12-28T06:51:00.001-08:00

Foun this css clip link pretty interesting - yet to decide where to use it thou

CSS Bubbles

2009-12-02T03:18:00.001-08:00

CSS bubbles

10 usablility crimes of webdesign

2009-12-02T03:10:00.000-08:00

10 usability crimes of websites I'm guilty of at least 4!

MooTools JavaScript

2009-11-17T06:37:00.000-08:00

I'm by no means an expert but MooTools is the best Js Library I have used. I recently implemented some MooTools quickly on my site and found it is fast, sexy and robust. Not sure when I started finding code sexy that's wrong but hey.

To Get Started with MooTools here is an awesome link Library

Browser testing

2009-11-07T10:20:00.001-08:00

A great site for cross platform browser testing

CSS links

2009-11-03T06:27:00.000-08:00

About CSS Sprites

Sprite me for making CSS sprites

SEO links and Tips

2009-11-03T06:11:00.000-08:00

SEO info

- Some key points to good search engine optimization (SEO):

1. Work out keywords (words you think people should be able to type in and find your site from)

2. Make sure the page title tag, page URL (web address), headings (H1 and H2 tags), and meta description (meta tags) have keywords in. adding keywords to alt tags on images and the image file name will also really help.

3. The more relevant content you have the better. People who work for Google, Microsoft and Yahoo (the big 3 search engines) are generally smart, they want their users to find content relevant to their search query. So give them what they want, you wont get far trying to get them to pick you up by dropping a few irrelevant keywords. Just write good content rich stuff.

4. Google likes old domains, so if you are moving domain let Google know about it and you can take your Google rank with you. (see Google webmaster tools)

Finally Use Google analytics, and webmaster tools. Consider using Google web optimizer when necessary. they are all free.

Web Design links

2009-11-03T06:09:00.000-08:00

Cool WebDesign blogg

Ugly but useful thumbnail maker - if anyone finds a better one let me know please

Useful JavaScript Pages

2009-11-03T06:05:00.000-08:00

JavaScript libraries <- A link list page to alot of the best JavaScript libraries.Animated faded div

Display a Random Div

Make a quiz with JavasScript

Java Script Pop Up

2009-10-21T02:32:00.000-07:00

This is the javascript (and HTML/CSS) to show a div the first time a user goes to a page but not the second time (or after a refresh or the user navigates away from the page).

I have used it to pop up a little un-obtrusive header that can be closed by clicking the cross.

The script is currently running on my martial arts clubs website.


<html>

<head>

        <style type="text/css">

        div.hidden {

        display: none;

        }

        div.pophead {

padding: 10px 0pt;

             text-align: center;

             font-family: Arial,Helvetica,sans-serif;

             font-size: 110%;

             font-weight: bold;

             background-color: #B7C134 !important;

                border:2px solid black;

             color: #111111;

             display: block;

             letter-spacing: 1px;

             line-height: 1;

             vertical-align: baseline;

}

      

</style>

    

<script type="text/javascript">

    function checkcookie() {

    popheaddiv=document.getElementById("pophead");

    if (document.cookie.indexOf("mycookie")!=-1) {

    popheaddiv.style.display="none";

    }

    else {

    document.cookie="mycookie=1";

    }

    }

</script>



</head>



<body>



</div>

<div class="pophead" id="pophead">

        New <a style="color: white !important; text-decoration:none" href="a link">Putney class</a> starts in the sports centre on the 1st of November! <a href="#" onclick="change('pophead', 'hidden');"><img src="/assets/2009/10/27/psd-delete-icon.png" width="16px" align="right" style="margin-right:80px;"></a> </div>



    <script type="text/javascript">

    <!--//check for the cookie and display div or set cookie

    checkcookie();

    -->

    </script>



<p> Main Page Body to Go Here :) </p>



    </body>

    </html>

Hello All

2009-10-11T11:41:00.000-07:00

Hi and welcome

Ok so I though it would be a good idea to keep track of all the web stuff I'm working on. My "ToDo" list is getting big and and it would be handy to have some backups here
as I forget what I have done.

About me:

I like Martial Arts, Rock Climbing, Cooking and lots of other things about life, too many to list maybe.

Technologies I use, or steal and adapt:

- (X)HTML written in Notepad, which only remembers one undo! Crazy I know but I don't want to pay for anything!
- CSS for style
- JavaScript for image galleries, image mapping and cookies for remembering you
- Java which I am still learning this for my job (with BSkyB) but hope to get some jdbc and interactive content live soon

Web content I am to blame for:

www.kwokwingchun.co.uk <- my wing chun instructors site

www.southfieldswingchun.co.uk <- my martial arts club website

www.eastern-arts.co.uk <- my friends business enterprise