Predictions for 2012 (Jun – Nov)

Categories

Tags

A spike in responsive websites

A sudden, abnormal surge of responsive sites.

Why?

Whilst responsive web design is nothing new, and has been talked to death over recent months, its uptake differs quite a bit across the web community. Whilst there’s early adopters with a year’s experience under their belt, there’s also some that are yet to delve into RWD.

I believe that people yet to adopt RWD will feel somewhat obligated to do so by now, causing a surge of responsive sites, on top of the steadily climbing number.

It’ll probably be different for every new adopter, but I reckon they’ll starting doing RWD because of a combination of:

  • User Awareness
  • Client Expectation
  • Competitive Pressure

Page size decreases (for some)

As usage of smartphones and tablets skyrocket, poor connectivity will put the limelight on bloated sites; causing some to tackle the problem head-on, from the ground up.

Why?

I’m not saying that us developers are sloppy, but I do think faster connection speeds – like broadband – have allowed us to take certain liberties over recent years. With 3G, or even 4G, it’s unlikely that mobiles will ever match the connection speeds of their desk-dwelling counterparts. Also, there’s the not-so-small matter that in some countries – like the UK – data comes at a price.

Combined, this should be enough to make us realise that we’re actually asking a lot of mobile visitors, and that reducing page size should be higher up in our list of priorities. And to some, it will.

As I mentioned earlier, I’m expecting quite a few late arrivals to the RWD party. Making sites responsive is no mean feat, so I expect anyone taking up the task now to be preoccupied for quite some time. On the other hand, early adopters of RWD will have (hopefully) spent time streamlining their workflows to free up time for other things; it’s these people I expect to invest time taking on page bloat.

As responsive sites start to become the norm amongst many sectors, I expect super fast websites to replace RWD as the next unique selling point.

It’s already happening…

Take a look at Greenbelt by EdgeofmySeat / Radiotype. Not only is it a nice responsive site, but and it loads fast…really fast. Drew McLellan, the developer involved, has written a handy article highlighting some key areas that helped him achieve this.

Font Scaling via. Media Queries

After a period of smaller viewports hogging the limelight, developers will return to give desktops more attention to detail; in the form of appropriately sized text.

Why?

Big type is beautiful, especially on content-oriented sites, like blogs. But with smaller viewports, big text can look a little silly; especially when headings are so big that even a small title takes up four lines.

I predict that more sites will use media queries to feed progressively larger font sizes; so as the viewport gets larger, the type gets bigger. With it, sites will get the best of both worlds: small[ish] text for the small screen, nice big text for the big screen.

  • Heading: 24px → 36px
  • Bulk: 16px → 22px
It’s already happening…

The personal sites of both Dan Eden and Elliot Jay Stocks have recently undergone a redesign; each site supplying larger font sizes to desktops.

Dramatic decline in usage of IE 6 & 7

A significant drop in worldwide market share for versions 6 and 7 of Internet Explorer.

Why?

IE is a burden to many a developer, and it seems Microsoft know that. Their announcement to introduce auto-updating of IE, release of ie6countdown and some major spend on advertising for IE9 all stand as evidence that Microsoft are serious about phasing out their ageing, troublesome browsers.

I admit that this prediction is heavily reliant on Microsoft keeping its word about auto-updating; but I’m going to be optimistic (for once). According to their announcement, it should already be occurring in small[ish] pockets (e.g. Brazil) and reach the masses by the end of 2012; hence this prediction.

I also predict that, like me, the people affected will do a celebratory jig…probably whilst seated.

A rebuttal to the EU Cookie Law

The businesses and developers within the EU will comply at first, but will turn to protesting, or even rebelling, against the EU Cookie Law.

Why?

Because the law is utter bollocks.

I admit, the initial purpose is well-intentioned, but it’s heavy-handed approach places a burden on the wrong people.

The problem with complying is that it’s damn near impossible to implement anything that functions elegantly; whatever you do, it seems you can’t comply without interrupting the user with unexpected behaviour. In fact, many implementations I’ve seen look more like “Take our Survey” pop-ups or accordions that lurch down from the head of the site; regardless, they just look daunting and out-of-place.

My prediction is that sites will comply…at first.

I believe that because of the EU Cookie Law, sites will see a drop in sales / conversions; and it’ll be hard to outright say “it’s the law” when the sales department stand angrily beside a downwards-pointing graph.

Lose business, just because of opt-in in cookies? “Balderdash”, you might say. But when you consider that the evolution of a website often comes from the data of analytics tools, and that sharing via. social media is pretty much “online word-of-mouth”, you can soon see that most sites will suffer some negative effect from complying.

“But surely people understand cookies!”. Sure, some will…but there’s plenty of people using the internet with zero understanding to how it works; just look at some of the reactions to the Wikipedia blackout (SOPA) and you’ll soon realise there’s some web users completely ignorant to the medium they use so much.

CSS Flags for Cross-Browser Testing

Categories

The principle behind CSS flagging is the same regardless of what it’s used for: you apply non-CSS characters (in comments) to areas of interest, so you can quickly traverse up & down your CSS by means of the IDE’s ‘find’ functionality (usually cmd+F).

In the case of cross-browser flags, you apply temporary markers to CSS attributes that you know will be problematic in older browsers. That way, you know exactly where to start once you begin cross-browser testing. Two attributes that are awesome but problematic in IE7 and lower are box-sizing and display: inline-block;…so flag it for later. You can also flag up decorative CSS, like border-radius and box-shadow.

The reasoning behind CSS flagging is mainly to keep development and cross-browser testing separate; you can plough through development without getting bogged down by constant checks & fixes to make IE play ball. The flags themselves also act as a crude form of quality control, to help reduce the possibility of missing something.

I also like it as an aide to decision-making. Once you’ve built the site, you can use the flags to skim through the build and figure out the best way to supply support. For example, you can use the flags to see if there’s enough usage of CSS3gradients, border-radius and box-shadow to warrant introducing a IE hack like CSS3Pie.

CSS flags can also help to make a decision what method to tackle IE fixes; whether it’s an inline hack (dirty!), conditional HTML (few fixes) or a conditional stylesheet (a lot of fixes).

You can choose whatever flag you want; all it has to be is a string of rarely characters (inside a comment) for the search to lock on to. I’ve used ^~^, because it kinda looks like a smiley face; when I’m knee-deep in cross-browser testing, I need all the cheering up I can get!

CSS Off 2011

Categories

Tags

Just in case you didn’t know, CSS Off is an annual competition presented by unmatchedstyle, which allows front-end developers from around the world to publicly flex their coding muscles.

All entrants are supplied with the same design and given 14 days to return with their submission. Entries are marked out of 100, broken down into the important aspects of front-end development. Each submission is marked by a panel of 10 industry-renowned judges, and the entry that scores the highest is declared the victor.

2011

This year’s design came from Paravel, and was a single-page site for a fictional children’s TV gameshow called “Triple Dare”. UK kids of the 80’s and 90’s, think Funhouse and Get Your Own Back.

I was very impressed with this year’s design. I can’t remember the last time I’ve had the opportunity to play with typography so big and colours as vivid; so it was nice to experience something different. Creating a site for kids was also a refreshing change, as I often work on more corporate projects.

The design supplied was full-width (desktop), but it was clear from the offset that a lot of care and attention had been made to make sure it translated well into mobile / tablet versions. Which made sense considering the addition of “Responsiveness” in this year’s marking breakdown.

  • Start: 20th October 2011
  • Deadline: 3rd November 2011
  • Total Submissions: 426
  • Announcements: 9th March 2012

My Experience

Although I’d dabbled with responsive web design before the competition, the majority of it was early experimental stuff with — dare I say it — CSS frameworks. I used CSS Off as an opportunity to go it alone, so took the leap and used Malarky’s 320andUp as my loose foundation.

I started strong, but with a full-time job and other commitments, I soon realised that I wouldn’t be able to spend as much time on this as I’d like. I considered giving up on 3 occasions, thinking I might not produce something I was happy with submitting; but alas, I persevered. I decided around mid-way through that I would spend no more than 25 hours on my submission. I could’ve spent longer, stayed up ‘til ridiculous o’clock, but I didn’t; partly for the sake of my sanity, partly for the sake of not running myself into the ground.

My Submission

Score: 60 / 100
Placement: 85th (top 20%)

Overall, I was pleasantly surprised with my score. Considering that this was my first framework-less responsive build, I was happy with the 7/10 in ‘Responsive Implementation’. The areas where I floundered a little – ‘Overall Project Size’ and ‘Legacy Browser Support’ – were well-warranted, as I barely spent any time on either. If I were to attempt the competition again, it’s safe to say that I’d try to allocate more of my free time to my submission.

Full Breakdown

  • Code Cleanliness: 7
  • Code Semantics: 5
  • Code Validation: 3
  • Match Original Design: 7
  • Good Choice Points: 6
  • Interactions: 6
  • Modern Browser Support: 6
  • Legacy Browser Support: 2
  • Overall Project Size: 4
  • Resource Optimization: 7
  • Responsive Implementation: 7

Reflection

Producing my submission was a great learning experience, there’s no doubt about that. But the beauty of CSS Off is that once over, all submissions are published; which means that now I can study the winning submissions and look at areas they did better in.

The web and creative industries have their fair share of butt-kissing and cat fights, but I was delighted to see a continual flow of well-wishing and genuine friendliness on the #CSSOff hashtag.

I feel that it’s friendly competitions like CSS Off that schools, colleges and university’s really need to embrace. The way it operates mimics the industry much better than any assignment or course module; at least based on my experience. And it doesn’t take forever; it’s just a 2 week window. It also helps budding front-end developers think outside of their class or school; and perhaps find a few people that share their passion for web development.

The announcements came a little later than expected, but I still think the judging team did an excellent job. They kept their word, combing through each submission and providing detailed feedback; which must’ve been a laborious task considering there were over 400 submissions.

By looking at the winning entry (by Danny Connell), it’s good to see obvious reasons as to why his submission won. Before even digging into the code, a quick nosey around shows that it responds very well to changes in viewport size, and the animations he’s done are a perfect polish to the design.

Overall, I’d call 2011’s CSS Off a great success…2012’s is very much on the cards.

A Common Problem with Responsive CSS Frameworks

Categories

Although the concept behind responsive web design is older, I’ve noticed that discussions surrounding this topic have really exploded in recent months. I think that it’s pretty safe to say that 2012 is going to be the year that many developers use it at a production level, if they haven’t already.

With that in mind, there are a number of free CSS frameworks on the market ready to tackle responsive web design. I’ll be blunt, I have some major concerns with them; I’ll explain why…

‘Smart’ Fixed-Width

This technique is very much a wolf disguised in sheep’s clothing. On the surface, the site does in fact respond to changes in browser viewport, but how it achieves this is rather worrying.

A ‘smart’ fixed-width site responds because each media query in the stack has a declaration that manipulates the content area; but, because it’s using pixels instead of a flexible value, it’s got to use the smallest value in that range. For example, a media query ranging between 768 and 959 cannot have a width higher than 768; so if you’re viewing at, say 940, then the content area gets narrowed back to 768. If it didn’t do this, the site would be subjected to a horizontal scroll.

So, what values should it use? Based on the ‘smart’ fixed-width frameworks I’ve encountered, many are influenced by popular mobiles and tablets; so everything is a-OK so long as you’re using an iPhone or iPad. The problems arise when you’re not using one of those devices.

Enough talk, the best way is to demonstrate the problem is with two real-life devices coping with two real-life frameworks:

The Devices

  • Blackberry Torch

    Blackberry Torch

    360 x 480

  • Galaxy Tab

    Galaxy Tab

    600 x 1024

The Frameworks

  • Less Framework
  • Skeleton

So, this is what happens…

Blackberry Torch (portrait):
  • Less: 252px … 70% of the viewport
  • Skeleton: 300px … 83% of the viewport
Samsung Galaxy Tab (portrait):
  • Less: 436px … 72% of the viewport
  • Skeleton: 420px … 70% of the viewport

That’s right. Someone’s just spent £300+ on a tablet or smartphone, yet when they visit a site built using Less or Skeleton, there’s a good chance the content width will be no larger than 70% of the device’s width. Yeah, I wouldn’t be too pleased either.

This is my objection to frameworks that use the ‘smart’ fixed-width technique; whilst it might be easier for the developer to create the site, it’s done at the expense of the user’s experience.

Stop creating things for the sake of having something to release

Categories

Although I’m pretty certain that it happens in other circles too, I first noticed this on Forrst…

People are addicted to creating and sharing things

It seems like with every minute that passes, there’s some designer or developer thrusting their creation upon the world. I would like to think that it’s underpinned by a genuine urge to give back to the community; but based on the wording, links and promotional efforts that often accompany them, I’m led to assume it’s to get recognition.

I’ll be blunt. This is me voicing my objection to throw-away products like UI sets and button PSDs. I call them throw-away because the people that walk this path manage to churn out these products at ridiculous speed, and I can’t help but think that, in most cases, they’re aiming for quantity, not quality.

I met with a few designers and developers in Birmingham a couple of weeks ago, to which the topic of products and UI sets reared its ugly head. Dan Eden was there, so I took it as an opportunity to ask him about his product, AnimateCSS and the inspiration behind it. He said:

AnimateCSS was born from the boredom of writing the same keyframe declarations again and again; especially when I was creating Brills. I thought: “why don’t I just write a bunch of animations that are commonplace in applications and interaction design, and keep it for use in whatever I want?”. After I was done, I put it on my website and tweeted “I made this thing…”. I started getting e-mails from people saying they loved it and that I should put it on github. As soon as I did that, its popularity exploded.

For me, Dan & AnimateCSS stand as a perfect example of what I’ve always believed:

  1. The best tools are born from trying to fix your own problem.
  2. One great product does more for the community than 30 decent products.
  3. A genuinely useful tool will get the recognition it deserves; regardless of the creator’s urge for it to become popular.

As a final thought and a bit of a disclaimer for the UI police, this post isn’t me saying “Stop! Stop creating things!”; because, well, that would be foolish. All I’m saying is that it’d be nice if the trend returned to quality over quantity, and we got a steady flow of awesome instead of a flood of mediocre.

Web Development Tools

Categories

Tags

We all have tools out there that help us do our job better / quicker. Well here’s a big ol’ list of the web development tools I use on a pretty much daily basis…

0to255

Web Tool

This is a great little tool for helping with the use of colour on websites.

Simply visit the website, punch in your hexidecimal code and 0to255 will respond with a stack of lighter and darker variants, all stemming from the one you provided.

0to2550to255 showing lighter / darker shades of Facebook blue (#3B5998)

From a front-end development perspective, I’ve found it particularly useful for choosing the shades of a CSS-gradient, or the the hover states of links.

CSS Refresh

JS File

This is a small, unobtrusive JavaScript file that you include during developing locally. It detects when a change has been made to the CSS and re-loads it into the site; without the need for refreshing the browser.

I’ve found it particularly useful when doing responsive web design; as I can just sit devices to face me and watch them change without moving off my keyboard. Similarly, it’s also a great aide to development whilst using dual-screens.

Note: Just remember to remove it once you’re done.

WhatFont?

Chrome Extension

With the use of @font-face on a steep increase, this is a question you’ll ask more frequently.

Whilst you can dig around with Chrome’s Inspector or Firefox’s Firebug, I like how quick and neat this extension makes the experience. It’s also worth mentioning that WhatFont also shows information relevant to typography, including: color, font stack, size, weight and line-height…so it summarises how the site is treating the font.

WhatFont? detecting the fonts used on Smashing Magazine

All that’s left is to go find it as a webfont.

AnimateCSS

CSS / Web Tool

This awesome nugget of CSS by Dan Eden allows you to apply pre-built CSS3 animations by simply including the CSS and applying a class. The website itself also acts as a great tool to see what’s possible with CSS3 animations.

Because they’re pre-built, it frees up your time to experiment with the aesthetics, instead of slaving over the actual code. Which means you’ll find an animation you like in a fraction of the time.

AnimateCSSSee what’s possible with CSS3 Animations in the preview section

I have a copy of AnimateCSS handy in all my projects, just in case I get the opportunity to experiment.

Note: The development file is pretty huge; be sure the use the custom build feature on the site to only get the code you need.

Fillerati

Web Tool

No-one is a fan of using dummy text. It’s placeholder text that’s mis-representative of what text could later come from the client. But let’s be honest: getting content from a client is sometimes like getting blood from a stone.

True, there are other services that offer dummy text creation – for example the ever-popular Lorem Ipsum – but I often find that these create patterns or “rivers” in the text; both of which can draw unnecessary attention.

I like Fillerati because it’s unique text at any length, English and readable; but in context of your site, it’s still complete nonsense.

FilleratiFillerati provides placeholder text from a selection of classic novels

LoremPixel

Web Tool

Like dummy text, placeholder images are for when someone falls short on supplying content. Whether it’s a lack of supplied images, or even no feedback on a stockphoto comp, tools like lorempixel are there to pick up the slack. Perhaps the major benefit from any of these tools is that the images are loaded dynamically; so you don’t clutter up your framework.

It functions in very much the same way as placehold.it and dummyimage.com – and likely to be used in a similar scenario – but the difference is that lorempixel returns a real photograph, not a block colour. Whilst the former two tools are great for wireframing, the latter is more appropriate for real-life frameworks.

Lorem PixelThis image was created using lorempixel.com/741/229/sports/1/

As an added bonus, you can use the URL to add text, narrow the randomisation down by category (e.g. /city/ gets cityscapes), use a number (1-10) to choose a specific image and turn it greyscale (by using /g/).

I also like placekitten.com, which I use when I need cheering up (yes, I like cats).