Mobitest - Test your #mobile web performance
▻http://mobitest.akamai.com/m/index.cgi
Tags : #webdesign #tool mobile #responsivewebdesign
Mobitest - Test your #mobile web performance
▻http://mobitest.akamai.com/m/index.cgi
Tags : #webdesign #tool mobile #responsivewebdesign
Home | Design in the browser with web fonts and real content — Typecast
►http://typecast.com
Design in the browser with web fonts and real content. Tags: #webdesign #tool #webfonts
Guidelines/#CSS-guidelines.md at master · dhoko/Guidelines
▻https://github.com/dhoko/Guidelines/blob/master/CSS-guidelines.md
À garder sous le coude.(Permalink)
Les préprocesseurs c’est bien très bien. Mais ceux-ci imposent certaines choses :
Connaitre les CSS pour ne pas produire une CSS en carton
Avoir un langage différent ( mais qui permet de faire des choses ultra puissantes )
Compiler sa CSS
Un debug un peu moins sympa
Pour ceux qui ne s’en servent pas, entendre dans 80% des cas des arguments de front ne sachant pas ce qu’est le CSS, donc des arguments de merde.
Je ne suis pas contre, mais ici on parle de CSS. Bilan : non.
Et pan, je n’aurais su dire mieux !
Très sympa comme document, un peu bordélique, mais très pédagogique ! Je vais l’envoyer à quelques personnes :)
J’ai bien aimé aussi (peut être plus adapté à de gros projets) :
▻https://github.com/lunaweb/style-guide-css
une revue numérique indépendante
traitant de design, de diy et de combinaisons spatiales
Strabic.fr est une revue oblique qui parle de conception et d’arts de faire.
Strabic.fr est née d’une volonté profonde : parler de design sans paillettes ni projecteurs, de forme et de fond, de ce qui se fait et ce qui peut se faire, de pourquoi et comment cela se fait, d’extravagance et d’excursions, avec exigence et exotisme.
Strabic.fr est une revue à géométrie variable mais à mémoire de forme. Elle se fabrique dans nos cuisines, à l’heure de l’apéritif ou du café, entre amis et avec ceux qui le deviennent.
via @julienb , à l’occasion d’un rafraichissement du site.
Je n’ai plus de tablette (je viens de finir le cote d’or aux noisettes).
Pour la lecture, le corps de texte est sympa je trouve (mais je n’irais pas plus gros... on se perd vite dans le texte). Par contre, les titres, intertitres, chapeaux, etc... sont assez durs avec les yeux. Sinon, j’aime assez ce que j’ai pu lire du contenu :)
@ari Les boss de la typo sont sur ce genre de tailles : ▻http://ia.net/blog (en em, mais ça revient au même avec 16px comme police de navigateur). ►http://medium.com est sur du 22px. Après, ce sont des textes en anglais, ma lecture n’est peut-être pas la même. @orientXXI y va fort aussi sur les chapô : 1.6em. Sur le texte de paragraphe c’est plus léger, et il tente de la césure.
A vrai dire, je trouve encore que c’est chez strabic que c’est le mieux réussit. Le rapport longueur de ligne / hauteur de ligne / taille de caractères. Par contre leurs citations sont pas top, je les mettrais un peu de retrait, avec un poil plus d’espace, voir dans une autre couleur.
@habbon quand t’arrives d’un Indymedia, ça fait mal aux yeux ^^ Non mais sinon c’est pas mal, même si je préfère ia.net pour le corps de texte de l’article.
Sinon quelqu’un-e aurait une idée de la technique utilisée pour faire apparaître les images au chargement, c’est un plugin spip ça ?
#beau et pis #spip_blog aussi pour les jolis sites innovants sous Spip non ? (en plus y’a plein d’articles intéressants effectivement).
Google « #lazyloading images ».
Moi j’ai tendance à trouver ça pénible.
Faudrait qu’ils chargent peut-être un peu avant qu’on arrive dessus (c’est peut-être déjà la cas ceci dit).
Je suis pas sûr qu’on gagne beaucoup l’un dans l’autre entre le côté pénible de l’image qui « flash » et le fait que la page se charge plus rapidement.
Une attitude où on charge au plus vite ce qui est visible puis ce qui n’est pas visible sans attendre qu’on l’atteigne me parait une meilleur pratique.
Si des gens ici ont des idée pour bien faire ce genre de choses...
Ça me fait penser à ce post de Cerdic ce que je dis juste au-dessus : ▻http://blog.nursit.net/slider-d-images-attention-au-temps-de-chargement.html
@ari pour les jolis sites innovants sous #spip ça serait plus ►http://herbier.spip.net ;)
@b_b, herbier.spip.net me paraît parcellaire et n’annonce pas les reliftings, non ? J’ai pas le temps de regarder tous les sites de la galaxie, si le spip_blog peut proposer un digest ou juste signaler un ou deux nouveaux sites remarquables tous les mois, ce serait vraiment bien :)
@Ari : l’Herbier propose effectivement une sélection, de sites tels qu’ils apparaissaient à un moment T sur la toile. C’est surtout un album souvenir.
Sinon, hors la lisibilité réussie des pages de texte, c’est quand même très laid, Strabic :(
Ecograder
▻http://www.mightybytes.com/ecograder
Un formulaire pour prendre conscience qu’il faut alléger le web…
How green is your website?
Enter your web address below to find out now!
Via ▻http://www.w3.org/community/sustyweb créé en Avril 2013 Sustainable Web Design Community Group
#webdesign_soutenable (rire) #plook
Mouais, ça manque de transparence, on ne sait pas d’où sorte les calculs et les couleurs.
Un de leur super cool conseil : utiliser des librairies partagés par les gros d’internet. Par exemple utiliser le jquery hébergé par Google, le bootstrap hébergé par Twitter, etc. En gros permettre à tous ces gentils gens de tracer nos utilisateurs quoi.
Et à la fin de chacun de leurs conseils : un petit lien vers leur page de contact pro ou de leur portfolio (ça alterne).
D’accord avec toi @rastapopoulos, en plus Bootstrap est loin d’être une panacée en terme de légèreté sans parler de son hégémonie.
Connais-tu un outil équivalent (il me semblait vers opquast) sans lien vers les monopolisateurs ?
Et, dans leurs listes d’hébergeurs verts, ils oublient nos champions nationaux.
Éolien : OVH investit dans l’énergie renouvelable
▻http://www.ovh.com/fr/a1100.eoliennes-ovh-energie-renouvelable
Au bout de trois années de R&D, les éoliennes développées par OVH.com et la société DDIS seront opérationnelles dès le mois de juillet 2013. L’hébergeur a en effet érigé un parc éolien en Lorraine, afin de devenir lui-même producteur d’énergie renouvelable. Récit d’un projet sans précédent pour l’entreprise avec son PDG, Henryk Klaba.
Avec, pourtant, des serveurs verts aussi de l’autre côté de l’Atlantique (article de janvier 2013)
OVH Montreal Data Center Adds Capacity for 360,000 Servers in North America
▻http://www.thewhir.com/web-hosting-news/french-dedicated-and-cloud-host-ovh-opens-massive-green-data-center-in-mont
The facility itself, known as “BHS,” is the result of a significant environmental effort by OVH. Located just outside Montreal, the facility is situated just 300 meters from a hydro-electric dam, enabling the facility to run entirely off renewable power. OVH says the data center uses proprietary cooling technologies developed in-house to run without air conditioning, at a power usage effectiveness of less than 1.1.
Less than 1.1 is a remarkable score for PUE, which measures the amount of overall power being consumed by the facility versus the amount of power being used just to power the computers inside. A PUE of 1.0 would be a “perfect,” though more or less unattainable, score. A 1.2 is considered a “very good” rating.
Oui @simplicissimus, mais justement on parlait d’éviter les mastodontes … ;)
Même si libé relate son gentil #american_dream ▻http://www.liberation.fr/economie/2012/02/14/ovh-l-internet-giga-familial_795818
Je vois pas trop en quoi la qualité du référencement et l’optimisation pour mobiles jouent sur la « durabilité écologique » d’un site...
Non Profit Websites: 10 Keys to Success
▻http://vandelaydesign.com/blog/design/non-profit-organization-websites
#Design Principles FTW
▻http://designprinciplesftw.com
The biggest collection of Design Principles on the Interweb
The Russia Left Behind
▻http://www.nytimes.com/newsgraphics/2013/10/13/russia
En fait, c’est le créateur de #d3.js (qui travail au nytimes) qui a fait la visualisation. On peut voir ce qu’il fait sur : ▻http://bost.ocks.org/mike
►http://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks pourrait intéresser @flip-zone
Foutez la paix à mon viewport !
▻http://uxui.fr/2013/09/foutez-la-paix-a-mon-viewport
"Je passe beaucoup de temps sur internet. Ces derniers temps, je tombe de plus en plus souvent sur des sites qui utilisent des menus persistants (ie qui restent affichés en permanence à l’écran.) Sur les sites en une page ils ont beaucoup de sens : remonter « manuellement » en haut de la page pour naviguer n’est pas très logique. Sur des sites plus traditionnels en revanche, ils m’ennuient particulièrement." Tags : #menu #fixe (...)
#persistant #design #webdesign #CSS #ergonomie #accessibilité
#usability & UX Articles from Nielsen Norman Group
▻http://www.nngroup.com/articles
#User Expertise Stagnates at Low Levels
▻http://www.nngroup.com/articles/stagnating-expertise
Learning is hard work, and users don’t want to do it; they don’t explore the user interface and don’t know about most features.
Line icon set for #UI & more // Infinitely scalable on Behance
▻http://www.behance.net/gallery/Line-icon-set-for-UI-more-Infinitely-scalable/10712283
▻http://www.google.com/webdesigner
Google y va de son environnement d’animation et de design HTML.
Très très orienté « bannières de pub » au premier abord. On verra les premier retours.
ça pourrait être pas mal si cette solution est scriptable et intégrable à des outils ou workflows sur mesure (logiciels 3D, écosystème #node.js / #Grunt)
BackgroundCheck
▻http://www.kennethcachia.com/background-check
Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
vex
▻http://github.hubspot.com/vex/docs/welcome
With Vex, you can customize everything:
Styling of all UI elements
Themes
Behaviors and timing
Animations and effects
All options can be configured for all dialogs
or on a per-dialog basis.
7 Habits of Highly Effective #Media_Queries | Brad Frost Web
▻http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries
Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!
Un autre article du même sur le même thème, un #workflow #responsive, des habitudes de travail :
▻http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow
An Insider’s View of #Mobile-First #Design: Don’t Make These Mistakes | Wired Opinion | Wired.com
▻http://www.wired.com/opinion/2013/09/designing-for-mobile-means-ditching-deeply-ingrained-pc-instincts
Contrast this standard approach to the one employed by Instagram’s mobile app: When people like or comment on a photo on Instagram, the results of their actions show up right away. In reality, their request is still getting processed in the background — but Instagram assumes it was successful rather than waiting to find out if it actually is.
Tomato Can Blues
▻http://www.nytimes.com/projects/2013/tomato-can-blues
DiPonio was a local promoter who organized amateur #cage_fights that looked more like barroom brawls than glitzy Las Vegas bouts. With a mix of grit, sweat and blood, the fights had caught on in rural Michigan, and DiPonio’s Feb. 2 event, called Caged Aggression, drew hundreds of fans, even with cage-side seats going for $35.
Charlie Rowan, an undistinguished heavyweight, was scheduled to fight that night at Streeters, a dank nightclub that hosted cage fights in Traverse City.
GoodUI
▻http://goodui.org
▻http://seenthis.net/messages/153865
@seenthis Seenthis ne le reconnaît pas à cause du www. Seenthis_todo ?
#Responsive Elements - Helps you build better responsive websites
▻http://kumailht.com/responsive-elements
Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It’s a tiny javascript library that you can drop into your projects today.
L’utilisation est très simple effectivement, mais mis à part gagner quelques caractères dans la feuille CSS, je ne saisi pas trop l’intérêt : si je fais un @media c’est pareil non ? Et sans JS.
.quote.gt300 {background: red}
==
@media (min-width:300px){ .quote{background : red}}
Ah oui ok haha, suis-je bête...
CSS Length Explained
▻https://hacks.mozilla.org/2013/09/css-length-explained
When styling a web site with CSS you might have realised that an inch on a screen is not an actual inch, and a pixel is not necessarily an actual pixel. Have you ever figured out how to represent the speed of light in CSS pixels? In this post, we will explore the definition of CSS length units starting by understanding some of the physical units with the same name, in the style of C.G.P. Grey[1].
Be nicer
▻http://pixxel.co/feed/be-nicer
The #designers of Facebook, Yahoo, iOS etc. live amongst us. They are on Twitter and they see what we write. When something significant is launched I guarantee they will be scanning though hundreds, if not thousands of tweets to gauge the general consensus from their peers. I can also guarantee that sometimes those same designers will go home crushed. And I mean fucking crushed.
CSS Front-end Frameworks with comparison - By usabli.ca
▻http://usablica.github.io/front-end-frameworks/compare.html?v=2.0
A Collection of best front End frameworks for
Faster&Easier
Web Development
via AngeZanetti ▻https://twitter.com/AngeZanetti/status/375628206402846720
Les « fiches » sont-elles l’avenir du web ? - Inside Intercom
▻http://insideintercom.io/why-cards-are-the-future-of-the-web
L’affichage sous forme de « fiches » est en train de coloniser les services web, notamment du fait de leur adaptation pour le mobile et parce qu’il permet d’agréger des contenus sous une forme simple et claire. Twitter : ▻https://dev.twitter.com/docs/cards Google : ▻https://support.google.com/websearch/topic/2839478?hl=en&ref_topic=2847903 et tant d’autres. Les « fiches » permettent d’accéder à des petits morceaux d’information pareilles à des cartes de jeu ou à des cartes postales. Un support (...)