Photoshop plays an essential role in optimizing the images that show up on my sites. I use a number of functions available to edit, manipulate, design, and optimize images to be displayed online.
Illustrator is the basis for my website layouts. I use a 980px grid system that can be expanded or contracted for responsive displays from desktop to mobile devices. Illustrator acts as the blueprint for my work, and is a powerful tool to create wireframes and visual designs.
Google Fonts - SkyFonts
Google Fonts is a font library with many free options to choose. Fonts are cycled on a regular basis, so font options are always progressing.
SkyFonts is another font library that gives the ability to download desired fonts. It provides its own premium fonts, but will also link with Google Fonts in order to allow for downloads. As such, you will never need to worry about losing a font from a site, even if it gets cycled out of the Google Font collective.
HTML5 - CSS3
All of my sites are written with HTML5 and CSS3 as a standard. I have a particular interest in the structure defined by HTML5. With the introduction of ‘main’, ‘article’, ‘section’, and ‘aside’ tags, the outline of the site is far more visible to search engines. The outline of the site is a key factor for the rating at which search engines display results. Using these HTML5 tags along with a logical progression of heading tags will improve the site’s search engine optimization.
With the use of jQuery events and CSS3, animated transitions are easy to implement. Not to be overstated, I feel that animated events are meant to augment the user experience. Primary uses of animated events include smooth scrolling and highlighting links or calls to action. Static and stagnant websites have an unfriendly, ‘robotic’ feeling. My goal for designing these sites is to give the user an implicit understanding and response to navigating the site. Visual cues, like animated transitions, are a core addition to an embedded user experience.
Parallax gives the website depth with a difference in foreground and background scrolling speeds. The difference in speed can help differentiate one section from another and can be a subtle cue for the user to compartmentalize different pieces of information. It also can be appreciated as a visually pleasing way to scroll through information.
My current jQuery plugin for this effect is Parallax.js. But I am searching for new parallax solutions as well. Parallax.js will not run on iPhone or Android phones. Instead, I replace the scrolling background image with an appropriate static image, with all other functions fully intact.
The Flexslider feature allows a carousel image display that can be browsed by the user. I use a jQuery plugin produced by Woo-Themes. On a desktop or laptop, controls appear as the cursor hovers over the images. If you are using a touch-screen device, feel free to swipe the image above.
My projects omit the controls in order to create a continuously rotating banner, but the Flexslider controls are always available on request.
Google Analytics allows me to monitor my website traffic. It can be customized to report specific events, show trends, and locate where users are viewing the site.
ReCaptcha is a function that requires validation from the user in order to process a request. In this case, I use it to validate the email function. ReCaptcha is important because it filters out any web robots from sending me spam emails. It asks the user to identify images that only a human should be able to recognize in order to send me email. This is an added layer of security for the site.
Understanding your audience has gained a new definition with a new wave of digital media. The way we get information has been compacted in to the icons on the screens of our phones. We expect the user to understand the graphics and symbology without an instruction manual. How do we empower the user to read webpages with confidence and a sense of ease?
We have to understand that user’s step-by-step path with interacting with the site. A powerful tool in re-designing a website, User Research gives us the perspective of what aspects are good and what aspects need to be changed. Have a look at a user research project a group of us conducted for the PCC Natural Markets Website.
Please note that since the research project was performed, PCC has re-designed their website. It looks really nice.
I have collected various measures to improve the site security of this site. I use Dreamhost to serve my pages, and can add varying levels of SSL encryption to provide secure, certified connections. Other server-side protections can be found by validating PHP forms in conjunction with third-party software such as reCaptcha.