Archive for the ‘Blog Design’ Category
WordPress, being the most popular blogging / content management platform in existence, has a huge community of developers and designers worldwide who are constantly brainstorming new and improved ways of making this legendary system more extensible through the use of plugins. Thanks to these plugins (9,486 Plugins according to WordPress.org), the average user can add style and functionality to their blog or website
as easy as the click of a couple of buttons. No coding required.
However, adding tons of plugins can significantly slow the loading time and overall performance of your blog. Therefore, its really important to use those that are absolutely necessary and delete the ones you’re not using. So, for those of you who may want to go the extra mile to guarantee 100% loading efficiency and dabble in a little code, here are some unique customizations that can replace some plugins that you may have installed. Read More
One of the good (or bad, depending how you look at it) things about being a blogger is that you’re the publisher, editor, writer, and graphic artist rolled in into one. Apart from finding out a good topic to write about, most bloggers look for a good template to use, whether the blog is on WordPress or Blogger.
One of the most common questions that stump in the template decision isÂ “How wide should my blog’s template be?” And there’s a a couple of good reasons to why this is a bottleneck in the template selection decision.
See, the thing is that screen resolutions are as varied as the topics about blogging. It used to be that the only relevant resolution was 1024 pixels by 768 pixels (1024×768). But now, only roughly 1/3 of screens out there have 1024×768. The majority is now a resolution bigger than that.
The other reason is readability. With the changing resolutions, I won’t be surprised if people also tweaked their screens DPI (dot per inch) setting. This setting can make text and images to be displayed bigger (or the same with a lower resolution screen), even when the physical screen becomes bigger. This makes text more readable even with a ultra-high resolution display. Nonetheless, the upper limit in nice, readable web typography is 75 characters wide, give or take a few characters.
Now, with the variety in user needs, what’s the best width for blog templates? (Length or height is rarely an issue because people are used to vertically scroll).
Assuming you are using a 14 pixel size for the text and default character spacing, you would need at least 520 pixels for the main content area. Plus, if you add two columns 160 pixels wide (Why 160 pixels? This is to accommodate the widest standard skyscraper ad size), you would need an extra 320 pixels. Finally, you’d need approximately 10-15% buffer for margins. The final total? 924 to 966 pixels wide.
Surprisingly, this is very near the favorite 960 pixel-wide designs today. This number also seems optimal for common screens based on W3Counter’s final 2009 stats,Â 60% of displays out there range from 1024 pixels to 1280 pixels wide.
Blog Usability is something taken for granted because most bloggers don’t design the template of their own blogs. But that shouldn’t be reason for bloggers to ignore usability completely.
If you’re a web designer, there are some easy to implement practical usability methods, such as basic heuristic review, user research, and prototyping. Bloggers who are more into the writing can do other little things that can go a long way to improving the blog’s usability:
- Write in short paragraphs – The principle behind is that research found that people who use the web scan pages rather than reading them outright. Meaning good spacing between paragraph blocks is a must. Â This also means that you have to alter your writing if you’re used to long and meandering paragraphs.
- Place elementsÂ consistently – One thing about usability is setting the expectations of your users. What this means for you as a blogger is that it may be better to lay-out images, block quotes, and even headings. This will help your readers “learn” how your blog is laid out and avoid getting confused with other elements.
- Avoid overriding your template’s styles – While most blog software like WordPress and Blogger do have a mature WYSIWYG editor, overriding the default styles defined in the template can do more harm than good.
Just remember, the guiding principle of blog usability is to make it easy for your readers to use your blog and read your content. You don’t really have to invest much to achieve improvements in your blog’s usability.
One of the goals of operating a website or blog is to make them stand out among the sea of other sites and blogs on the internet. You want to be as unique as possible to enable recall and put your own mark of individuality. One of the best ways to do this is by producing code that is especially made for your website or blog. But producing code can be a herculean task especially if you know little more than a little HTML coding. What you need to do if you are looking to make code is to hire a company to do the code development for you. The challenge is to find the company that is best suited to meet your needs and have the skills and experience to deliver quality work. One company that has built a reputation for delivering high quality, professionally done code for websites is PSD2HTML.
PSD2HTML is a well respected company that specializes in converting web artwork to working code, like PSD to HTML. The company ensures that it comes out with quality output by hiring experienced web experts who produce codes that meet their clientsâ€™ specifications.
Using PSD2HTMLâ€™s services brings many benefits to a client. One of the biggest advantages is PSD2HTMLâ€™s commitment to customer service. The company values customers so much that it has implemented a 24 hour live chat option that allows clients to get instant feedback with regards to their project. A click on the live chat button will bring the client immediately to a PSD2HTML staff who can discuss the details of the project. Even though the live chat staff is available only on weekdays arrangements can be made to extend work on weekends if it is necessary.
Feedback can also be obtained by using the other contact options available to the clients. Clients can send messages through an online contact form or they can call PSD2HTMLâ€™s telephone number at +1 877 721 8040. This close collaboration with the client is PSD2HTMLâ€™s way of ensuring that the client will get exactly what he asked for.
Whatever the markup needs of the client, PSD2HTML can address them. The PSD2HTML website has recently undergone a welcome facelift that has made the site easier to navigate and find the information that clients need. Among the services that PSD2HTML offers are:
â€¢ Templates for WordPress, Blogger and other blog engines
â€¢ Dreamweaver templates
â€¢ Email templates
â€¢ Design to semantic code conversion
The number of services that are being offered is easily more than what are currently made available to developers and website owners. This wide array of services is what makes PSD2HTML so popular and a â€œgo toâ€ place for developers.
PSD2HTML has made using their services easy for its clients. IT has made the whole ordering process more streamlined and easy to follow. A client will gather the files that he will submit to PSD2HTML then fill out the order form. He specifies all of his requirements in the form like browser compatibility and certain compliance parameters. The comprehensive order page enables the client to truly â€œpersonalizeâ€ his requirements, ensuring that what he gets exactly fits his needs. PSD2HTML allows for an unprecedented level of personalization that few companies can provide. There is actually a space within the order form that lets clients include other details that are not included in the established categories. Any extra information that the client wants to provide can be included here.
The client then completes payment in order to end the ordering process. Payments to PSD2HTML is very convenient because of the number of payment options available. In addition to Paypal and Google Checkout options, the company has recently implemented a new Direct Payment option that will let clients pay using major credit cards. Knowing how much the client will pay is also made easy by PSD2HTML. Getting a final quote is not a problem because each option that the client chooses is priced accordingly and is immediately reflected in the final price. This allows the client to add or delete options on the fly to see which configuration would fit both his needs and his budget.
After the whole process has been completed, PSD2HTML will provide the client with instructions on how the files will be received after it has been converted. The deadline set by the company is guaranteed, which is a big plus for any client since they will know exactly when to expect the final product.
And when it comes to quality, clients should never worry. PSD2HTML has built a reputation for making quality work. In fact, it has recently garnered an ISO 9001 : 2000 certification that proves it adheres to international quality standards.
NetTUTS have put up a great post on speeding up a website, but you could easily translate that into speeding up your WordPress blog. While these might not increase your speed like caching or anything else like that, it is still a very useful guide for compressing images, CSS, and finding errors.
We’ve talked about compressing CSS before on Blogging Pro in a post entitled, CSS Optimization: Make Your Sites Load Faster for Free.
I am really interested in the the section on using libraries and frameworks as I’ve been hearing more and more about people using them to speed up their development time, or require less code, through use of libraries written by other people.
If you are interested in speeding up your blog, or the theme you are going to release, I’d recommend checking out the post on NetTuts.
If you have had issues creating a footer that hangs at the bottom of the page, no matter how short or long the content above it is, then check out this new CSS Sticky Footer method.
The advantage of this method over previous methods is that it doesn’t require an extra “push” div to get it down there, and it also works with most major web browsers.
This sticky footer solution is working in all major browsers, including Google Chrome!. It works with floated 2-column layouts and we don’t get overlap in resized browser windows unlike older solutions you find when you Google sticky footer. And you don’t need an empty push div.
If your visitors are browsing your blog using IE 4 through 8, or older versions of Firefox, they’ll still see the proper effect. Being able to support almost all of the major web browsers today, while needing fairly semantic code, makes CSS Sticky Footer an interesting piece of code to use on any project necessary.
I expect to see some WordPress themes taking advantage of this code soon.
AhmedF of Tech Soapbox gives us 10 HTML tips that will help improve speed and efficiency. I say building in the sense that you could either be a theme designer creating a blog template, or you could be tweaking your existing blog for speed.
Then for usability, there’s the use of tabindex, which is great with people who are fond of using the keyboard to navigate rather than the mouse.
And then there’s conforming to web standards and conventions. I know designers these days do their best to conform. However, there are still some who use HTML elements for purposes other than their original intent. Yes, that’s thinking out of the box. But that “box” was created for a purpose. And sometimes structuring things differently makes it difficult to make changes down the road, especially when you change the use of commonly-used tags like LI, SPAN and P.
For non-designers or non-developers, these things might sound a little too technical. But if you look under the hood of your blog (i..e, the underlying code of the theme), or at least even your blog’s source, it pays to clean it up or tweak it to improve on the end-user experience. Even if you shave just a few seconds off loading time, or even if the improvements seem trivial, multiply that a thousand times over, and both your readers and your server will appreciate it.
Not really sure if you’ve noticed the persistent “image caption” feature that WordPress 2.6 has developed.Â I was happily blogging this past week when I’ve noticed that some of the images I posted vis a vis the blog posts have defaulted to a “nil” caption.Â I do love this improvement, but was a little “blind sided” as there was no announcement regarding it until now, well I read it just now, hee hee. So I had a bunch of images with “nil” captions in them.Â Had to manually remove it to blank (thankful they allow blanks).
It has gathered about 185 varied responses from “that stinks!” to “oh ok, it would take getting used to”.Â But nonetheless I think it is best practice to put captions to photos to make your blog posts a little friendlier and much understandable.
To add a caption to an image, press the image media icon just above the editor buttons:
In the same pop-up window, you can see there are other image fields to complete like “title”, “description”, “link URL”, “alignment” and “size”.
Problogger wrote a short post regarding the importance of blog images:
- to enhance posts by giving a visual point of interest
- to engage people to read (imagine talking about a celebrity minus the juicy photos!)
- to emphasize the message
- giving your blog a more personal touch
From experience, my family blog (sorry, no URLs for privacy) gathered more hits and lesser bounce rates (from Google Analytics) WHEN I include a set of photos.Â When I posted that I posed with a python around my neck, guess which album they clicked through and browsed often.Â Or when I held a croc in my hands like so…
I RSS read my boss’ personal blog and when I saw a blog pic of him trying a spaghetti noodle up his nose I stayed on and watched the video even! haha.. that was a laugh.
So any crocs in your area that needs taming???
Word is out that Google is now able to index Flash content. This is probably good news to web developers out there who are into building sites with Flash. However, should bloggers rejoice at this news?
Probably not. Or at least there’s no compelling reason to be too happy because of this news, unless you run a video blog with a lot of flash-based videos. I would agree with our resident designer Ia that Google’s new Flash-indexing ability might be misused by designers who are fond of designing in Flash without much regard for usability and accessibility.
Googleâ€™s efforts to read Flash still seem to be in the premature stages. Typical Google, they always release their products in beta without being wary of the consequences.
By consequences I mean clients who are now running around telling their web designers to create animated intros and the extravagant interfaces for their websites. I canâ€™t really shoot down this little achievement by Googleâ€”except that itâ€™s getting scarily smarter everyday and should try to have more features than issues when they launch a product.
More importantly, I can only continue to condemn those who misuse Flash without any regard for accessibility, much less usability, whatsoever.
If you are serious about optimizing your blog for the search engines, then I think the first thing to do would make sure you have good content!
Based on my own research, cross browser compatibility seems to be the thorn that is in every web designer’s side. Taking a mock up design and coding it to look the way it’s meant to be in all browsers at times, seems like an impossible task. I know when I’ve hacked WordPress themes, getting them to appear correctly in both IE 7 and FireFox 2 was such a pain, I would end up going for the (good enough) approach.
Thankfully, Anthony Short has put together a list of coding conventions ( How To Get Cross Browser Compatibility Every Time ) based on his research that will help get the job done on the first try.
This is a summary of what Anthony Covers in his post:
- Always use strict doctype and standards-compliant HTML/CSS
- Always use a reset at the start of your css
- Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and
text-shadow: #000 0 0 0 in Safari
- Never resize images in the CSS or HTML
- Check font rendering in every browser. Don’t use Lucida
- Size text as a % in the body, and as em’s throughout
- All layout divs that are floated should include display:inline and
- Containers should have overflow:auto and trigger hasLayout via a width or
- Don’t use any fancy CSS3 selectors
- Don’t use transparent PNG’s unless you have loaded the alpha
In his research, Anthony only worried about FireFox 2, Safari3+ and IE6.
So if you are creating a theme or any web design for that matter, keep these conventions in mind so you’ll spend more time designing and less time refreshing browser windows.