CodeinWP CodeinWP

Web Design Articles

How Page Speed Increases Website Conversions (Sources)

The Importance of Page SpeedLately in some of my writing projects I’ve had to hunt down sources to demonstrate the importance of web page speed. Usually a quick Google search will pull up some pretty good ones, and I have a few others on file that I can refer to.

I thought I would put together a roundup of some of the ones I’ve been able to find. Web development bloggers, who are constantly promoting the importance of web page speed, should have these types of authoritative sources at their fingertips.

So consider this post the collective evidence for the importance of page speed. Posts are listed from oldest to newest.

Introducing “CSS Basics”

CSS BasicsOver the last couple of weeks I’ve introduced a new link in the main navigation on this site. It’s a new section called CSS Basics.

I’ve wanted to publish info on really basic CSS stuff, because I think web design should be taught at many levels and beginners should especially be informed of the right way to do things.

Is HTML5 Good for SEO?

Is HTML5 Good for SEO?This is a question that has been answered in a number of different places. Unfortunately, the answers in some instances have not been good ones. In fact, they’ve either been way too optimistic and/or presumptuous — or else just downright wrong.

Also, when we use the term “HTML5”, what exactly are we referring to? HTML5 covers a number of different features and technologies, some of which have nothing to do with SEO. So, generally speaking, when people ask this question, they’re usually referring to HTML5’s new semantic elements. So, I’ll primarily focus on those here.

Cross-Browser CSS Development Workflow

Cross-Browser CSS Development WorkflowMost good developers by now accept the fact that pixel-perfect cross-browser CSS is not only unnecessary, but also totally impossible.

Of course, when we speak of the challenge of “cross-browser” CSS, we’re really saying “How can I make this work in Internet Explorer versions 6-8?” — because those are really the most problematic browsers.

Although I’ve written before about cross-browser CSS, and I still stand by just about every word in that article, I thought I’d reiterate my feelings on this subject by providing what I feel is the best workflow for getting your CSS to be as efficient, hack-free, and maintainable as possible while providing as similar an experience in all supported browsers.

One Thing I Don’t Like About Drop-Down Menus

One Thing I Don't Like About Drop-Down MenusI don’t mind drop-down menus. They give designers and information architects options for using screen space wisely. But I think many sites do themselves a disfavour by using them in an inconsistent manner.

The popular travel site Carnival Cruise Lines is a perfect example of what I’m talking about. I love the design of their site. For a travel website, it’s very good; it’s clean, and professionally designed. But I have one small problem with their drop-down menus.

Rolled Out a New Design

New DesignI got ambitious this past weekend and slapped together a new design for this site. Nothing too drastic, just a basic re-skinning with some layout tweaks.

I’m not going to write a book here to describe it, but I did incorporate some interesting new things that I will probably write about in future articles.

Limitations on Styling Visited Links

Limitations on Styling Visited LinksYou might remember about a year or so ago, there was some discussion about the potential privacy issues caused by the CSS :visited pseudo-class. In a nutshell, it was discovered that this pseudo-class along with some scripting, could be used by websites to “sniff” your web browsing history.

You can read more about the problem and subsequent solution here and here.

It seems now that most of the latest versions of all browsers have taken measures to combat this issue. Fortunately, you can still style text links using the :visited pseudo-class. This is a good thing, and I hope we always have that ability. Visited links are a staple of the web, and they should remain.

Health Tips for Web Developers

Health Tips for Web DevelopersIf you’ve ever flown in an airplane and watched the pre-flight safety instruction video, you’ve probably noticed something about the instructions for putting on the oxygen masks.

The video will emphasize the importance of putting on your own oxygen mask first before helping others (like small children). Although this might seem somewhat counterproductive at first glance, this advice underlies an important principle that lies at the heart of this article: You can’t help others if you don’t first help yourself.

As members of a growing, thriving, and super-collaborative community, we have grown accustomed to selflessly sacrificing our time and efforts to create new and exciting projects that assist, educate, and inspire our fellow web designers and developers. And the amazing part of this is that many in the community do these things for what is apparently little to no immediate personal gain. But this all might come at a steep price.

Mixing CSS3 Prefixed Properties with Keyframe Animations

Mixing CSS3 Prefixed Properties with Keyframe AnimationsCurrently, there are still a number of CSS3 properties that will not work unless you include all the various vendor prefixes. And that number is growing now that IE10 has added support for a bunch of new properties and features.

Let’s look at a simple example of some CSS3 keyframe animation code that includes other prefixed CSS3 properties, and consider a problem that might arise when trying to future-proof the animation code.

As of this writing, the full code required to cover all current browser support, plus future support for the standard syntax, would look something like this:

Why Browsers Aren’t TVs (But We Don’t Care)

Why Browsers Aren't TV Sets (And Why We Don't Care)Last week Paul Irish coined a new term: TAFEE, which stands for Tiered, Adaptive, Front-end Experiences. The concept is nothing new.

It’s basically the prettier cousin of the concept of progressive enhancement, with a little bit of Andy Clarke thrown in for good measure. I won’t explain TAFEE here; you can read Paul’s post to understand the concept better, and to understand the reasons behind this approach.

The purpose of this post is to address a few of the comments on that article that were posted in response to the TV analogy that Paul used — which he borrowed from this slideshow by Nicholas Zakas.

Here’s a summary of the basic premise of this debate, and then my thoughts.