You’ve probably noticed that last week all our social media icons changed. A brighter green, combined with white letters. This was one of the first public steps I took in publishing the new, rebranded Daily Inspiration. I’ve shared some screenshots on facebook and published our styleguide before, but that was it. I wanted to go live when I reached 10.000 fans on Facebook, but that happened quicker than expected. So, two weeks later, I am pleased to introduce the all new Daily Inspiration numbered as WPV2 (I’ll explain later in this post).
Back in the beginning of 2012 I decided that green would become the main color for Daily Inspiration, over the year the color changed and now in june 2013 I have finally found the color I like. Here is the main palette for DI.
Maybe you know, maybe you don’t, but I am currently graduating. I am doing research into the possibilities of HTML5 for mobile web usage. I am nearing the end and have gathered a lot of useful insights. While doing all the research I came across a lot of new possibilities which I liked to include in a new version of DI. By now the following features are added or will be added within a few weeks: AppCache, localStorage, Canvas, Prefetching, SVG, Animations, Transitions, Web Fonts & the Flexbox Model. They’re all part of HTML5 or CSS3 which makes the user experience much better in my opinion. Keep a look out for articles on the backstage blog the following weeks where I’ll go deeper into the possibilites of each feature.
As I am about to finish college and about to start my full-time job (at July 1st), I decided to start a different approach with this layout. Normally I published a new layout, made some small changes the months after and published a new layout after a year or something. Now I’ll work with iterations. This means that at least once a month I will publish new updates and fixes to the website and share them on the backstage blog. This gives me more room to improve and gives me much more time to do tests. So that’s why I’ve given this release version WPV2: it’s my second wordpress theme for DI. Small fixes will increase the number with 0.01, large fixes or new features will increase the number with 0.1. You can see the current version in the footer of the page. With the next official update the number will become clickable and will redirect you to a release page.
On saturday June 22, 9.00 AM my alarm went off. I barely set my alarm on Saturdays, normally I get out between 11.00-13.00, but this time there was a lot work to do: the new design had to be introduced to the public. I think it was around 10.00 that I started some last tests on my development environment. Did everything still work in all major browsers? How about tablets, smartphones? Did all the meta tags still show the right content? It al seemed okay. At ~13.00 I activated maintenance mode. If you visited our website that day, this is what you saw.
My guess was that within two hours everything was done and the new website would be active. Never have I been so wrong…
It all went well, I uploaded the new theme to the server, added the new upload forms, checked them, needed to make some small fixes, controlled the posts and pages, removed some not needed plugins and added one new plugin. Or, that was the intention. I downloaded the plugin, and activated it when suddenly:
My development server and live server are not the same, but I have never had problems with that. Until now. This plugin was needed for the whole new ‘Featured Artwork’ section. Since I had upgraded my server I had the intention to bring The Visual Wall back to Daily Inspiration. I have more control over the layout and functions here than on The Visual Wall and the whole time I wasn’t satisfied with the fact that I had to manage two different domains all based around one branding. I had worked weeks to make the experience of this new section as stunning as possible, and now, on the most crucial moment, the most important thing to make it all work failed.
Of course I immediately started a research on Google, was it possible to fix this ‘Fatal error’. Apparently not that easy, I needed more info because a fatal error was to global. The problem however was that there was no extra info, no php warnings, not in my back-end error-reporting-rapport, not in my hosts log files, nothing. Just the annoying fatal error.
In the end, the solution for me was to rewrite everything. I made the functions of the plugin myself, had to change a lot of code, do a lot of debugging and finally after 8 hours (with some breaks, I have to eat and socialize as well) around 90% of the original idea was implemented. Instead of the two hours maintenance mode I planned, it became ten.
So instead of 2 hours not reachable it became 10, but with good results! There are a lot changes best is to just go and explore for yourself. Here are a few noticeable changes:
Of course there are some things I am proud of, most of all the whole new artwork section. Here are some images of the things I like.
First of all the coverpages. So much win for the new css declaration background-size: cover; it stretches an image, so that every corner is covered. By applying background-position: center center; it will stretch the image from the center of the element. With this handy polyfill even IE8 will have support.
Next, the svg logos in the header and footer of the page, as well as all the icons which are web fonts instead of images. Both make sure that even on high pixel density screens everything looks sharp. Go on, try it. Visit the website on your smartphone or tablet, if there is support for .svg you won’t see any pixels. To make sure that there is fallback for non-supportive browsers it’s important to include a .png as well.
Then, the flexbox model. This is extremely handy to perfectly align elements inside a container. Unfortunately support is not very wide. I’ve applied this to the links in the footer of our page. If you have support, all list items are perfectly aligned. If you have no support, you will see some inconsistencies at the right edge.
And how about a custom first letter of the first paragraph? Yes even that is possible with CSS3, pretty cool! With p:first-of-type:first-letter you can do exactly that. Below a screenshot of the intro of the page. If you see normal letters it means your browser doesn’t support that feature (yet).
And as last, the best of all. The single image pages. If you have canvas support you will see the image in the center of the page, and a background which adapts to the image you’re viewing. The code behind it is based on Stackblur.js, a powerful blur script.
Ending this post, I hope you all like what you see, I know I do. I appreciate it if you tell me what you think, just leave a comment below, feedback is important. If you encounter any bugs, tell me as soon as possible so I can fix it. You’re probably not the only one having that same issue.