background preloader

CSS3 + Progressive Enhancement = Smart Design

CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects. Among these generalized strategies, the second approach comes closest to the concept of progressive enhancement. A Quick Example Consider a basic layout done with good ‘ol CSS 2.1 and HTML 4.01. basic layout and compositionbackground, border, and font colorsfont families, styles, and transformationsbasic styles for HTML elementsdecorative graphics, link styles and so on The idea here is to begin with a nice, well-styled presentation that looks good in even archaic browsers like IE6. CSS 3 and Progressive Enhancement Do More with Less Code Sound good? Box Sizing ↑ Related:  VEILLE TECHNO*

Bourbon - A Sass Mixin Library An inline-block intervention Tell me the last time you used a <b> element in your markup. How about a <blink> tag? If you answered ‘today’, then this post will hopefully be eye opening for you. However, if you answered, “pffft, I don’t. So, the reason why we don’t use the <b> tag for bolded text is because we’re interested in the separation of content and style. Cool? So let’s talk about inline-block inline-block entered the web dev scene around 2008 as part of CSS2.1 and everyone loved it. What inline-block does is provide inline positioning of an element, much like a span, em, strong or a element, but also allows widths and dimensions to be applied to it. So somewhere along the way, someone decided, “hey, I don’t need floats, I can just set my elements to display:inline-block”, and the web-dev community shouted, “Yes”. Except one little problem exists. What that means is that it acts just like a span, em, strong or a element would and reacts to whitespace next to it. So here’s where inline-block bothers me. Ugh.

An Analysis of Typography on the Web Typography is one of the most—if not the most—important aspects of web design. Some would argue that it takes up to 95% of web design, so why do we often neglect its importance? The readers who come to your site will often decide whether or not to stay according to your typographic choices. After all, they came here to read in the first place. In fact, even some font names suggest that classification; Futura, Optima, Times New Roman (OK, that's probably a dude), Verdana, Lucida, Georgia, Helvetica… There's no question about it, Typography is the queen. Not sure what I'm talking about? Knowing Your (sans) Serifs Before proceeding with this article, and especially if you don't have much contact with typography, I suggest you fill the gaps of your Typographic knowledge from Typedia, taking special note of Typeface classifications and the anatomy of a typeface, which will serve you well when making your own font-stacks and pairing fonts. Tightening Wisdom #1: Typefaces Relate (P.S.

40+ Useful HTML5 Examples and Tutorials HTML5 examples can be really good inspiration for anyone starting a new web project, after all it is the future of web page markup and we all need to prepare for it. HTML5 is being developed as the next major revision of HTML (HyperText Markup Language). The major market and Internet leaders are already switching to the HTML 5 platform. With Apple and Google both pushing the standards in order to facilitate more advanced web development, we now see HTML 5 implementations popping up all over the place as more companies get on board with the advanced features. With the constant drop of Flash usage in web and Internet applications, HTML5 is opening new doors to web designers and developers. Keep in mind that besides coding your own web site from ground up you can also kick start your project using a WordPress theme. Advertisement Let check out some HTML5 Examples HTML 5 Demos and Examples This site have HTML5 examples all over the place and good ones too. HTML5 Web Applications

Front End Developer, Melbourne - Petr Tichy 4design | Création & partage de ressources sur les langages du web, WordPress, le graphisme et le montage vidéo. | Page 2 Photoshop Etiquette est un site qui rassemble les bonnes pratiques à mettre en oeuvre pour produire des fichiers .psd conformes à la logique et au bon goût. Pour travailler efficacement, il est important de bien organiser ses fichiers et de les nommer correctement. Mais ce n’est pas tout : au total, Photoshop étiquette recense plus d’une centaines de points de vigilance illustrés avec des captures d’écran. Continuer la lecture de Les bonnes pratiques Photoshop pour le web design Depuis que j’ai installé Instagram sur mon téléphone mobile Android, je retarde le moment de lancer la palette des scripts de Photoshop pour récréer les filtres proposés par l’application qui s’appliquent en un clic une fois que vous avez sélectionné votre photo. Le pack de script proposé par Casey McCallister imite les 17 effets suivants : Brannan, Early Bird, Toaster, Sutro, Nashville, Kelvin, Inkwell, X-pro II, Amaro, Rise, Hudson, Sierra, Lo-fi, Walden, Hefe, Valencia et 1977.

20 HTML Best Practices You Should Follow Most of the web pages you encounter is presented to you via HTML, the world wide web’s markup language. In this article, I will share with you 20 best practices that will lead to clean and correct markup. 1. Always Declare a Doctype The doctype declaration should be the first thing in your HTML documents. I would recommend using the XHTML 1.0 strict doctype. 2. The <title> tag helps make a web page more meaningful and search-engine friendly. Take for instance, the following example: <title>Six Revisions - Web Development and Design Information</title> The example above appears like the following image in Google’s search engine results page: 3. Meta tags make your web page more meaningful for user agents like search engine spiders. Description Meta Attribute The description meta attribute describes the basic purpose of your web page (a summary of what the web page contains). For example, this description: Shows up in Google’s search engine results page as follows: Keywords Meta Attribute 4. 5. <!

20 Things I Learned About Browsers and the Web Tutoriels pour apprendre HTML & CSS | 4design Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux. Learn HTML & CSS présente 10 leçons proposées par @shayhowe pour débuter avec HTML & CSS et développer votre premier site web : Un bien joli site très didactique qui donne, pour chaque rubrique, l’ensemble des éléments et des attributs à prendre en compte avec de nombreux exemples pratiques. CSS Débutant — Si vous êtes plus à l’aise avec le français, je vous invite à consulter le site de @PascaleLC où vous pourrez cultiver les standards du web : Plan de cours : Sur le même thème Check your avec le W3C 11 avril 2012 Dans "Ergonomie & Accessibilité" Le petit journal permanent de HTML5 10 août 2010

After Effects to CSS Making the transition from animating in After Effects to CSS. I started my dive into software design a couple years ago by creating demo videos and animating user interfaces. Coming from a Motion Design background, After Effects was my baby, and I had spent many years perfecting that craft. I have worked side by side with developers re-creating the animations that I had created in After Effects. This process was slow and tedious — there was a need for the designer and developer to sit next to each other and hash out the details. I wanted to improve this workflow, so I dove into the research to understand how animations work within development and what the mental model was in which I needed to adapt to. 1. The world of development is constantly changing. Understand the Properties at your disposal. Basic List of Animatable Properties: Examples of Each Property Animated Consider Performance. In After Effects you have to consider the render time of your animations. Properties that are performat:

Let’s Call It a Draw(ing Surface) You are here: Home Dive Into HTML5 Diving In HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. So what does a canvas look like? Invisible canvas The markup looks like this: Let’s add a dotted border so we can see what we’re dealing with. Canvas with border You can have more than one <canvas> element on the same page. Let’s expand that markup to include an id attribute: Now you can easily find that <canvas> element in the DOM. var a_canvas = document.getElementById("a"); Simple Shapes Every canvas starts out blank. Click to draw on this canvas The onclick handler called this function: function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } And then there’s this Every canvas has a drawing context Paths path .

Announcement - 2014 Design Studies Best Paper Award - Design Studies 2014 Design Studies Award >> View previous winners We are pleased to announce the winner of the 2014 Design Studies Award, for the best paper published in the journal. The prize is awarded to Janet Kelly (University of Southern Denmark) and Ben Matthews (University of Queensland) for their paper ‘Displacing use: Exploring alternative relationships in a human-centred design process’, published in Vol. 35, Issue 4 (July 2014). The Design Studies Award is made annually, jointly by the Design Research Society and the journal publishers, Elsevier. Abstract of the winning article: This paper critically discusses the concept of use in design, suggesting that relevant relationships other than use are sometimes obscured by the user-centeredness of design processes. Continue reading....

WAI-ARIA 1.0 Authoring Practices [contents] An author's guide to understanding and implementing Accessible Rich Internet Applications W3C Working Draft 7 March 2013 This version: Latest version: Previous version: Editors: Joseph Scheuhammer, Invited Expert Michael Cooper, W3C Previous Editors: Lisa Pappas, Society for Technical Communication Richard Schwerdtfeger, IBM Copyright © 2007 - 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. Abstract This document provides readers with an understanding of how to use WAI-ARIA [ARIA] to create accessible rich internet applications. Status of This Document This section describes the status of this document at the time of its publication. This is a Public Working Draft by the Protocols & Formats Working Group of the Web Accessibility Initiative. Is it clear how to create accessible Rich Internet Applications? 1. 3. 3.2. 3.2.1.