February 15, 2012 by Daniel Sharkov|
Design is a topic around which controversy tends to bloom. When it comes to designing a blog, it’s not any different. On the one hand there are the supporters of the ‘Good design matters’ theory and on the other are those who are not really keen on eye candy.
Although both sides have their strong points, what I believe is that supplying your content with some good looking graphics is always a bonus. That is why I decided to make some alterations to my blog’s design to make everything a bit more appealing and improve readability.
In the following article I will overview
what I did, why I did it, how I did it and which tools I used in the process, so stay with me!
The biggest change and the one that took me the most time is the new logo. I was not satisfied with the looks of the previous and was considering doing a redesign for quite some months. Finally the inspiration came and I began working on the new logo design. The idea was to:
Make it more noticeable Make it simpler and cleaner Make it look more professional Make it more visually appealingWhether that worked or not, I would like to hear from your comments!
Improving ReadabilityThe next thing I took into consideration was the contrast between letters and the background. I’ve received comments from people not being able to clearly read text on my blog. So I decided to brighten up the background and I’m happy with the result.
There were a couple of other minor changes, such as redesigning the navigation bars and darkening the wood background so as to put more focus on the actual content.
Hope to hear your feedback on that as well!
Conclusion:
ease of reading is one of the most important factors when it comes to blogging. You must make sure that five minutes spent on your blog, won’t bring a headache to potential subscribers! It’s also important to turn content into a focal point, the first thing that a visitor sees.
In the past I’ve had people complaining about my blog’s loading speed. Although my ISP claims to provide relatively good connection rates, I also came across loading problems more than once. So now after returning back to the blogging world, I decided it is about time to solve that issue.
You need a good loading speed for a number of reasons:
– believe it or not but a huge percentage of the internet users are browsing with less than 1Mbit/s. Even a relatively small site takes a lot of time to load on that kind of connection. Optimizations can save up a lot of valuable seconds. Impatient visitors
– Having a fast connection on the other hand does not guarantee that a visitor will wait, even if it’s four or five seconds. When you are searching for something, you want to find it fast. In the internet world a single second is a lot of time. Loading time as a SEO factor
– Since recently search engines do pay attention to how fast a site loads. Even with quality backlinks, you might not get the rank you want if your site takes a lot of time to load. High bounce rate
– Bounce rate refers to the people who enter a site and leave without viewing any other pages on that site. So one might wait the first time, but that does not guarantee he will keep waiting for the rest of your pages.Most Effective Optimization Techniques
Improving the loading times of my blog wasn’t the toughest task I ever faced. It was rather time-consuming, with almost two weeks spent on finding the ‘week spots’ and fixing them.
Below are the most effective procedures I went through:
– all of the texturing work on my blog is done by me with the use of Photoshop. Although Photoshop is what I believe the best graphic editing software, I found out that optimizing images is not its strong point. The saved file often includes a ton of useless information, removing which can sometimes save up to 30-40% in size. CSS optimization
– this refers to tasks, such as removing line breaks, any unneeded values, combining identical rules, etc. A lot can be done to make the CSS load faster. Optimizations don’t make a huge impact on the loading speed. However they don’t require much time and are well worth the effort. Reducing sharing buttons
– since I started this blog, I did a lot of testing with different combinations of sharing buttons on the home page. I tried adding a LinkedIn, a Facebook and a StumbleUpon button.In the end however, I came to the conclusion that their importance on the main page is not that significant. With or without sharing buttons there, an article receives pretty much the same amount of exposure on the social networks. So in the end I left the Twitter button only, which resulted in better loading times based on the testing services I used.Tools Used in the Process PNGOptimizer- After installing PNGOptimizer, there is really nothing left for you to do than to drag and drop the PNG file (or files) you want optimized. Everything is done automatically and the images are backuped in case something goes wrong. The compression is lossless so it does not have a negative impact on quality. As the name suggests, the tool works with PNGs only. PNGGauntlet- PNGGauntlet works on a similar principle as PNGOptimizer. There is almost no user interaction required. After doing a bit of testing, I discovered that you can save some additional bytes compressing with PNGGauntlet an already compressed with PNGOptimizer image. Kinda weird but it works (not every time though). Xat.com Optimizer- That one is a more versatile tool. You have a wider range of optimization options, which can help you compress images and still keep them artifact free. For PNG’s you can reduce colors and add dithering, while for JPG’s you have two sliders, allowing different kinds of optimization. The tool is easy to use with the only problem being that you have a 30 day trial period. After that period some tools become inactive. I have already exceeded the period with a couple of weeks, but the most important tools are working fine, so it doesn’t seem to be a problem. JPEGOptimizer- Probably the most basic tool on the list. Don’t get me wrong – basic does not at all mean ineffective. With JPEG Optimizer you can get some pretty decent savings without losing too much on the quality side. As the name suggests, the tool works with JPG files with other formats not being supported. The great thing about is that you don’t have to download anything. It’s all done online. You only need to upload the picture, type in a number from 0 to 99 (the closer to 0, the bigger the compression) and click the ‘Optimize photo’ button. Icey’s CSS Compressor- Googling ‘CSS optimizer’ will certainly return dozens of different tools, aimed at cleaning your CSS. The one tool however, which I found the most effective is Icey’s CSS Compressor. The end result is a code that worked fine without any additional editing. On the other hand the size savings were the biggest in comparison with some of the other optimizers I tested.Tools to Analyze Performance
Analyzing performance after doing all kinds of modifications is crucial. Below are the tools I used to measure the loading speed gains after optimizing:
Pingdom Tools- Pingdom became by far my favorite tool for analyzing loading speeds. If you clicked on the link, you will see that the tool doesn’t offer any advanced options, except that you can change the server you are testing on. To use it, just type in your site’s URL, click ‘Test Now’ and you will receive a grade (from 0 – 100), the number of requests that went into loading the page, how long it took the page to load and the size of the loaded content. Your site’s loading speed is also compared to other recently tested. That is by far not all though. Below that chart, you will find detailed information about every single served request. Thus making it easier to find what is slowing your site down. Page Speed AddOn- The Page Speed AddOn is yet another good way for testing your site’s performance:For Firefox users , you will first need to download a tool, called Firebug(which is great for testing different modifications to your CSS and HTML by the way). After doing that click hereto start installing PageSpeed.
If you are using Google Chrome , you need to follow those instructionsto get the addon installed. There is also an online version of the toolavailable for those, using a different browser. Using the online version is straight forward so I won’t go into details there. As for the Page Speed AddOn things are a bit more tricky. The tool analyzes the site you have currently loaded on your browser. In order to activate it, you need to press F12 button. This will pull the console in Chrome and the Firebug extension on Firefox (assuming you have installed it). Above all of the HTML and CSS that opens, you will see different tabs. PageSpeed is always the one on the far right. Choose it and then click “Run Page Speed”.Final Words
After over 1500 words I believe that’s pretty much it. Hope you found the post useful! I would greatly appreciate you folks sharing your thoughts! Have you tried some of those optimization techniques? Do you know other effective similar tools?
About Unknown
0 nhận xét:
Đăng nhận xét