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).
The first steps
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.
The horror
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.
What’s new?
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:
- New way of post sorting: The frontpage can be seen as a summary of the whole site. It contains the latest posts and artworks, also shows the popular posts and within two weeks I will add popular artworks as well. Popularity is based on views, and you will see the top 5 posts of last 14 days. Clicking the ‘view all’ button will show you the most popular of all-time.
- Cover pages, when the page loads, you will see a fullscreen cover with the title and a subline (you don’t have to wait until loading is finished, you can scroll immediately, when loading is finished the page will scroll automatically).
- Less clutter, I have removed the sidebar and extra content which was shown in previous versions. This is done to keep all your attention to the real content.
- Better share integration, I am no fan of the original buttons, but I like it when I can share a post right from a page, so I decided to include them behind more elegant buttons. Now when you hover over a button a part of that button will reveal the official share button. Also, hovering over any image inside a post will allow you to pin it directly, giving credit to the original creator of that work by including the sentence ‘by authorname’ as pin description.
- Custom disqus loading, this is experimental, so if you have any issues please let me know. Disqus loads not straight away when you open a page. Instead it waits until you’ve scrolled a bit. Only than the script becomes active and loads the form. I’ve done this to increase page speed.
- New submit options, instead of only submitting your portfolio (with extra options from now on), you can also submit a new project or upload an artwork directly to me.
- Featured Artworks, this is the biggest improvement I think. All the submitted artworks will be added to a featured artwork section. They behave the same as posts, but are presented differently, more focus on the artwork. A cool thing about this is the background. If you have support for canvas, be sure to view some artworks!
- Better search, you can now search posts and artworks.
- Probably more, just go and see for yourself!
Highlights
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.
To dos / known bugs
- Fix inconsistent padding, due to the total rewrite of the artworks section there are some inconsistencies with padding at the edge of some elements. This will be fixed later this week.
- Add popular artworks to the homepage, I need 14 days of data before I can release this, so this will be added within a month.
- Fix font sizing for smart devices, some fonts are a little to big imo for the smaller screens, needs to be adjusted.
- Add pagination to search results. You’re now presented with a max of 20 posts and 20 artworks, the results could of course be more. Need to find a way to browse through the results.
- Right now, it is not easy to go to image pages of images inside a post. A new icon will be added to the header in a few days: when you’re viewing a post with images a click on that icon will show you the page of the first image. From there you can browse through all the others. (If you want to see these pages right now, do a search for the string you see below an image).
- Redirecting The Visual Wall RSS feed, to the new ‘Featured Artwork’ section, so you can get image only updates.
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.
