Why hire Andy to build your site?

  • 20+ years experience building for the web

    I’ve been designing and building websites since 1993, starting in high school and moving into commercial work a few years later.

    Being a part of the web for so long has taught me this: excellent sites aren’t just about the code behind the scenes. Impressive visual design, engaging content that exceeds the audience’s expectations, compatibility with devices, and hard-won search ranking all play an enormous part of your site’s success.

    Click on a link or image below to view my work. If you have any questions about examples, pricing, or quotes, feel free to contact me — I’d love the opportunity. Thanks!

    Andy

  • 7 years teaching professionally to Diploma level

    I started teaching at TAFE in 2008, after a year as a student earning qualifications and mentoring others.

    I regularly teach these languages and technologies in classes ranging from Certificate III to Diploma level:

    • HTML and CSS, used for structure, content, and styling
    • JavaScript, used for interactive effects in the page
    • PHP, used for behind-the-scenes databases and online shops
    • WordPress, for sites that can be edited easily by their owner
    • Search Engine Optimisation, the art of ranking high on Google

    Hourly tutoring and consultation services are available if you’d like to learn the skills yourself or get advice on improving your site.

  • Spectrum of skills, incl. logos, WordPress, and SEO

    Beyond coding and design, I can offer the following additional services for your projects:

    • WordPress and other CMS customisation, including themes and plugins
    • Search Engine Optimisation consultancy to identify issues and their solutions
    • Photo retouching and simple restoration work
    • Content editing and proof-reading
    • Logo and icon design
    • Video and audio format conversion for the web
    • Image scanning and conversion
    • Desktop publishing and formatting (I hand-write almost all of my own teaching handouts)
  • Extensive knowledge of browsers & mobile devices

    Websites are viewable on an increasingly diverse range of devices — from phones and tablets to smart TV’s and ebook readers (and more) — and each device has its own opportunities and limitations. It’s even brought about a new field called Responsive Design.

    Over 30% of website visits are from mobile devices, so having a site that adapts well on mobiles is key. Nothing’s more annoying than having to “wade into” a page to read the tiny text, or loading several pages on a slow phone just to find where a business is.

    I can examine your existing site and recommend the best way to adapt it to mobiles, most of the time requiring only negligible changes to your existing site.

  • Strong usability & accessibility focus

    Usability and accessibility are major aspects of building great sites that are friendly and memorable, and they’re my primary focus in design.

    Usability is about shaping your site’s layout and features to make sense to your users — making it easy to navigate and find information fast — while accessibility is about ensuring everyone can access your content, regardless of how they use the web.

    Google and other search engines prefer accessible sites since they can interpret the content easily; technologies like Flash can lock whole chunks of your site away from search engines and users alike!

    For clients with large sites, user-group activities such as card-sorting can help organise your content based on real user data.

  • Single contact for design & feature development

    Having a diverse skillset — from coding and design to interactive game development — often allows me to cover many of the tasks that would otherwise require outside help.

    In the case of a large web site concept, I can draw on industry contacts (some of whom I’ve personally taught) to develop specific functionality while aspects such as overall layout and content remain developed in-house. Confidentiality is always assured.

    A single contact for your website development can make it easier to get your ideas across quickly and consistently, and ensure quality control, without a level of abstraction from the person who’s actually putting the system together.

  • Reliable support, hosting, and consultation

    I pride myself on being honest and straightforward in what I recommend to clients. For example, when placing your website online (referred to as hosting), I recommend signing up for your own hosting account and keeping a copy of the passwords. Having them helps avoid the “lock-in” trap that many web development companies use to keep clients almost against their will.

    My recommended hosting provider is the same one as I’ve used for this site since early 2007, so I know they’re trustworthy and reliable.

    Finally, when consulting on changes or upgrades for an existing site, I’ll discuss each issue with clearly explained factual evidence and optionally create a report for you to review in your own time.

Premier Communications Group

Premier Communications Group is a leading Sydney Public Relations firm.

Working from mockup images and guidelines provided by Gina at Hollywood Black, I hand-built the structure and style of the fresh new site she’d designed, demonstrated my working prototype, then merged it into WordPress to create a dynamic site.

WordPress required some hefty customisation to achieve the requested style and functionality, which includes a unique menu system with intricate positioning and scripting for compatibility across browsers, custom post types and templates, and several plugins extended with new features.

The final site is clean and easy to read, accessible, conforms to web standards, and can be easily updated by the client using simple editing tools protected by a login system.

Paryn

Paryn is a marketing, sales support, and process improvement company.

Paryn marks my first time working with Gina Jääskeläinen at Hollywood Black, a digital and print media creative agency in the Blue Mountains.

My task was to take two mockup images — one demonstrating the site when it first loads, and the second after clicking to expand its content — and convert them into a real site with an animated transition between the two states.

Single page” sites such as this one present a challenge from a design point of view; the ultimate goal is to condense a lot of information into a small space while avoiding visual overload, at the same time guaranteeing that users and search engines can “discover” the hidden content naturally.

Craigdolls Ragdoll Cats

Craigdolls is a small family cattery located in the Blue Mountains NSW.

Quite a lot of web work centres on updating sites that use old technology, and Craigdolls is a perfect example; Rhonda’s existing site had been built using Flash, so it didn’t work on phones and tablets, search engines had trouble reading it, and updating the content was a clunky process.

Certain elements of the design were iconic — the pastel colours, the banner photo, the paw prints in the background — so I made sure to integrate them into the new WordPress design prominently even as the layout adapts to different devices such as the iPhone, iPad, and Android mobiles.

As well as being much more accessible and friendly to users and Google, Facebook and social media buttons have been integrated, and updating the site is now easy.

JS Rage

JS Rage is a Streets of Rage 2 clone written in JavaScript from scratch.

I’ve been a gamer since the Sega Master System and C64 days (and arguably before that with handheld LCD games). These days I have more of an interest in how games work and developing my own than playing them.

Streets of Rage 2, along with Street Fighter 2 and Sonic, were formative games in my childhood. This long-running project is my attempt to bring it to the web using new browser features such as Canvas and Gamepad input, learning tons about game development along the way by building an entire game engine from scratch called “xlib”.

Note that right now the game can only be played with a keyboard or gamepad — no mobile devices yet.

No commercial use is planned for this project, and its code is licensed for free non-commercial use.

JS Swirl

An animated graphics generator inspired by my childhood Spirograph, written in JavaScript.

I’ve always been fascinated by how simple math can result in intricately beautiful designs… I think owning a spirograph set as a child was the trigger. JSSwirl is inspired by that childhood experience.

This started as an experiment in my idle time and eventually became detailed enough that I wanted other people to be able to fiddle with the settings and create beautiful things. After changing the settings, you can save your effect on your browser, and with a single click get the code to embed your effect on your own personal site.

For commercial use of JSSwirl, please contact me. Licensing is US$10 per site with discounts when purchasing in multiples.

JS Shooter

An simple spaceship shoot-‘em-up game intended for a website header or footer.

This was a challenge from a student after they saw a work-in-progress version of the JS Rage game. Over the course of a weekend, I took the core code of JS Rage and turned it into a simple shoot-‘em-up that could be used at the top or bottom of a gaming site to make it fun and memorable.

Note that right now the game can only be played with a keyboard — no gamepad or mobile devices yet.

JS Swoop 1 and 2

Two demonstrations of how effective a simple particle swarm can be.

These demos started as rough experiments with making a point on the screen follow the mouse. Given some colour and context, they can be memorable, high-impact features that serve as a mental trigger for users to remember your site amongst a hundred others.

The real bonus with these effects is that they work without interaction but are incredibly easy to discover by accident, delighting the user.

Swoop 1: Lantern would be perfect for a lighting shop, a camping site, or a gothic design.

Swoop 2: Colour cycling would be great for a computer or electronics shop’s top banner, faded out to be only subtly noticeable behind the company logo.

Note that right now these demos only work with the mouse — no mobile devices yet.

Neverwinter Nights 2 Character Builder

A detailed character builder and database for the game Neverwinter Nights 2.

Built as the front-end for a complex programming experiment turned public website, I created this design from scratch with the exception of two background images taken from the source game. The site includes several sections that required adjusted layouts whilst maintaining overall design consistency.

I was responsible for the original graphics work in Photoshop and Illustrator, the structural code to create the distinct elements of the page, and the styling code that defines how the site appears in a range of browsers.

NWN2CB is standards compliant and conforms to accessibility guidelines with the exception of the Character Builder that requires extensive JavaScript.

University of Western Sydney Library

A fresh, clean and inviting redesign with a focus on search and accessibility.

The UWS Library selected (TWEEK!) to redesign their homepage and secondary content pages with a focus on immediate search, ease of use and accessibility. I was contracted by (TWEEK!) to build the mockup images, template web pages and graphic resources required.

After consultation with the Library I finalised the design and delivered the complete package including the site templates, nineteen header images and six high-quality vector icons.

The UWS Library site is standards compliant and conforms to accessibility guidelines except where restricted by external legacy content.

Note that the Library has since transitioned to new technology and replaced their site; the link above shows my work shortly after launch.

3 Gen Creations

3 Gen Creations hand-craft homewares, jewellery and paper products.

A friend and I I developed this site alongside 3 Gen’s business launch. It includes full shopping cart, membership, invoicing, administration and stock-control systems custom-built to requirements. Large parts of the system are re-usable for later projects.

I had full control of the site’s presentation along with some input on the business logo and the text used throughout the site. I took a very user-centric approach to the front page, with a direct purpose statement and immediate eye-catching content.

The 3 Gen site is standards-compliant and conforms to AAA accessibility guidelines.

Note that 3 Gen Creations has ceased business; the link above shows my work shortly after launch.

Corporate Risk Group Logos

CRG Australia required a crisp, professional logo suitable for screen, print and embroidery.

Under contract to 3 Gen Creations, my job was to design three of six logos to be presented to the client. I built three distinct logo styles — “aussie”, “corp” and “imagery” — and from those a series of colour, text position and iconography variations using a small set of CMYK colours.

The client chose one of the “corp” versions and we refined the logo using his feedback, adding the Southern Cross. The finished logo was delivered in six file formats with three colour variations.

Minchinbury Dental Care

MDC is a dental clinic serving the Minchinbury area.

This is the 2007 redesign of the original MDC site below.

I redesigned the site to handle the increased amount of content after a year’s worth of additions, simplified the navigation, and added more imagery provided by the clinic to catch the eye. White space was increased, and the content frame was made bolder with less “distraction” elements near the body text.

The feedback/question form was also beefed up, and now allows an image to be uploaded as part of the message.

The MDC site is standards-compliant and conforms to accessibility guidelines.

Upper Mountains Youth Services

UMYS is a support service and drop-in centre for youth in the Blue Mountains.

This was a team project involving Penny Haslop, Jesse Fisher and I. UMYS needed something youth-oriented, professional-looking and customisable to replace an aging site. We settled on WordPress for simplicity and portability; Penny worked with content and client liaison, Jesse created the visual design, and I constructed the WordPress template and styling.

The design includes extra shadow styling for Safari 3 and Opera 9, enhancing the design for those browsers without affecting others.

The UMYS site is standards-compliant and conforms to accessibility guidelines.

Note that due to UMYS merging with another youth service their website is long available; the link above shows my work shortly after launch.

SilverswordDVD

SilverswordDVD was involved with DVD production, mastering, and marketing displays in Canberra.

I developed this site in mid-2000 after being contracted by the owner. I’ve rebuilt it here, since the original page contained a horrific number of kludges belonging the last generation of web content: table-reliant structure, <font> everywhere, hacks for Netscape 4, spacer images… the list goes on.

SilverswordDVD shut shop a few months after the website was launched but the design remains one of my favourites.

The SilverswordDVD site is standards-compliant and conforms to accessibility guidelines.

Sadly, due to copyright issues, only the first page of the site is available.

Minchinbury Dental Care (original)

This is the original MDC site, designed in late 2005.

MDC wanted a smallish, “non-scrolling” site to detail their services — something light and friendly with clean presentation. We achieved that while still providing a lot of content and a feedback form built into the design for quick enquiries and comments.

The MDC (original) site is standards-compliant and conforms to accessibility guidelines.

Note that due to copyright restrictions the link above shows a image of the original site.

A difference of layout Demo

This is a demo layout built during the holidays between teaching. What started as a rough test of a unique menu turned into a detailed design that used a lot of new graphical techniques.

The aim was to create something fresh and lively without becoming frenetic. The header is specifically styled to give an impression of morning crispness, when — as a friend put it — “the air is new”. There’s subtle shadows and texture everywhere to soften colour transitions and ensure the column layout isn’t dominant.

Many thanks to the photographers of the beautiful Creative Commons Flickr images (credited in the page). I plan to update this demo later with JS features and the unique menu dropdowns originally conceived (updated 2010 01 30).

A Difference of Layout is standards-compliant and conforms to accessibility guidelines.

Sans & Serif Demo

This is a demonstration page I designed and built while experimenting with Blueprint, a CSS “framework”.

There’s still a couple of additions I’d like to make, such as finding a good image to balance the right hand side (using the same “box-breaking” style as the left). The site works perfectly in all five major browsers, with Webkit & Opera 9.5 receiving extra styling such as shadows.

This is my first public page that uses Creative Commons imagery sourced from Flickr. Many thanks to the photographers credited in the page, and to the Blueprint team for making consistent vertical rhythm so easy. This demo will change over time to include new design elements (updated 2008 06 04).

The Sans & Serif demo site is standards-compliant and conforms to accessibility guidelines.

Test Design 26 Demo

I was browsing through some ancient mockup designs and tried mixing a few ideas together. This is the result around three hours later.

Re-using a border style was my first aim, then capping the content area with an an unusual footer and using large styled type for major elements. Touches of contrasting colour stand out against a muted background suitable for a corporate homepage or an arty blog with strong content imagery.

The design has extra styling visible in Opera 9.5 and Safari 3, looking best in the latter — beautiful text, a glowing header and subtle shadowing. This demo will probably receive additional polish (updated 2008 06 15).

The Test Design 26 demo site is standards-compliant and conforms to accessibility guidelines.

Café Nueve Demo

I created a basic mockup of this design along with a rough prototype about a year ago as part of a course. Another mockup was chosen but this remained my favourite.

The original design needed some serious loving; it’d been put together quickly as one of six mockups and lacked detail. The header bar, backgrounds and imagery were completely rebuilt for a semi-flexible width since the original “infinitely wide” concept didn’t work well visually.

As always, the site looks best in Webkit because of additional styling. I’ll probably add extra detail over time (updated 2008 07 02).

The Café Nueve demo site is standards-compliant and conforms to accessibility guidelines.

Cascading Style Sheets 3 Demo

This is a demonstration page using several new features of CSS3, including multi-column text, drop shadows and rounded corners.

As at 2008 03 16, Safari 3.1 comes closest to displaying it properly. Firefox 2 displays the page without many of the visual touches, and Firefox 3 without stylish first-lines and text & box shadows. Opera 9.5 shows many of the effects but without column layout. Internet Explorer 6 and 7 don’t support any of the new CSS3 features so while it displays something usable, it’s not very exciting.

See the reference image for how it’s supposed to look (screenshot from Safari 3.1, with one missing element photoshopped in). I plan to keep this demo page evolving as CSS3 support in browsers increases (updated 2008 03 16).

The CSS3 demo site is standards-compliant and conforms to accessibility guidelines.

Up to navigation

This page changes as projects are completed. I plan to also include example layouts and tests of technologies such as canvas and SVG.