Excessive texting ‘damages your health’

Mozilla shows off Aurora browser concept

The Internet As You Know It Is Slated For Death By 2012

7 Principles Of Clean And Optimized CSS Code

1. Bad Location
While a “bricks and mortar” outfit will have trouble in certain areas depending on competition and other factors, the same problem can occur if a website is not properly “located” when it comes to search engine findability, domain name, and hosting.

It’s sad to see that many businesses today still need to be reminded that free hosting packages, bad keyword density and poor choice in domain name can all have an effect on whether or not people stumble in during their online shopping. So website owners should invest the time, effort and money necessary to ensure their “location” on the web is suitable to staying competitive in their market.

2. High Prices
Due to the nature of the web, and an increase in online competition, it is harder for companies to markup prices exorbitantly. But sometimes overhead costs force prices to stay relatively high. Website owners should try to battle this by offering online promotions, coupons, returning-customer deals and other sales techniques that will make the high prices not seem so high in the long run.

3. Dirty Store
Yes, a website needs to be clean just as a brick and mortar store does. Make the investment to ensure your website’s code is standards-compliant, cross-browser friendly, and accessible to users with disabilities. Also, ensure your online business has easy-to-use site navigation by means of site maps, site search, and breadcrumb-friendly page structure.

4. Pushy Salespeople
Your web page’s content can be just as intimidating as a pushy in-person sales person. So hire a good copywriter and keep your pages friendly and informative. Don’t make the users feel that they are stupid if they don’t buy your product, and certainly don’t insult their intelligence. You can still tell them how important your product or service is by being tactful and insightful, and by displaying a good knowledge of the industry.

5. Poor Customer Service
Your website’s forms and shopping cart functionality should not alienate the user from your company. Site visitors should always feel that you or your representatives are available to help them at all times in case there is any problem, or if they have any questions. So make sure you provide a good FAQ page, a help section, a toll free number to call, and an easy to use contact form — and follow this up with a fast turn-around on all customer service and sales inquiries.

Bricks and Mortar or Online — the principles are the same
So, if you have a standard “bricks and mortar” business complemented with an online store or brochure website, follow the advice found in the original article for your bricks and mortar, and apply some of these tips mentioned above for your online business and you’ll be sure to reap the benefits.

Search Engine Optimization Tips For PDFs

10 Tips For Being A Greener Web Designer

Microsoft tries to one-up Google PageRank

Firebug introduces ‘Firebug Lite’

The Key — The columns are not *really* equal
The only way to do this without using a very complex CSS layout is to essentially create the illusion that you have equal columns. But don’t worry — although the result is not really equal columns, it looks and acts exactly as an equal column layout would.

How to mimic the columns
To describe the method, I’ll just use a simple example: Two DIVs side by side representing the two columns; and one DIV containing the two. From there, it’s quite simple — just wrap your containing DIV with another DIV then apply ”overflow: hidden” on that outer DIV to ensure it doesn’t collapse in Firefox. Then, add a background image that repeats on the Y-axis (vertically). So, if you have a drop shadowed border, or even a simple 1 pixel border, you would create the image in your image editing program (Photoshop, Illustrator, etc.) and then just adjust the background-position of the image in your CSS to place it exactly where you want it. Since this DIV is essentially behind your two columns, holding both of them, you cannot have a background color on your columns, as it would block the image from showing up.

Keep in mind
You might think this could be done with a one pixel-border on one of the columns, but remember, one of the columns is not going to extend to the bottom, so the border method won’t work without some serious CSS hacks and workarounds. You’re creating the illusion that the short column is extending to the bottom by positioning the background image in a place where it mimics the short column’s border. Except, unlike the short column, your outer container (the container holding the container, if you will) is always going to extend to the bottom, thus creating the illusion of a two column layout where the columns are always equal, regardless of content. And best of all, either of the two columns could extend larger than the other, and the illusion would still work.

Overall, a very easy solution with limited drawbacks
This really is an easy to implement solution that can work on many CSS layouts, and doesn’t have too many drawbacks, other than adding some non-semantic code to your markup and (somewhat) complicating your DIV structure.

So if you’re in need of a hack-free quick fix to a two-column layout, this is a good solution and will work in virtually every browser and platform.

View the demo page, to see this simple, yet effective, solution in action.

Fewer attributes further enhance clean code
Often because we want to easily identify our styles in our stylesheet, when we code an HTML tag, our first instinct is to add a “class” or “id” attribute. At times I do it without thinking. But think of how much cleaner the code would be with no class or ID on that tag? That’s right — just a plain ol’ tag. And when you combine this with the avoidance of divitis, you can easily see the contrast:

With divitis and attributitis…

<div class=”my_ul_holder”>
<ul class=”my_ul”>
<li class=”my_list_item”>Example Text<li>
</ul>
</div>

And Without…

<ul>
<li>Example Text<li>
</ul>

I know what you’re thinking: It’s not always that easy — sometimes you have to apply classes and attributes in order to differentiate. But, to some degree, it can be avoided.

Have site-wide defaults for commonly used tags
By now you should be using a CSS reset to revert all your site’s styles to the bare minimum. If you’re not, do yourself a favor and research the topic and start using a reset. It’s extremely helpful for cross-browser compatibility. But further down in your style sheet, you should have a section of code that contains the site’s custom default styles for various HTML tags like H1, H2, P, UL, and others.

For example, if you know you’re going to have about a dozen unordered lists on the site, styled exactly the same way, there is no need to put class=”my_unordered_list” on every one of them. Just leave the class attribute off completely, and style your UL element to reflect this in your style sheet.

Even if you want to apply a different style to one of them, you can simply do so through the DIV hierarchy that you’ve already likely created in your XHTML. So instead of of adding

class=”other_unordered_style”

to your UL tag, you can leave the UL naked and use something like this in your CSS:

#footer ul {
// enter styles here
}

to declare a different set of styles on the single unordered list that appears in your footer.

Cleaner markup and better site performance
This will leave your HTML code clean, semantic, and (somewhat) attribute-free. True, this will likely add a few kilobytes to your CSS file. But since CSS is cached by your browser, it will work out better overall for your site’s performance. With a little careful forethought, XHTML and CSS can easily be stripped down to its bare bones — or close to it — and your site will still look as beautiful as it was intended from a visual perspective, and will no doubt be easier to maintain in the future.

Hi-tech is turning us all into time-wasters

Evoking Curiosity — a Form of Marketing

What Boston and Nirvana Can Teach You About Finding Your Winning Difference

50 Must Read Resources for Incredible Web Design

Why lists of “rules” can often fail in the long run
It is often said that behind every rule there is an underlying principle. Let’s illustrate this with an example. When a blog post tells a user to use H1 tags for headings instead of something clunky like

<div class=”header_main”>My Example Heading</div>

then the whole reason behind the necessity of the H1 may become lost on the reader, especially a reader that is new to web development, or is picking it up simply as a hobby. In such a case, the reader needs to understand why such an approach to markup is necessary — not just that it is necessary. Simply stated, websites are more findable, search engine friendly, and faster loading when the markup is semantic. Now, I’m not going to go into the details of defining “semantic markup” here. That is a topic for another post. But I’m emphasizing that the rules can easily be forgotten over the long run if the readers are not understanding the reasons behind certain SEO techniques, best practice coding, and other standards-based ideas.

Online writers and readers both play a role
So writers should be more aware of the effect their content will have on the future of web development, SEO, and the internet in general. We as writers should strive to teach others based on strong foundations and concepts that are clearly understood. Likewise, we as readers need to strive to read and learn from others based on strong foundations and concepts that are clearly explained. Both sides have a significant role to play in what the web will be like down the road.

Readers and writers, aim for a stronger foundation of learning
Therefore, in conclusion, while the typical bulleted lists and point-form rule-sets have their place and can be very useful, the more important “reasons behind the rules” are what will truly enhance a reader’s development as a web site professional, and will, by extension, make the web a better place for all.

Doubtsourcing

The Myopic Web Developer

Do-it-yourself SEO tips from Matt Cutts

Do browsers need a ‘best-before’ date?

1. Indent CSS using the same structure as the HTML
I don’t know why this isn’t more prevalent (at least it’s not written about a lot online), but I recently started doing this after viewing an online video from a fairly popular CSS developer and blogger. Having the Web Developer Tool Bar in Firefox helps track down CSS fairly quickly, I find the indenting actually assists the development of the site itself. It’s much easier to read the CSS and see what the code is doing, even as you type. Especially is this important if the project spans many weeks or months, as the structure of the HTML and how it relates to the CSS styles can easily go forgotten. So, indent your CSS in a hierarchical manner so you can easily match a nested section of HTML to its CSS counterpart.

2. Use lots of spacing and comments
The comments are generally a no-brainer. All good code is commented. But the spacing is simply for readability. I know, the more white space you have, the more bandwidth it’ll cost you, but you can always remove the white space towards the end of the project, if necessary. And spacing should not just include that which occurs as entire lines between ID and Class groupings — I personally like to see white space in between all the selectors and colons as well as between grouped styles that are organized all on one line (as opposed to one on each line within the group, as seems to be most common). So do this:

#example_section {
float: left;
width: 300px;
height: 400px;
background: url(../images/example_image.jpg) no-repeat 0 0;
}.example_section_2 {
color: #fff;
line-height: 14px;
}

Not this:


#example_section{
float:left;
width:300px;
height:400px;
background:url(../images/example_image.jpg) no-repeat 0 0;
}
.example_section_2{
color:#fff;
l ine-height: 14px;
}


The difference is subtle in this short example, but the first example is much easier to read when applied to a 1000+ line CSS file.

3. Always use external files to hold your CSS code
This is a basic tip, and all good developers should do this. If your main CSS file applies to dozens, or even hundreds, of content pages, then your pages will load faster with an external file because all subsequent page loads will get the CSS code from your browser’s cache. Thus the CSS will only load once, saving bandwidth and improving user wait times. And of course, the other benefit is that the CSS stays separate from the HTML, the same way the JavaScript should, keeping the 3 layers of front end web development clean and separate.

4. Keep default styles and link styles near the top
For me, this one is a bit of a personal preference. I like to know that all my default styles (CSS reset code, heading styles, unordered list styles, hyperlink styles) are easily accesible near the top of the CSS document. After all, those styles are not always part of the HTML hierarchy, and often won’t fit well with the DIVs, custom paragraph tags and the like. So when I do a high-speed scroll through my CSS code, I know that when I get to a certain section near the top (in my case the section that styles all hyper links on the page), then I know that all my default styles have ended and the hierarchical section begins. And with some effective commenting, the rest of the document can be just as easy to scroll through and find a particular section.

5. Use shorthand notation
This will improve your CSS code immensely, as well as save a few kilobytes in bandwidth. Basically it means putting related CSS styles on one line instead of declaring them all using separate selectors. So for example, here is a long-winded example of applying a background image to a DIV tag:


#my_example {
background-image: url(../example_image.jpg);
background-image: background-color: transparent;
background-image: background-repeat: no-repeat;
background-image: background-position: 0 0;
}


And here is the better shorthand version of the above code:


#my_example {
background-image: url(../example_image.jpg) transparent no-repeat 0 0;
}


Much easier to read, easier to maintain, and the order of the values doesn’t matter, so you can make the reference to the JPEG image the last value if you prefer.

Benefits while you develop as well as in the future
The benefits reaped from these tips will not only help developers working on the site in the future, but will help you during the process of developing the site. Often, client requests and other project details interrupt the workflow. That can put a damper on your mental ability to stay focused on how you’ve organized your code. To ensure that your code doesn’t become an unintelligible mess, keep things neat and organized and you’ll see the benefits now as well as in the future.

‘Shake-up’ for internet proposed

The 10 Commandments of Web Design

Google’s Improved Flash indexing

Which Javascript frameworks are the most common?