Archive for the ‘Blog Design’ Category
A few years ago, the bubble effect that I’m about to show you to create could only be executed using flash animation but thanks to some CSS innovation, the limitations and boundaries to simple yet elegant design are crumbling. For any blogger or website owner, its very important to learn a little HTML and CSS; you will find that you have more control over your blog’s design and will be able to implement simple changes that can make your blog’s design stand out.
Here is a short and simple tutorial to give your buttons a nice bubble up effect that is sure to catch your readers’ attention, using the image swap method in CSS. Read More
It doesn’t take much to make me happy.Â Sometimes a little WordPress plugin comes along that makes me smile, and WP Maintenance Mode is one of them.
Let me start by saying — I’m not a web developer.Â I’m not a blog designer.Â I know just enough CSS and HTML to be dangerous, and I have no problem keeping it that way.Â Would it be super handy to know CSS and HTML?Â Absolutely, but it’s one of those things that always gets pushed down in my list of priorities.
So now that I’ve revealed that little snippet from my life, back to the WP Maintenance Mode plugin.
Why do I like this plugin so much?Â Read More
If you want your blog to be successful, then you need to start thinking immediately about how your blog is designed and configured.Â In other words, the way your blog is set up could ruin your chances of building a successful blog.
With that in mind, following are 10 of the easiest and most common ways that people ruin their blogs.Â Avoid them!
- Too many ads
- Blinding colors or colors that are too light to read
- Pop-up ads – make them go away! Read More
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.