Have usability conventions and the web’s universality steered us away from proper art direction? Have we forgotten about art direction altogether? Marko Dugonjić believes so. As designers, we can achieve much more with type, and with just a little more thought and creativity, we can finally start to take full advantage of the type systems available. Let’s look at ways we can push typographic design on the web further, beyond the status quo of today.
Read more…
There is a gap between pure CSS layout and custom design elements created in software such as Photoshop or Illustrator. Sophisticated SVG filters give us more independence from third-party design tools and bridge this gap by enabling us to create visual styles directly in the browser.Wouldn’t it be great if we could style letters the same way we usually style text with CSS? In this article Dirk Weber will show you how SVG filters help you to create playful, decorative web typography.
Read more…
With CSS’ clip-path property you will begin to think outside the box, literally, and hexagons, stars and octagons will begin to take form on your web pages. Once you get your hands dirty with clip-path, there’s no end to the shapes you can generate, simply by tweaking a few values. In this article, Karen Menezes will provide demos referenced to an inline SVG, in order to gain additional support on Firefox. Generating a responsive SVG clipped shape is trivial once you have created a responsive shape with CSS’ clip-path. We’ll look at this in detail later.
Read more…
Perhaps the only thing worse than a fire that could happen to the office of a web development company would be losing connectivity to the web. This is why Google Mail inserts a warning whenever you go offline. As noted in Marco Zehe’s 2008 blog post, Google was an early adopter of ARIA live regions. In this article, Heydon Pickering is going to create a script which tests whether the user is online or off and uses ARIA to warn screen reader users of the change in this status so they know whether it’s worth staying at their desk or giving up and going for a beer.
Read more…
Although it’s definitely still a work in progress, Sketch continues to be Ashley Bennent’s go-to web design program. Its tools and interface prioritize design for the web. Things like the premade artboard templates, symbols and simple exporting functionality have drastically sped up my workflow and made the design process a little easier. Sketch has also improved my entire workflow, from moodboards to the early stages of development, making it an optimal tool for responsive design. Plenty of other programs out there have similar features, and until the most recent update (Sketch 3.2), users were battling a lot of bugs in the app. So, why Sketch? Bugs or no bugs, it has become the best tool for UI design, including responsive web design.
Read more…
What if we had an opportunity to write visual tests for responsive websites? What if we could describe the look and feel of an application and put this directly into our tests? Ivan Shubin decided to look at another interesting side of visual testing. For the last seven years, his main focus has been testing automation for a big enterprise project. Over time, Ivan became obsessed with the idea of applying automated testing using the TDD methodology to the look and feel of responsive websites. In this article, he’ll describe this experiment in detail and propose TDD as a methodology for front-end development. He will look at the new visual testing technique and examine how to get the most out of it.
Read more…
Bugs erode trust, which in turn loses customers. So when Ben Gremillion began updating Foundation, a responsive CSS framework, he wanted to ensure everything worked. In this article Ben will teach you his methodology for testing responsively, not just on a case by case, page-from-PSD comp. He developed a certain system to make sure that nothing’s broken at launch on different devices. It’s not enough to look for blatant bugs. You have to be thorough: in execution, in accountability, and in direction.
Read more…
You have likely experienced the 300-millisecond delay in mobile browsers or wrestled with touchmove versus scrolling. Certain events that used to be very clear are now filled with ambiguity. The click event used to mean one thing and one thing only, but touchscreens have complicated it by needing to discern whether the action is a double-click, scroll, event or some other OS-level gesture. In this article Dustan Kasten will introduce the event cascade and use this knowledge to implement a demo of a tap event that supports the many input methods while not breaking in proxy browsers such as Opera Mini.
Read more…
Using SVGs can reduce the number of HTTP requests for image replacement. it’s also easy to make an SVG scalable to its container for responsive development. In this article Sarah Drasner will cover a few ways of using SVG sprites to describe motion on the web. She’ll show some techniques for using SVG sprites in complex animation that takes advantage of these factors. All examples shown will assume the use of an auto-prefixer and some basic knowledge of CSS animations.
Read more…
With Mat Marquis of the Responsive Images Community Group, Tim Evko decided to refactor a plugin that he had built several months ago, hoping that it would lead to a more useable and performant solution. After months of pull requests, conversations on Slack and help from WordPress’ core team, they’re finally ready to share what they’ve been working on! You can download and install RICG Responsive Images from WordPress’ plugin directory.
Read more…
