Overview of the Semester
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.
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!
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).
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.