5 Great CSS Techniques To Improve Your Website
5 Great CSS Techniques To Improve Your Website
|
|
CSS or Cascading Style Sheets is normally used to separate the style and layout of your HTML files from the actual content. However, few are aware of the added value that CSS can give to your website. Aside from the obvious ones like style standardization, CSS can be utilized to provide other useful stuff not possible with table-based layouts.
Among these benefits are things like:
- Server bandwidth reduction
- Media type formatting
- Menu overlapping
- Styling of form elements
- and even E-mail address obfuscation
Much information about these techniques can be found on the web. Below are some example implementations.
Server bandwidth reduction
CSS Optimization can translate to huge savings in server bandwidth, resulting in lower operational costs.
This article compares some of the best CSS optimizers available on the web by using heavy traffic websites like Digg and Slashdot as an example.
Media type formatting
By utilizing the CSS media attribute, you can easily control display for different media types. This is best used when formatting websites for mobile display and creating printer-friendly pages.
Here is a good tutorial that covers CSS development for mobile browsers. For techniques related to print styling, refer to this tutorial, another tutorial, and this article by Eric Meyer.
Menu overlapping
The CSS z-index property specifies the order an element is stacked, similar to how layers are arranged in Adobe Photoshop. It is also relatively easy to understand, and can be quite powerful when used correctly. It can also come in handy when creating overlapping menus. Here is a very good tutorial on how this can be done.
Styling of form elements
In a previous article we linked to Jeff Howden’s CSS-Only, tableless forms article which gives an example of what can be accomplished with CSS form styling.
Then, there’s also The Form Assembly, a CSS Zen Garden clone for showcasing form designs.
E-mail address obfuscation
When displaying an e-mail address on a website you obviously want to obfuscate it to avoid it getting harvested by spammers. There are many ways to accomplish this, and one such method can easily be implemented in CSS. Silvan Mühlemann tested nine methods and published a test page for spambots to harvest. 1.5 years later the results are out and surprisingly, only the CSS methods resulted in absolutely zero spam.
Similar Posts
- Keep it updated. Publish it later. Keeping it updated can be a laborious, arduous task. In order to do something like this I highly recommend writing 2-3 articles at a time and publishing them later at another date.
- Use Shortcodes. Shortcodes can save you a lot of time and provide you with text and bbedit type shortcuts. Using text like: [shortcode]. It replaces the need with formatting text and easily allows you to insert a template or snippet.
- Editing offline? Use Google Gears to kick your writing abilities offline. While using Google Gears Turbo can write, edit things locally then sync them later.
- Write posts via email: This is something people tend to forget about only because its such an unutilized feature. But with the ubiquity of smartphones it makes sense to write posts via email. (Thanks to @dmassad for the tip.)
- Do you have an iPhone? WordPress.org is creating an iPhone application just for the iPhone to keep your blog updated
- Update WordPress by Text Message using Twitter Updater
- iPhone themes for WordPress: WP Touch , iWPTouch
- Importing and Export Feature – Keep your posts backed up on your server as well as multiple different places.
- Use the Backup Plugin to automatically
- Devlounge explores the pros and cons and possibilities of using WordPress as a CMS. What to consider if you’re using WordPress as a CM
- Rewriting WordPress Functions: WeFunction Explores the idea of using wordpress’ add_meta_box as a means of creating seperate custom fields. I warn you it doesn’t look very easy. The tutorial is very well documented though.
- Flutter is very promising plugin that allows awesome features such as editing in place as well as allowing many different post types. Also covered and reviewed here.
- Darren Hoyt discusses the client-web developer/designer problems with making WordPress a CMS
- How to “plan and think of WordPress as a CMS”
- CMS Plugins: Looking for plugins to make WordPress a cms? Make sure you check out My Page Order , pageMash , Page Management Dropdown , PageRestrict, etc. (Source: Mashable)
- 10 Best Twitter tools for WordPress.
- Find out who tweeted or retweeted your post using the Tweetback Plugin
- Use a Parent-Child Theme to rapidly jump-start theme development
- Import Sample Content to help develop and refine your themes typography
- Why reinvent the wheel when you can use a blank theme: found here , here , and a whole list of them here
CSS Border Styles – Image Frames
CSS Border Styles Image Frames tutorial demonstrates styling methods using combinations of CSS borders and background images to style ornate image frames.CSS Border Styles – Image Frames
CSS Border Styles Image Frames tutorial demonstrates styling methods using combinations of CSS borders and background images to style ornate image frames.CSS Style Property: display
A description of the CSS property display … More display Information. CSS Media Types Create Print-Friendly Pages. Related Style Properties …Eric Meyer on CSS: Tricking Browsers and Hiding Styles
It’s a crying shame that CSS, designed to be so simple and approachable to … media=”all”> <style type=”text/css” media=”all”> h1 {border-bottom: 2px solid …5 Ways To Optimize Your CSS
Recently I have been working on a social networking site that was experiencing downtime due to the amount of stress its users were putting on the server. I spent a good amount of time looking for ways to improve the speed of the site, and one of this was through CSS optimization.
Structure your CSS and HTML elegantly
“CSS” Stands for Cascading Style Sheets. Notice the first word, “Cascading”? The power of this language is readily available, and it is up to you, the designer, to maximize its use. It is an interesting concept that is not too difficult to grasp. Try to find instances wherein this can be applied.
For example, the code below:
<p class="someClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>
Can be rewritten this way:
<div class="someClass">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
But what if our code looks like this:
<p class="firstClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>
We can take advantage of CSS by rewriting HTML this way:
<div class="someClass">
<p class="firstClass">First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
Then, cascade rules defined in “firstClass” to overwrite styling principles in “someClass”.
This is just one simple example, and I hope you understand what I’m trying to get at. Just keep in mind the concept of cascading rules and it won’t be long before things like this become second nature and automatic.
Re-structure your CSS
I am a huge fan of single line CSS style. Not only does it save up space, it is also more readable. The readability bit is debatable, though. Simply put, I find it easier to locate relevant tags if the tag names are all on the same left-hand side and I do not have to scroll so much to find what I need to change. After all, designers are only concerned with CSS selectors, not the rules that are applied to it.
Optimize Your CSS
Some time ago, I wrote an article about improving website performance using CSS optimizers. I still use CSS Optimiser up to this day. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manuallyt.
Use CSS Shorthand Rules
When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.
Compare the example longhand its equivalent shorthand below.
Original longhand:
#someid {
background-attachment: fixed;
background-color: #000000;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: left bottom;
}
Shorthand version:
#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }
The folks over at SitePoint has a good introduction to the art of CSS Shorthand that I can recommend to anyone who’s willing to learn.
Server-side Compression
Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.
One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.
The drawback to this is increased CPU load. Indeed, server-side compression is a double-edged sword, but usually the pros far outweigh the cons.
4GuysFromRolla.com – A CSS Button Creation Class
This article is an extension to an earlier 4Guys article, Creating CSS Buttons. … Since each CSS button needs its own classes/IDs declared in a STYLE tag, and, …20 Expert WordPress Tips for Pro-Developers
WordPress has been growing sensationally as the tool to use for Blogging. We’ve compiled a list of things that are good practice and you must do if you are a pro wordpress blogger or developer.
Writing/Blogging Workflow
Mobile Design
Backing Up Data
WordPress with CMS Superpowers
Because of WordPress’ very attractive backend. Using WordPress seems like a very promising move. The following will make it happen: