Web Accessibility - Don't make me think!

Southern Electricity is in the crosshair this afternoon after they think it is a great idea to force their customers (new and old) to watch a video when landing on their site.

Southern Electric Video

In Web Accessibility 101, this is a no-no.

Class dismissed.

Coding CSS with style

Over the years of coding CSS, I have developed a habit of laying out the selectors like this for example:

.box {
     background: #444;
     border: 1px solid #ddd;
     float: left;
     height: 400px;
     width: 400px;
    }
    
    .box p {
     color: #fff;
     font-family: Helvetica, Arial;
     font-size: 14px;
     font-size: 1.4rem;
     line-height: 24px;
     text-align: right;
    }
    

This is alphabetical layout and it has always worked for me including everyone else out there who wish to read it.

I'm going to repeat the same code but differently this time.

.box {
     float: left;
     height: 400px;
     width: 400px;
     background: #444;
     border: 1px solid #ddd;
    }
    
    .box p {
     font-family: Helvetica, Arial;
     font-size: 14px;
     font-size: 1.4rem;
     line-height: 24px;
     text-align: right;
     color: #fff;
    }
    

This is sorting out by groups. Box, colouring, typography, etc. I do like this method yet it feels slower to code thanks to my habit because I like to keep it all alphabetical (I do wonder if I have coding OCD).

What is your preferred method? Alphabetical or groups? Or something else? Discuss over at twitter - @craigbutcher.

Web Pet hate of the Week - "Give us your feedback" survey

From time to time all the time, I run into feedback survey like the one below.

Oh you are an annoying feedback survey

I have not been on this website for many years and I get this prompt box. I could click on "No thanks" and it will put a cookie on the "computer system" (awww, cute words) to prevent this happening again.

It's annoying. You may say otherwise but this is not simplicity. It introduces complexity for companies to ask the customer what they want or finding if they are okay on their website. It is like an annoying sales guy wanting to make sure if you can walk.

It is a good idea not to derail their online journey and let the customer approach you if they have anything to say about your site.

Don't make them think!

Avoid Twitter Bootstrap.

Bootstrap may be grabbing all the attention for start ups or for web designers/developers to build a quick website. You can either download the full whack or customise to how you see fit to match the client's specs.

Here are my top five reasons to avoid using Bootstrap at all cost:

  1. Design. There are so many websites using Bootstrap's design that I am no longer be razzle-dazzle by it. If you want to stand out from the crowd, do something brilliant.
  2. Too many classes. I have seen many sites using over the top inline classes. This isn't the early 2000s where the land of divitis Always write lean, consistent and semantic coding.
  3. Plugins. They just about break all the time leading us to wail and hunt for solutions throughout stackoverflow. Write your own or use existing solution that you know and works.
  4. Bloat. If it is going to be a static website, Bootstrap is not the ideal solution. You perhaps only will use up to 5% of the craziness.
  5. Laziness. One of the pet hates of web designers/developers. If you want to produce something right, do it properly.

So how can you improve yourself in this area? There is no quickfire solution here. The best way to learn are:

  1. Learn how to code better and leaner HTML/CSS/JS/jQuery layout. Make sure you combine accessibility ARIA (hello roles!), Responsive Web Design, and many others from scratch.
  2. Up the game yourself to learn SASS/Less/Stylus (CSS extension language).
  3. Use Susy to help create a better layout and understand why building grids is awesome.
  4. Practice, practice, practice and go back to any of your work thinking "Right, I am going to do code refactoring!".

Now go and produce some awesomeness.

"Thanks for test driving OS X Yosemite"

I feel warm and fuzzy inside!

Email - OS X Yosemite thanks