Wednesday, July 31, 2013

General CSS notes, advice and guidelines

General CSS notes, advice and guidelines

CSS Document Anatomy

No matter the document, we must always try and keep a common formatting. This means consistent commenting, consistent syntax and consistent naming.

General

Limit your stylesheets to a maximum 80 character width where possible. Exceptions may be gradient syntax and URLs in comments. That's fine, there's nothing we can do about that.

I prefer four (4) space indents over tabs and write multi-line CSS.

Sunday, July 28, 2013

Pure: What, Why, & How?

Pure: What, Why, & How?
This tutorial will introduce you to Pure, a CSS library made of small modules, that can help you in writing completely responsive layouts, in a very fast and easy way. Along the way, I'll guide you through the creation of a simple page in order to highlight how you can use some of the library’s components.

Why Create Responsive Layouts?

Over the past few years in web development, three words that are bouncing around, over and over again are: Responsive Web Design (RWD).

Wednesday, July 24, 2013

Simple Responsive Images With CSS Background Images

Simple Responsive Images With CSS Background Images
On an iPhone, a 290 × 183 pixel image that is 18 KB in size looks identical to the 452 KB, 1940 × 1229 pixel image on the MacBook Pro.

With all the talk of new HTML5 standards such as the srcset attribute and <picture> element, as well as server-side techniques such as Responsive Web Design + Server Side Components (RESS), you'd be forgiven for concluding that simple, static websites can’t support responsive images today. That conclusion might be premature, however. In fact, there's an easy, straightforward way to deliver responsive images that's supported by all of today's Web browsers: CSS background images.

Tuesday, July 16, 2013

Coding A Responsive Resume In HTML5/CSS3

Coding A Responsive Resume In HTML5/CSS3

Almost everybody in the business section has created a resume at some point. When working as a freelancer you are always vying to land new projects. Because of this transitory work cycle it helps to offer potential clients a brief peek into your past experience. And what a better opportunity than offering your professional resume online?

Tuesday, July 16, 2013

Photoshop’s Role in a Web Design Workflow

Photoshop’s Role in a Web Design Workflow
kuhboom.com: Densely textured web designs will have you reaching for the slice tool.

The web has undergone some serious changes in recent years and the way in which the web is designed is changing along with it. Photoshop may still be the "go-to" tool for many web designers, but for some, Photoshop is no longer king. In this article, Ian Yates, Editor of Webdesigntuts+ will explain how Photoshop was used in the past, how it can be used in the future, and why.

Sunday, July 14, 2013

Getting started with CSS sourcemaps and in-browser Sass editing

CSS sourcemaps and in-browser Sass editing

CSS sourcemaps allow the browser to map CSS generated by a pre-processor, such as Sass, back to the original source file, including exactly which Sass mixin, placeholder or variable is responsible for a given line of CSS. And when you combine sourcemaps with Chrome's new in-browser local file editing (workspaces) and automatic stylesheet reloading, you end up with a very fast in-browser editing workflow.

Saturday, July 13, 2013

30 Useful Responsive Web Design Tutorials

30 Useful Responsive Web Design Tutorials

This list is not meant to be an exhaustive one but it will get you started on understanding the basics of designing an adaptive website that will cater to all sorts of screen sizes.

We'll start off with introductory tutorials in "Breaking the Ice", something like an RWD: 101 class you should attend to get the hang of the concept before we move on to "Start Building" exercises.

Friday, July 12, 2013

Web Design: 20 Hottest Trends To Watch Out For In 2013

Web Design: 20 Hottest Trends

The design influence is merely a reflection of our culture and expectations for user interfaces. Ideally these trends represent favorable ideas in the web design community. However designers will always have their own opinions when it comes to design terms, so take these ideas with a grain of salt.

If you are interested, keep your eyes peeled for examples of these trends and techniques.

Friday, July 12, 2013

Life Beyond 960px: Designing for Large Screens

Life Beyond 960px

The premise behind a responsive web isn't purely that websites be built in a mobile-friendly way. It's about setting our content free so that it can be experienced by whatever means necessary – and that includes at large scale. Let's take a look at the design considerations behind the often neglected huge desktop screen.

Thursday, July 11, 2013

CSS3 Multiple Column Layout Module

CSS3 Multiple Column Layout Module

The Multi Column Layout Module has been introduced to help us create columns quickly and easily using CSS3 only. In this tut I'm going to be taking a look at some of its properties and demonstrate them through a series of examples.