Independent Study – Final Review

Overview of the Semester

My work this semester has been invaluable in adding to my knowledge of web design and development. I feel that I have gained a lot of knowledge in WordPress and JavaScript in particular. I believe I have accomplished my goals laid out in my initial proposal and syllabus for this Independent Study. I have a much better understanding of languages like PHP and JavaScript, which will serve me well in future projects. I’ve looked at some examples of current trends for library websites, particularly in the week of June 10th when I looked at WordPress and libraries. These observations were carried over into my needs analysis and design plan for my theme. Finally, I synthesized these skills together in the creation of my own WordPress theme which has been submitted to the Theme Review process.

A large issue this semester was making sure I had a good outline of activities to follow week to week. Without this overarching structure, I think it would have been much harder for me to tackle all the different aspects of web design I hoped to. I think having a detailed syllabus to guide myself through the semester — while also leaving that syllabus open to alterations, which I made, especially in regards to JavaScript — was a successful approach for me. I like having the freedom to change and shift my focus in projects, but I really appreciate having a structure or schedule to follow, so I think this set up worked well for me personally.

WordPress Theme

When I first began creating my syllabus for this summer, I had envisioned creating two WordPress themes by the end of the semester. While I stand by my two design plans for these themes, I’m glad that I decided to cut back to only one. I think being able to focus on one theme was much less stressful, and allowed me to look into other areas of interest, like JavaScript. I still like my needs analysis for my second WordPress theme, however, and would like to work on developing it sometime in the future.

I put some thought into incorporating some of the needs from the second theme into the first. I ended up not really going down this route, as I think the two themes are rather definitionally different; I don’t really see the needs of a small, public library meshing all that much with a large university library. Some thoughts I have on the design of the theme for a larger library with more info include creating a theme that has a designated place for more menus. I think that, ultimately, the theme I created this summer ended up being very much about the blog style, and about designing for an institution or organization that’s interested in having continual updates and an online presence focused on communication with their community. The second theme would require a completely new approach, which would focus more on static pages and content, supplemented by clear navigational hierarchies.

The design process

Keeping the initial design process separate from the coding process was really helpful. Especially when it comes to something as complex as a WordPress theme, it’s easy to feel overwhelmed at the sheer amount of what all needs to be coded and taken into consideration. I’m really glad I tried out Balsamiq and was able to build a wireframe… starting from this point helped solidify my idea of what the basic structure of the theme would be. Building from there into a full visual mockup in Photoshop and eventually into a live theme worked out exceptionally well, and helped me not to get overwhelmed as each week I had a specific, step-by-step part of the project to work on.

Using a framework

I’m glad that I’ve had the opportunity to start looking into frameworks during this semester. Having Underscores_ as a starting point for my theme was so helpful. It really structured everything from the start, but left me plenty of room as a designer to create my individual vision on top of it. I also feel like it helped me with my coding; I have always found coding to be a collaborative process that involves looking at and learning from the work of others.

Accessibility

Underscores_ helped once again to lay a foundation for accessibility, particularly in areas that I don’t have expertise in, like PHP. I also was conscious of checking to make sure my finished theme was accessible via keyboard navigation, and from my tests it is.

I followed through the checklist on the WordPress Theme Handbook for making an accessible theme. I found that of all the topics covered, my theme seems to pass, with the exception of the Contrasts section. Unfortunately, by the time I realized this, it was the day that I was submitting the theme. I thought about going back through and trying to update the them to meet the 4.5:1 contrast ratio required by the WCAG, but ultimately decided I wasn’t going to be able to because it would mean altering the entire color scheme of the theme. (The colors of the theme can be changed via the Customization panel, but to pass the accessibility check, the default colors of your theme must meet the 4.5:1 ratio). At this point in the project, it just seemed too late to go back and make such a drastic change. I was very disappointed by this, as I had hoped to be able to submit my theme with the “accessibility ready” tag applied.

An important thing I learned from this experience is that the next time I’m in the design phase of a project, I should really be checking the color contrast of my design then, and not later once I’ve finished coding. I think this is an area of accessibility that I was not really thinking about too much, prior to this experience. I have become conscious in the past year’s time of making sure to keep fonts large enough to be read easily, especially as screen sizes increase, and I’m also pretty conscious of making sure sites can be navigated by keyboard input only, as mentioned previously. Looking out for color contrasts is something that I will have to think more about in the future. I think it’s going to be important for me to use a Contrast checker such as the Tanaguru Contrast-Finder (one of the suggested checkers in the WordPress accessibility checklist), since I don’t automatically consider something like the design I did for the Heidi theme to be in poor contrast until I see the ratio explicitly stated in front of me!

Testing, testing, testing

When developing for a platform like WordPress, I think testing your design and code is incredibly important. Luckily, I found some great resources for doing so throughout my studies this summer. The following were my most used resources in this area:

  • Theme Unit Test – Tons of great test data, from posts to comments to static pages to menus. I can’t imagine ever designing a WordPress theme without using this.
  • Developer Plugin – This plugin had a lot of useful options. The one I utilized the most was the Monster widget, which, similar to the Theme Unit Test, allowed me to dump in a whole variety of different scenarios of data to populate the widget sidebar area of my theme.
  • Theme Check – An automated check that lets you know what areas might not pass the WordPress theme review. Useful in the final stages of reviewing my theme right before submission.
  • Theme Checklist – Not automated, but instead provides a thorough list of all of the guidelines covered in the Theme Review Handbook. What I especially liked about this resource is that each point on the list is expanded upon with specific examples of good and bad code. Really helped me to not only check that my theme was covering all its bases, but also helped me understand what all those bases were!

Beyond WordPress

Having a finished WordPress theme was my ultimate goal for this Independent Study. I haven’t heard anything back from the Theme Review team yet — and judging by the state of their ticketing system (which lists some themes created a few weeks ago), it may be awhile until I do. That said, I’m happy with this finished product, and also with the rest of the areas I was able to cover this summer.

Besides the Underscores_ framework for WordPress, I also used the Responsive Grid System in my personal website. I was able to adjust the framework to better fit my needs by altering the percentages slightly for the grid on my portfolio page. I really liked using this particular grid system because it was simple and short code that was easy to understand (and therefore easy to implement and edit).

In terms of JavaScript, I feel like I have covered a lot the past month, and have gathered some great resources to pursue further as I continue web projects in the future. I was also able to incorporate some of this work with JavaScript and jQuery into my WordPress theme. I used jQuery to target some particular elements in the theme that I could not access via CSS. I also used jQuery to initialize a Masonry layout for the widget/sidebar area of the theme.

Ultimately, I wanted this semester to help me work towards the long-term and continuing goal of cultivating my online portfolio of web design work. I think I was able to accomplish this, with plenty of room for improvement and further projects in the future.

One Reply to “Independent Study – Final Review”

  1. Congratulations on accomplishing your goals on the WP Theme design. You made some intelligent choices on focusing on a single theme rather than two and also, from your rationale, a good decision to keep the designs separate. Thank you for making a good effort on building accessibility into the design. While color contrast is important for color-blind/low vision users, it is not typically a “show stopper” preventing anyone from interacting with the site. So I wouldn’t stress about it too much. The take away of checking contrast levels early in the design phase is a good one.

Leave a Reply

Your email address will not be published. Required fields are marked *