Création de site web gratuit. 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? Beautifully Webdesign Links. 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.
Insanity. Just think of this on mobile: slower data, CPU, GPU..and it’s just ONE page. 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 As a general rule run lossy optimizers first, then lossless. Grunt tasks Individual tools PNG Quantizer. Web Designer. Bento - Learn how to code. 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! HTML: The Living Standard - Edition for Web Developers. Codrops.