Gillian WordPress theme coming soon

My second WordPress theme, Gillian, has been submitted to the theme directory for review! A live preview of Gillian is also available.

Gillian was originally designed with academic libraries in mind, but would work well for other institutions, organizations, or individuals who are interested in organizing and presenting large amounts of content in a logical, useful, and visually appealing manner.

The core features for Gillian include:

  • Responsive design
  • Accessibility ready
  • Default header image included in theme
  • Upload your own custom header image
  • Upload your own custom background image
  • Featured images (posts and pages)
  • Default right sidebar layout
  • Three-column template (left and right sidebars)
  • Full-width template (no sidebars)
  • Optional secondary menu
  • Social media menu with Font Awesome icons
  • Widgetized sidebars and footer
  • Customizer color options
  • Editor styling

Behind the Design

I began planning the design for Gillian with a quick look at how the layout would work at different screen sizes.

I knew from the start that I wanted Gillian to have room for multiple menus, a search bar in the header, and at least one sidebar. Although the above designs are very simple, they helped me begin to conceptualize the main content areas I would be including in the theme.

I then moved on to draft up some more detailed mockups. The following were put together in Adobe Illustrator. Click to view fullsize.

The finished product diverges from these mockups some, as I had the freedom to continue building upon my design throughout the coding process. For the most part I kept with the overall look-and-feel and color scheme. I did end up working on two additional templates to the one here: a full-width page version, and a three column version that includes a sidebar on the left as well as the right. I also created a custom header image that is provided by default with the theme, and can of course be removed or replaced.

Updates on Gillian

The queue for new themes in the WordPress theme directory is rather long. I’m also happy to have been able to include the accessibility ready tag for this theme, which will require a separate accessibility review, so time will have to be allowed for that as well. Keep an eye on this blog for more info about when Gillian is reviewed/made available for public download!

Heidi version 1.0.4

A new version of Heidi is now available! If you already have Heidi installed, you should be automatically notified about version 1.0.4 via your WordPress dashboard.

Changelog for Heidi 1.0.4:

* customizer.php
– New Customizer color options for Navigation Links – Hover, Entry Footer Text, Sidebar Links – Hover, Calendar Top Row, and Footer Text
– Updated to only display custom CSS in head when custom changes have been made
– Added translation support for labels
– Fixed issue where drop-down menus displayed incorrect background color when altered through Customizer
* style.css, function.php, content.php, content-single.php, content-page.php
– Featured Images now available on pages as well as posts
– ‘single-post-thumbnail’ class replaced with ‘attachment-post-thumbnail’ for standardizing between posts/pages
* screenshot.png – Updated to 1200×900 pixels for HiDPI displays
* style.css – Minor CSS updates for margin spacing issues & customizer edits
* Updated to Font Awesome 4.6.3

All about SVG (+ a quick how-to on using SVG with WordPress)

I’ve recently started working with a lot of SVG files in my personal website, and I’m excited to use the format in projects with clients, too. Here you can find a quick overview of SVG: what it is (and what vector graphics in general are), when to use it, and how to use it with WordPress.

Skill level for this article

This is intended to be a very basic guide for those completely new to SVG. If you don’t know or aren’t sure what vector graphics are, this is probably a good starting point for you.

If you’re looking for more advanced articles on SVG usage, I recommend Sara Soueidan’s articles on SVG as an excellent starting point to really delving into the capabilities of SVG.

What is SVG?

SVG stands for Scalable Vector Graphics. We’re talking about vector graphics here, versus raster graphics (JPG and PNG are examples of raster graphics). Let’s step back a second and look at the difference between vector and raster graphics.

Continue reading “All about SVG (+ a quick how-to on using SVG with WordPress)”

Dec/Jan site redesign, SVGs, speed optimization, & more

At the end of 2015, I started designing the newest version of my online portfolio. During this redesign, I focused a lot of my time getting accustomed to using Inkscape — an open-source vector graphics editor (and a good free alternative to Adobe Illustrator).

I haven’t been disappointed with Inkscape. It has a pretty normal learning curve for a graphics editor, in my opinion, with an understandable interface and manuals and other resources available when needed. I found that I was able to figure out the basics for the most part, and anything more complex or confusing was usually solvable with a quick Google search.

After becoming comfortable with Inkscape, I was ready to create SVG files. The benefits of SVG or other vector graphic options over raster images (like PNG and JPG) are already well-known, but just in case: SVG stands for Scalable Vector Graphic, and they do just that — they are vector graphics that scale. What that means is that SVGs preserve shape(s) and pixel quality when being resized, which is great for things like logos, icons, and the type of illustrations I created for this project. (SVGs are not so useful when it comes to photographs or images with a lot of textures and gradients.)

SVG beats PNG in terms of file size, too. I found (at least in this project) that all of my SVG files were noticeably smaller than saving the same image as a PNG. And once I enabled SVGZ (a compressed version of SVG), I was able to save on even more weight.

The weight of the page was another major focus in this redesign project. I used Google’s speed developer tool — PageSpeed Insights — to check the performance of the finished project, and followed (many of) the suggestions in areas needing improvement.

I say that I followed “many of” the suggestions — the main suggestion that I’ve yet to implement is the optimization of PNG images. That’s because, for the most part, all of the PNGs on the current version of the site should only be loading as fallbacks — in case a browser doesn’t or can’t load the corresponding SVG.

Besides researching these tools and resources, I also spent a good amount of time simply… creating the design. Throughout the design process, I knew that I wanted the finished product to be:

  1. Clean, crisp, & flat – I like sites that are clean and simple while still interesting, preferably with flat design elements and a modern color scheme.
  2. Illustrated and presented in a way that features my graphic design work as well as my code – Previous versions of my portfolio haven’t really incorporated much of my graphic design and illustration work, but I always knew that once I had time I would really like to make a new version that did. I built the header design around the idea of a shelf, with various items (books, tea mug, snow globe, etc.) collected on it. This is my portfolio site, so I wanted it to have some fun/whimsy added in to distinguish it and really make it mine.
  3. Supplemented with unique icons – I really like Fontawesome, but I decided that this time I wanted to create my own graphics that could (I hope) represent recognizable scenes and ideas, while also adding that personal feel.
  4. Responsive – Of course, I knew the site would be responsive, and this was a working foundation throughout my design process. The header image, I decided early on, would scale with the screen size (hooray for SVGs!) and work as a horizontal separator above the main page content. And as the main body of the pages developed, I knew it would start out as a single column on mobile devices and smaller screen sizes, expanding into the two-column layout seen in the Photoshop mockup image featured in this post.
  5. Accessible – Accessibility was pretty easy to work into this project. I tried to keep an eye out for color combinations that were not only aesthetically pleasing, but also legible. And, as per usual, I’ve performed keyboard-only navigation tests which have been successful in my findings.

Some WordPress updates

My WordPress theme, Heidi, has been approved by the Theme Review team, and is now available for download from the WP theme directory! The theme review process was pretty straightforward; the longest part was waiting for reviewers to be available to look at the theme. My theme was reviewed by two individuals, and each supplied some minor changes to make in the code. There was no request to change any of the aesthetics of the theme, and overall I found the process simple enough.

I’ve also updated the theme of this blog (previously running the pre-release version of Heidi). While the rest of the site is my own static HTML & CSS design, this blog is running a WordPress theme designed/coded by me that now fits in seamlessly with the other pages.

Following the success of my first public WordPress theme, I hope to have the opportunity to design some more themes for submission to the WP directory!