This is my new site, built using the Ghost blogging platform. Iâ€™ve been working on it for the past few weeks, itâ€™s still not done but itâ€™s in a good state to be put live (I was getting sick of the old one anyway, especially my portfolio which was in dire need of updating).
There is still a lot that needs to be done, here are a few things I plan to do in the coming weeks.
Clean up the CSS and remove unused styles
I made a custom theme built off of the default Casper, so there is some unused CSS still in there, though I did try to get rid of a lot of it to begin with. Plus I added some CSS from Prism.js, Fancybox, and Bigfoot. I use Sass so thankfully Bigfoot comes with an SCSS file, so thereâ€™s some potential waste removed, but thereâ€™s always stuff in these libraries that could be removed for my purposes. Iâ€™m obsessive about having the tiniest footprint possible for my CSS so there will be a lot of fine-tuning that needs to be done.
Casper came with the jQuery Fitvids plugin installed and some other stuff that I havenâ€™t really had a chance to look at what theyâ€™re all doing yet. Need to spend some more time investigating and see whatâ€™s needed and whatâ€™s not.
Find a better solution for the logo
Currently the logo is a PNG converted to a Data URI and placed as a background image in the CSS (same with the Twitter icon below and the endmark). I originally wanted to use inline SVG because a) there would be no HTTP request and b) I wouldnâ€™t have to worry about device resolution. I want the logo to look crisp no matter what screen itâ€™s on. I think for right now I have a pretty good solution in place. Iâ€™ll write a full post later describing my process for implementing my logo.
Add more Accessibility
I havenâ€™t really done much for accessibility in my web projects to date, except for using
alt1 attributes on
img elements and using semantic HTML5 elements. Ghost does use the
role attribute on some elements. I want to learn more about ARIA roles and other accessibility features. I know this is a weaker part of my skillset and itâ€™s something I want to improve on.
Add more metadata / Schema.org
For some previous projects Iâ€™ve implemented Schema.org metadata and itâ€™s definitely something I want to work on for here. I want to have everything I can marked up with Schema and also add OpenGraph.
More thoroughly test the mobile styles
Like I said this was built off of the Casper default theme and I did play around on my phone and also in Chromeâ€™s device emulator in the web inspector to test iPad and iPhone, but there are some improvements that need to be made, especially in the tablet arena.
Start a Style Guide section
Working on my current companyâ€™s site, I came across Anna Debenhamâ€™s 24 Ways article about style guides and started writing one for our site. The redesign that came out last year was originally made by a third party before I came on staff, and to be honest they did not do a good job. The design was okay—typical Wordpress stuff—but their CSS was atrocious and bloated. Iâ€™ve spent my freetime the past few months slowly working through the cruft and streamlining the CSS and creating a style guide is definitely helping.
I want to create a style guide for this site step by step, tackling just a few patterns and modules at a time. I want to try out seldom-used HTML elements and see how I could incorporate them here and in my other projects.
Continue to learn
Just realized I need to update my style for inline code to match that of the code blocks CSS I made using Prism.js return to article
One thing that is really bugging me about Ghost right now is my favicon. I took the time to use the fabulous Real Favicon Generator and add it to the site, but Iâ€™m still getting a blank favicon on Chrome (although I just checked Firefox and itâ€™s fine, as is the Apple touch icon). I read something about this being a Ghost 0.4.2 bug, but even the fix recommended hasnâ€™t seemed to work so far (canâ€™t find the source at the moment). return to article