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.

Tuesday, August 20, 2013

Using GitHub Pages To Host Your Website

GitHub Pages

So you want to launch a simple website but don't want to have to go through the dull process of setting up yet another hosting package. There is an easier solution. If you just want to launch a simple static website you can use GitHub Pages to host your site for free.

Tuesday, August 13, 2013

CSS Sprites with Background Positioning

CSS Sprites with Background Positioning

There's nothing more common than hover states to give your website some life. The user comes to your site, scrolls over an image with their mouse cursor and the image changes. That's it. While I spent most of 2012 learning backend programming with Ruby on Rails, I'm only recently spending more time improving my frontend development skills. Earlier this week, I needed to implement the hover state effect so I researched what the best practice was. All of the tutorials and tips I could find were unclear, outdated, or plain confusing so I decided I'd write my own.

Friday, August 09, 2013

Create an Awesome Single-Page Website

Create an Awesome Single-Page Website

Not every website needs to be complex or include multiple pages of content and information.

Sometimes one page is enough.

But just because you are creating a website with only one page, does not mean that it will be easy.

Developing a single-page layout can require just as much thought and planning as some more complex sites. It needs to have all the same basic parts as a bigger site and should look visually stunning, work as expected and have a clear purpose.

Saturday, August 03, 2013

Useful .htaccess Snippets and Hacks

Useful .htaccess Snippets and Hacks
.htaccess is one file that every web admin should know and understand. At its basic level it controls access to your sites directories. But there is much more that you can do, as the snippets in this post will show you.

If you you would like to learn the basics of .htaccess, you should check our our Introduction to .htaccess article, which explains pretty well everything you will need to get you up and running.

Friday, August 02, 2013

Setting subheads with CSS

Setting subheads with CSS

Subheads are typographic devices that establish content structure for the reader, providing a short overview of the content that follows. We can use them as points of visual interest or as simple navigational aids that gradually disclose the content. However, default subhead styles rendered by the browser can be too generic. If you're looking for some variety, you can achieve some interesting effects with a pinch of CSS.

Friday, August 02, 2013

50 Time Saving Photoshop Actions to Boost Your Images

Photoshop Actions

You're a creative talent. The last thing you probably want is to be stuck performing the same task a hundred times on different images. Adobe programmers understand this. It's why they created Photoshop Actions.

With Photoshop Actions, a set of otherwise repetitive tasks can be applied automatically, freeing you up for the real work: being creative. In this article, Jameel Khan shares 50 time saving actions you can use to give your photos the boost they need without taking all day.

Friday, August 02, 2013

Sketchsheets for Responsive Web Design

Sketchsheets for Responsive Web Design

With the constant evolution and popularity of mobile devices, designing web sites responsively is essential. Unlike designing for a static or fixed web site, the fluidity and flexibility of a responsive site can make the design process tricky and at times almost impossible to successfully convey visually your design ideas.