Learning is one of my favorite things to do, and I’ve learned a lot this year. I believe that the best way someone can push the web forward is to share what they’ve learned, and while I certainly want to share all that I know, that’s just not realistic in the form of short blogs. So what I want to do is give a high-level view of what I think are some important and hot topics for web professionals these days.
Accessibility
The internet doesn’t belong to you, or me, or even The Man; the internet belongs to everyone. Since the web belongs to everyone, everybody should be able to access any site that they want to. Believe it or not, a web page is fully accessible by default, but we mess that up by complicating things and trying to add flare without doing it properly. Here are some tips:
- Try using your website without a mouse. Did you lose the ability to do anything?
- Try using your website with a screen reader. If you can still use your website properly, is it confusing?
- Here’s an infographic with some tips to keep in mind.
Be sure to keep your HTML semantic and use ARIA attributes – and did you know you could be breaking the law by having an inaccessible website? To learn a lot more,
WebAIM has some really great information, statistics, and resources.
New Hotness
I’ve said it 6,104,223 times before, and I’ll say it at least that many times again: the web moves fast; there’s always something new. There’s some new hot feature, tool, or library seemingly every day, but browsers can’t move that fast, and certainly not all at the same time. Using these awesome new features on production websites isn’t too realistic, so it’s easy to push it off after you learn it (if you take the time to learn in the first place). Well guess what, it’s time to use some of the new hotness:
Flexbox:
A few years ago this was the newest hottest thing in CSS. Developers were finally able to control and manipulate layout in CSS. It took a while to get everyone on board (and there’s even been a full syntax change), but I’m here to say please use flexbox! Check out this awesome browser support:
That’s a lot of green!
CSS Animations:
Users want feedback, and when one is interacting with your site they feel really good if the screen elements respond to the actions. To achieve a really responsive and pleasing experience, CSS animations are a very strong tool. Almost all browsers support almost all animation properties, but for most reasonable animations you should be in the clear. Pro tip – to give users the impression that your site is fast, use quick animations. Don’t take it from me:
- “Sometimes when we release an update, I tighten up an old transition by ~50ms. Result: ‘Wow, this new version feels faster.’”-- Cennydd Bowles (design manager for Twitter)
This week I had the pleasure of learning from the great
Val Head, a (Canadian!) designer based in Pittsburgh, and she’s an animation queen. She has an awesome list of resources and tutorials on animating for the web
here.
NodeJS:
NodeJS emerged a few years ago, and today it’s very popular in the JavaScript developer crowd.
- “Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.” -- http://nodejs.org
Essentially, NodeJS makes it really easy to make really fast and capable web sites and applications. Windows Azure and Amazon Web Services are leaders in hosting for NodeJS, but you can even get it on some other providers like GoDaddy. My latest love affair with NodeJS is with SailsJS – a web framework built entirely on NodeJS which makes using node super easy and quick.
(<picture> and srcset get an honorable mention in here. I suggest using them on your site, but there are couple considerations to keep in mind to make responsive images bulletproof)
Performance
One of the biggest discussions today pertaining to the web is based around performance. Basically, it breaks down to these 3 questions:
- How fast is your website?
- How fast is your website on a mobile device?
- Does your website serve appropriate content (size, weight) to all devices? The Guardian has one day a month where all developers are only allowed to delete code from their code-base to make sure that their site isn’t bloated.
These are all considerations you should be thinking of from day one of your web project, and everyone can be involved in these discussions. Here are just a few ways to increase dramatically performance:
- Front-End Developers: Did you know that the first chunk of a web page that is downloaded is only 14kb? So if you give your users enough to start using your site in that first 14kb, your site will feel as if it’s all done.
- Back-End Developers: How does your CMS and server handle asset caching? Are appropriate headers being set during deployments? Is all of the data being returned from the server appropriate? Meaning, is everything in the best format and without any unnecessary data?
- Project Managers: Every project has a time and money budget, but have you heard of a performance budget? A really easy way to implement this is with simple metrics. For example: Twitter might have a “time to first tweet” requirement. This budget should be as important as time and money budgets.
Why fast? Google gives a significant weight to page speed in their search algorithm, the bounce rate of performant web pages is much lower, and conversions increase when the user feels like the site they’re on is quick and responsive. Basically your site will be more visible and be more successful if it is fast, not to mention a fast website or webapp pushes the web further for everyone.
A couple really handy tools to test the performance of your website:
To keep us all sane, I’m going to end it there. I didn’t dive too deep into any topic, and you now have some very solid foundations to all of these topics.