Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development How I Designed CodeYear.com in 1 Hour Code Year is a great initiative by the folks behind Codecademy. The concept is simple: sign up to Code Year, and each week you’ll receive a new coding exercise. By the end of the year, you’ll be well on your way to becoming a coder. Did you know Codecademy is hiring designers and developers right now? Take a look if you want to join a great startup! So far more than 75,000 people have signed up for the newsletter, making this one of the most quickly successful projects I’ve ever been involved with by far! 10:32 pm: Open email Last Friday, at 10:32 pm I received an email from Zach from Codecademy asking for some last-minute feedback and tweaking on a design they were getting ready to launch. The design Zach showed me was looking good, but we figured it could nonetheless be improved. Also, it was a little too complex, as the “subscribe” and “share” steps were both present onscreen at the same time (whereas they now happen in sequence). 10:40 pm: Launch Photoshop Click for full size
Méthodologie d’Intégration pour un site en Responsive Web Design Cette méthodologie est un addendum à ma méthodologie d’intégration axée sur l’intégration d’un design responsive. Je pars sur le principe que ce design vous est fourni par un DA : PSD, etc, et que vous suivez les étapes de la méthodologie générale. Définir un layout de base qui déterminera le site visible par les vieux navigateurs, ainsi que l’ordre de travail (En gros : Mobile first ou Desktop First)Intégrer la structure (blocks contenant header, nav, content, footer, sans leur contenu) en premier, sous tous les modes, dans l’ordre défini. Ne pas oublier la meta viewport. Media Queries Chaque feuille CSS ne devra idéalement contenir qu’une seule occurence de chaque media-query, située en bas de feuille. Tests de manipulation sur devices Xcode sur Mac contient un émulateur fidèle de périphériques sous iOS. Firefox contient un simulateur de viewport, qui ne doit servir qu’à l’étape d’Intégration. N’oubliez pas de tester le comportement du responsive à la rotation du device. Développement
LESS « The Dynamic Stylesheet language Beautiful web-based timeline software 20 Inspirational Websites Advertisement Today, you can easily find several motivating and appealing websites on the net that can be of great help to thousands of online users all over the globe. Great Websites for Inspiration can easily motivate and stimulate your senses in the most fabulous manner. These websites have the natural tendency to impart tremendous ideas and concepts that can be of massive help to users. All these great websites have the best and the most appealing design that has the control and power to influence any person immediately. If you like this article, you might be interested in some of our other articles on Portfolio Websites, Photographers Websites, Ecommerce Websites, Flash Websites. Draw a Stickman More Information on Draw a Stickman Epic Design Agency More Information on Epic Design Agency Acumen Fund More Information on Acumen Fund Imitation More Information on Imitation Solid Giant More Information on Solid Giant The Many Faces of More Information on The Many Faces of Red Tiki Go Live Button Zizzi
media queries et performances web mobile Ce billet fait suite à mes expérimentations continues concernant la performance web pour les mobiles. J’en étais arrivé à un billet nommé “comment cibler les mobiles de manière optimales (bis) ?”. Voici la suite de mes élucubrations… Un point sur l’existant Il existe grosso-modo 6 méthodes d’application des CSS3 media queries : Une méthode pour les réunir toutes ? Plus j’y réfléchis, plus je suis persuadé qu’une solution intermédiaire est de distinguer 3 parties dans le fichier CSS : les styles de base, qui doivent être affichés sur tous les supports (pas de media query)les ressources lourdes, qui doivent être chargées uniquement sur écrans larges (via media queries)les styles et adaptations spécifiques pour petits écrans (via media queries) Grâce aux classes conditionnelles, nous pourrons également en faire profiter les anciennes versions d’Internet Explorer sans douleur. Voici un exemple concret :
Matt Cutts: Gadgets, Google, and SEO Fitbit has discontinued their Fitbit One step trackers, which seems like a good opportunity to step back and reflect on wearing one for the last decade or so. I’ve enjoyed using Fitbit trackers, but the One devices seemed like they broke down too often. I’m pretty proud that I ended up earning all the activity-related Fitbit badges though: In 2013, I ran a 50 mile race and I took 110,472 steps that day. But the Rainbow badge was a little harder: 700 floors in one day. DC isn’t known for its high buildings. That’s how I found myself on a Sunday morning in July 2018. Wait a second–the badge is only for 700 floors, so why did I climb 800+ floors? Overall, Fitbit’s badges have probably pushed me to walk more, along with a goal to get 10,000 steps a day.
XHTML 1.0 Strict Cheat Sheet See also: XHTML Basic 1.1 cheat sheet — Recommended Doctype Declarations — XHTML Flavors comparisons. Getting started A minimal English XHTML 1.0 Strict document would look like the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xmlns=" lang="en" xml:lang="en"><head><title>My page title</title></head><body></body></html> Elements and Attributes reference The tables below document which elements and attributes are allowed in XHTML 1.0 Strict, and with the constraints defined in the DTD (please note that the DTD doesn't enforce all the known constraints for XHTML 1.0). Skip to attributes table. Elements Attributes table
La tête dans le Flux ! Ayant été interrogé par Clubic, je fais une brève double apparition dans un article intitulé "Post PC : est-il temps d’adopter le Responsive Web Design ?" (en page 4). Le billet couvre différents domaines du Responsive Web Design (du référencement, des usages, des performances web, etc.) et on y trouve - forcément - quelques raccourcis et trolls latents, mais il est loin d’être mauvais :) Je suis juste un peu vexé qu’il n’ait conservé qu’environ 10% de mes réponses à ses questions, je ne m’y attendais pas du tout… EDIT (12 septembre 2013). Finalement, après réflexion, je publie ici l’interview complète - la face cachée de l’iceberg - parce que je pense que je ne disais pas que des bêtises… (Clubic) 1- Observez-vous une demande croissante de clients souhaitant des sites développés de manière “responsive” au sein de votre agence ? RG : Oui, de toute évidence. Ceci pour une raison simple : les périphériques mobiles sont de plus en plus nombreux et de plus en plus employés pour surfer.