Tuesday, August 27, 2013

Responsive Images with Apropos

Responsive Images with Apropos

When Square's front-end engineering team was building our Japanese website, we decided early on that we needed to support a wide variety of devices, and that responsive design was the right way to do that. (Who wants to support a completely separate “mobile site”?) However, we weren't sure how we would serve every visitor the appropriate version of the gorgeous images shot by our talented photographers.

Friday, August 23, 2013

SVG Fallbacks

SVG Fallbacks

There is a very clever technique by Alexey Ten on providing an image fallback for SVG going around the internet recently. It does just what you want in the classic no-SVG-support browsers IE 8- and Android 2.3. If we dig a little deeper we find a some pretty interesting stuff including a bit of unexpected behavior that is a bit of a bummer.

Friday, August 23, 2013

Responsive Content Using CSS Regions

Responsive Content Using CSS Regions

CSS Regions allow content to flow across multiple areas of the display, called regions.  The beauty of CSS Regions is that you can separate the content from the layout. And with that comes the ability to create some responsive content very easily.

Friday, August 23, 2013

The Art of Balancing User Experience and Security

The Art of Balancing User Experience and Security

How much thought do users really give when they key in their username and password while making an online transaction or accessing online banking? Not much, I'm afraid. They trust the website and believe that the application they're using is doing the right thing. But the World Wide Web is facing a growing concern of security breaches and phishing attacks, and that could put massive amount of sensitive information in the wrong hands. Internet attackers are using sophisticated tools to gain unsolicited entry into computer systems all over the globe, and security systems are finding it difficult to keep up with them.

Wednesday, August 21, 2013

Principles of Flat Design

Principles of Flat Design

Flat design – the design community just can't stop talking about it.

And feelings are strong. Most designers either can't get enough of this trend, or absolutely hate it.

I am somewhere in the middle. Good design is about creating something useful that works. If the answer is designed in the fashion of flatness, so be it. But the trend may not work for all projects, so it should not be forced.

Wednesday, August 21, 2013

MetaFizzy Effect with Sass

MetaFizzy Effect with Sass
A couple of days ago, I saw this pen by Hugo Darby-Brown which intented to reproduce the MetaFizzy effect by David DeSandro in pure CSS with the help of Sass. Hugo did a great job and probably the most important one: digging into the original JavaScript to understand how to do it in Sass.

Tuesday, August 20, 2013

Advanced SASS list functions

Advanced SASS list functions

A couple of weeks ago, I wrote a small guide to understand Sass lists. I hope you've read it and learnt things from it!

Tuesday, August 20, 2013

Using WebGL to add 3D effects to your website

Using WebGL to add 3D effects to your website

You have probably heard about the growing interest in WebGL, the technology that allows for real-time 3D graphics in the browser. For a few years, talented people around the world have been using it to create amazing experiences, music videos, games, data visualizations, and more.

Tuesday, August 20, 2013

Introduction to Animating in HTML

Animating in HTML

Over the last few years, designers have begun to use a lot of animations directly within HTML. That's kind of cool, as you don't need a plugin in order to see their work. There are several ways to make animations in HTML and in this article I will summarize a lot of examples and techniques for creating animations directly in HTML using both JavaScript and CSS.

Tuesday, August 20, 2013

The Importance of Designing for Readability

The Importance of Designing for Readability
Text is not an afterthought in the design process. It should be your first consideration.

Readability should be one of the top concerns when it comes to any design project. If text can’t be read, then why are you designing in the first place? Good design delivers content in a way that is understandable; readability is a big part of comprehension. Today we’ll be discussing how you can plan a design around the words, so that your projects are easy to read.