GRAPHISTE ILLUSTRATEUR FREELANCE FLASH, DIRECTEUR ARTISTIQUE, CG ARTIST, FANTASY, SF, infographiste, webdesigner, DA css Zen Garden: The Beauty in CSS Design So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. CSS allows complete and total control over the style of a hypertext document. Participation Strong visual design has always been our focus. You may modify the style sheet in any way you wish, but not the HTML. Download the sample HTML and CSS to work on a copy locally. Benefits Why participate? Requirements Where possible, we would like to see mostly CSS 1 & 2 usage. Luckily, designing this way shows how well various browsers have implemented CSS by now. We ask that you submit original artwork. This is a learning exercise as well as a demonstration. By Dave Shea.
Tools for image optimization As we saw a few weeks ago, the weight of an average web page is now almost 1.5MB (median ~1MB), with > 50% of this being images. It’s a harsh reminder that many of our pages on the web are still quite fat, a big concern for slower mobile data connections. BigQuery calculated medians for a HTTP Archive run thanks to Ilya Grigorik There have been plenty of well documented cases of page weight being heavy, with the Oakley site Brad Frost mentioned in April clocking in at ~ 25MB worth of images alone. Images are a non-trivial problem to solve because they occasionally need to be high-res, but at the same time small enough to not kill your users mobile data cap. The page cost of using images on the web is however not a new problem but we’re at least moving beyond blaming scripts as the main culprit. Tools Where possible, it’s best to try automating image optimization so that it’s a first-class citizen in your build chain. As a general rule run lossy optimizers first, then lossless. Grunt tasks
Audiotool Blog 4.0 » A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App Editor's note: This post is ≈3,000 words. It covers many different aspects of perceived performance of mobile websites as well as practical solutions to speeding up your site. TL;DR: it's not about how fast your site is; it's about how fast your users think it is. Building well-designed websites on mobile devices is slowly becoming easier and easier. Whatever the method (responsive, adaptive, etc.), if you know what you're doing, crafting a good-looking site is not a problem. But your clients, just like ours, may still be asking for that app-like experience. Most of the time, when people say something is ‘app-like’ or that it feels ‘native’, they’re not talking about the way a site looks. Native apps are fast. Getting your site to feel native means doing everything you can to get your site to perform as quickly as possible. Improving performance is a really hot topic right now, and for good reason. This was the reason Facebook said they had to move to a native app. 1. 2. You’re in luck!
Objects in Space — Objects in Space Let’s break down an Object based solution to User Needs Beer. Note — all example style codez here are in SCSS. Modules I begin by creating the modules I need in their default, basic state. Beer needs some definition: // module/_beer.scss I guess we could just have a huge lake of beer and have the user lap it up like a friggin’ dog. Regardless, we want beer to exist and be delivered in various forms — but beer’s properties should not depend on its presentation method. Let’s create a cup, and give it some general properties: // module/_cup.scss Modifications Well that’s nice, but let’s not just hand the user any cup. We want a cup which is also a glass. Note that I used the double-dash notation to modify cup, and then extended my base object. Warning: Never @extend outside of a module. Note the straightforward logic to our naming conventions here. <div class="cup--glass"> ... If you are digging through HTML templates — is it any mystery what SCSS controls this object or where you might find it?