I have built several websites from scratch for clients, family, and friends. Through this, I have had experience with several different content management systems (Drupal, Wordpress, Stacey) for which I have created custom themes and plugins. The website I have had the most input on is for the North Olympic Discovery Marathon, an event created by my parents. The site has gone through several iterations since my parents dropped their old site management company, all of which were created by me. The first was a primarily static site with limited content editing. I developed a basic PHP authentication and content system that is no longer in use. All subsequent versions of the site used various versions of Drupal.
Here are links to sites I created--
I first started coding four or five years ago, when I created the NODM website. I began with WYSIWYG editors, but quickly taught myself basic HTML by looking at generated code in order to expand functionality. I now code exclusively through text editors (Coda, Kodingen, Diet Coda, Textastic), and am completely proficient in HTML, CSS (including HTML5 and CSS3), and JavaScript. I also have varying skills in several frameworks and templates, including jQuery, LESS, Bootstrap, mustache.js, HTML5 Boilerplate, and more.
I started with Dreamweaver and now almost exclusively use Coda on my computer. During running start, I took a Photoshop course, through which I dipped into Illustrator. I've considerably improved my skills since and even own a legitimately purchased copy of Photoshop. I've also used Fireworks, InDesign, Text Wrangler, gedit, and a few others.
This website does not stand out as an amazing or extremely poor website. There are numerous examples of both extremes, but I want to examine both the good and the bad about this one. It appears to be running on the content management system Joomla, using the Solar Sentinel theme. It has a standard layout, with the eye drawn to the logo first, briefly to the navigation, then to the 'action' area (with links to photos, results, and the discover pass).
The top bar (date and text size) is not necessary as both of these items are easily accessible for modern web browsers. Some users could benefit from an easy way to change the font size, but most either already have a custom screen resolution, an optimum zoom already set, or know the proper keyboard shortcut or context menu option. The main logo could use some editing, mostly because of it's JPG artifacts.
The main navigation bar is clean and seems well organized. Including an actual search field, instead of a link, could be beneficial. It’s easy to see what page you are on, because of the ‘active’ page link’s styling.
Below that, the ‘action’ area is a good addition. It shows the top three items users to the site are looking for, and has visual differentiation from the main content. The photos should have either more padding and a border or a transparent background, along with padding along the bottom (maybe 15px). I would like for this section to appear on only the home page, but it also shows up internal pages with different content. From a usability perspective, this makes the site seem somewhat unpredictable.
The footer is solid. I would probably move several infrequently accessed links from the primary navigation to the footer, to make the primary navigation simpler.
On the home page, the sidebar navigation helps slightly. By the time a visitor reaches the main content, the main navigation is not as accessable, and this secondary navigation provides an alternative. On any other page, and overall, I would merge it with the primary navigation. It confuses the visitor, as they do not know where they should look to find something. It’s also not consistent as one moves through the site, further lending to confusion. The sidebar would be more useful for page specific, additional information (similar to the Course Info page).
A right sidebar appears on some internal site pages, but not on others. It provides helpful content when it appears, but makes the page feel slightly cluttered. If I was redoing this site, I would do without this sidebar and move it's content to the left.
The main content of this site is a bit boring, probably as a result of limitations cause by limited knowledge of HTML and CSS and possible use of a web based WYSIWYG editor through Joomla. There is one <h2> tagged page on each page across the site, giving a clear indication of where one is and clearly telling search engines the page title. However, lower level header tags are extremely rare. If they were used, the pages content would flow more, and users could quickly scan the content to get a general sense of what information is there. When photos are used, they are presented relatively well. Text flows around the photos, and they fit in with the information of the page.
Typography is consistent; the site uses a basic, readable sans serif. Nothing is too distracting: there are no startling colors or ridiculously large font sizes to throw off the reader. Links are clearly differentiated from body text and headers stand out. The color scheme is consistent and works well with the theme of the race. I would test the color of the rhododendron flower in the header as an accent color and see if it worked.
Site URLs are human friendly, and are structured after the site's page organization. For example, the Ferry Info page has a url of /getting-here/ferry-info, meaning it is underneath the 'Getting Here' item in the main navigation. Links to external pages open in a new window or tab, minimizing user's confusion as to whether they have left the site or not.
The site has an intuitive structure as reflected by the site map. I would consolidate the three sidebar menus into the main one. They get lost as I browse, partially because the sidebar sometimes disappears and partially because the top navigation draws my eye much more effectively.
The FAQs page has several problems. I would prefer to have most content on this page, instead of links to other pages, with basic page anchor navigation on top (sort of like a table of contents). There is another navigation section below the main content, which further exacerbates the problems the sidebar navigation cause.
The Course Info page embeds a page from mapmyrun.com in itself. I feel it would be better to provide a link to this page, instead of having the user scroll about in a 730 by 500px box. It also draws too much attention away from the links in the sidebar.
I have edited copy on a number of my clients’ and own sites. I’ve designed several web forms and registration for ease of use as well. I’m also active in Western’s Honors program, which involves a lot of writing. Unfortunately I don't have any material under a page in length, but you can view a longer essay from a past class here.
Through my current job at ResTek I’ve been involved in the ResNet rewrite and the intern handbook rewrite. I’ve worked with other consultants as well as managed a group of interns. I have also taught several people how to use various website tools (Drupal, Wordpress, and Mailchimp), some of whom had next to no technical knowledge.
When starting any project, the scope must be made clear at the beginning. This involves figuring out what the end user requires and making sure everyone understands what the product can and will be able to do. It's limitations are just as important as the functionalities. During this process, the design of the product will begin to take shape. As the details are fleshed out, the parties using the product must be involved in reviewing each stage of the products design. Once the functionalities and look are settled on, the groups working on different aspects of the project need to remain in communication.
When working with someone with limited technical experience, being patient is most important. Moving slowly helps them learn, keep focus, and absorb more information. It's important to use simple terms they can identify with, and to translate technical concepts into relatable ones.
I have a basic to advanced understanding of the main technologies the web developers are using for the ResNet rewrite (Bootstrap, backbone.js, and mustache.js). I’m completely familiar with Bootstrap, and am currently using it in a side project. I’m using mustache.js in the same project, and find it very useful. I’ve read most of the documentation for backbone.js, and have a solid understanding of it’s capabilities.
If you want to see any more, please visit my LinkedIn profile.