Author:

David Bushell is a website designer and front-end developer working at Browser Creative, London. He blogs regularly at dbushell.com and xheight, and shares inspiration and web design related interests at Design Heroes. You can also follow him on Twitter.

Twitter: Follow David Bushell on Twitter

Performance & RWDImplementing Off-Canvas Navigation For A Responsive Website

The varying viewports that our websites encounter on a daily basis continue to demand more from responsive design. Not only must we continue to tackle the issues of content choreography — the art of maintaining order and context throughout the chaotic ebb and flow of the Web browser — but we must also meet the expectations of users.

Implementing Off-Canvas Navigation For A Responsive Website

They’re not sitting still. With the likes of Firefox OS (Boot to Gecko), Chrome OS and now Ubuntu for phones — an OS that makes “Web apps” first-class citizens — delivering native app-like experiences on the Web may become a necessity if users begin to expect it.

Read more...

Resolution Independence With SVG

In this article, we’ll look at Scalable Vector Graphics (SVG), one of the most underused technologies in website development today. Before diving into an example, let’s consider the state of the Web at present and where it is going. Website design has found new vigor in recent years, with the evolving technique of responsive design.

Resolution Independence with SVG

And for good reason: essentially, responsive website design moves us away from the fixed-width pages we’ve grown accustomed to, replacing them with shape-shifting layouts and intelligent reflowing of content. Add to that a thoughtful content strategy and mobile-first approach, and we’re starting to offer an experience that adapts across devices and browsers to suit the user’s context.

Read more...

Understanding Copyright And Licenses

The Web is full of creative and practical resources that we can use to improve our projects. Photography, fonts, music and code are perfect examples. Finding stock objects and existing implementations is often quicker, cheaper and more practical than producing your own.

Understanding Copyright and Licenses

Whether free or not, these resources normally come with a license to ensure fair use. For professionals, understanding the limitations of a license is critical; with this knowledge, you’d be surprised by what’s available. Understanding copyright and licenses allows us to do what we do best: be creative.

Read more...

In Search Of The Perfect CAPTCHA

CAPTCHAs, or Completely Automated Public Turing Tests to Tell Computers and Humans Apart, exist to ensure that user input has not been generated by a computer. These peculiar puzzles are commonly used on the web to protect registration and comment forms from spam. To be honest, I have mixed feelings about CAPTCHAs. They have annoyed me on many occasions, but I’ve also implemented them as quick fixes on websites.

reCAPTCHA

[fblike]

This article follows the search for the perfect solution to the problem of increasing amounts of human-generated spam. We’ll look at how and why CAPTCHAs are used and their effect on usability in order to answer key questions: what is the perfect CAPTCHA, and are they even desirable?

Read more...

Bringing Interactivity To Your Website With Web Standards

Adding interactivity and animations to a design doesn't have to be complicated or make the website inaccessible when you use modern Web standards. In this article, we’ll explore several examples and theories that employ CSS, HTML, SVG, the canvas element and JavaScript. Some of these techniques you'll know, others you may not have considered. Let's start with the basics.

Screenshot

[fblike]

Manipulating HTML with JavaScript is the most common method of adding interactivity to a website. But before you start using JavaScript, having a strong understanding of the CSS visual formatting model and box model is important. They are vital to making sense of how HTML elements can be manipulated visually. When you dynamically change the style of an HTML element, it will flow with and react to the rest of the document. Learning to anticipate and control what is affected can be difficult.

Read more...
1

↑ Back to top