6 Keys to Understanding Modern CSS-based Layouts Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There's font styles, margin, padding, color and what not. But there's a wall that people will run into... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser. These are the six things that will help people get over the hump. Box Model At the very core of it, is an understanding of the box model within CSS. Floated Columns While absolute positioning was one of the first approaches that people took when attempting to replace table-based layouts, it was floating content that opened the doors of possibility. Sizing Using Ems There are two different issues at play here when it comes to sizing with ems: fonts and layouts. With fonts, Internet Explorer 6 and lower don't allow you to resize the text when specified using pixels (px). Sizing layouts with ems can also offer up a whole other avenue of flexibility. Image Replacement
HTTP Archive Viewer 2.0.15 Paste HAR log into the text box below and press the Preview button.Or drop *.har file(s) anywhere on the page (if your browser supports that). HAR Log Examples Inline scripts block - Inline scripts block the page load. Blocking time - Impact of a limit of max number of parallel connections. Browser cache - Impact of the browser cache on page load (the same page loaded three times). Single page - Single page load (empty cache). HAR Logs Online You can also preview any HAR file (in JSONP format) that is available online by using inputUrl parameter (see more in the About tab): This viewer supports HAR 1.2 (see the About tab).
The Mysterious “Save For Web” Color Shift Warning, the following information is hotly contested. Read the comments for more info. Or, read my new, updated post, Save For Web, Simply. Fig. 1 : Dastardly! The usual suspects get knocked out pretty quickly in this issue: It isn't a Mac/PC thing, it isn't a monitor thing, it isn't because the color profile is somehow set "wrong". There's a lot of confusion on the web over why this is, and a lot of solutions being offered. Testing for Perfect Color Translation If I "Save For Web" an image from Photoshop, open that image up in a browser side-by-side with the original, I should see identical colors. Fig. 2 : Checking for color shifts. I've attached a JPG with some more indepth instructions at the end of the post. The ability to see, perfectly, how the colors in Photoshop are going to appear in your browser. A Warning What we're doing here won't make your colors look the same on all monitors or machines. Okay, here we go: Three Steps to Color Perfection. Step 1: Color Profiles Step 3: Update!
YUI Compressor According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage). This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy. With the right design in place, there are many secondary strategies for improving performance such as minification of the code, HTTP compression, using CSS sprites, etc. In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojo compressor and Dean Edwards' Packer. Documentation: Detailed description of the YUI Compressor and how to use it. How does the YUI Compressor work? Using the YUI Compressor from the command line Additional notes
10 Styles Guides qui donnent des idées pour présenter votre identité visuelle L'identité visuelle est quelque chose de très important dès que l'on essaye d'imposer une marque. Graces à quelques couleurs et picots, il sera possible d'évoquer la marque de manière très subtile. Néanmoins, imposer sa marque de cette manière est long et demande de se tenir de manière sans failles au style choisi, ce qui peut être dure, surtout sur un medium evoluant aussi vite que le Web. Dans ces conditions, comment faire en sorte que le style de la marque reste cohérent entre les réalisations des différents acteurs et prestataires ? Grâce à une style Guide très complète ! Le Blog du Webdesign vous propose donc de découvrir 10 Style Guide appartenant à de grands sites web, et en bonus une ressource permettant de générer un Styles guides à partir d'un CSS ! Dropbox SurveyMonkey Disqus Salesforce Yelp Pinterest Mojotech Mailchimp Kickstarter Codepen En bonus, voila une petite ressource en ruby qui vous permettra de generer simplement des Styles guides a partir de vos feuilles de styles ! Hologram