Customize Twitter Bootstrap To Not Look Bootstrap-y. NOTICE: This article is outdated. Please read my article on how to build Bootstrap 3.0 themes the proper way. Thank you! PLEASE, if you do use Bootstrap for just about everything be courteous to your audience and change up some of the basic variables so it doesn’t look all the same! I just tested a really cool app and was SO disappointed that it used bootstrap. I used BootTheme. Have trouble coming up with a damn color scheme? Take an extra five minutes and figure out a good color combo.
They have a “customize” page! Font Awesome because holy crap new icons with minimal 5 minute setup. Subtle Patterns is THE PLACE to go to for quick, beautiful patterns. Extras (updated) After writing this article and having it take off with tens of thousands of readers, I found a few NEW things you can do and that will help out: adjust shadow settings. Truth Be Told Update: I coded up a free bootstrap theme for everyone to see. I’m not asking for that much. A little bit of self promotion Other Resources. Cartograms with d3 & TopoJSON. d3 tutorial at visWeek 2012.
Designing for touch. Mobile Site vs. Full Site. Based on usability testing of hundreds of sites, the main guidelines for mobile-optimized websites are clear: Build a separate mobile-optimized design (or mobile site) if you can afford it. When people access sites using mobile devices, their measured usability is much higher for mobile sites than for full sites. A mobile app might be even better— at least for now.If mobile users arrive at your full site, automatically show them the mobile version. Sadly, many search engines still don't rank mobile sites high enough for mobile users, so people are often (mis)guided to full sites instead of the mobile ones, which offer a vastly superior user experience.Offer a clear link from your full site to your mobile site for users who end up at the full site despite the redirect.Offer a clear link from your mobile site to your full site for those (few) users who need special features that are found only on the full site.
Mobile-Optimized Sites Why Full Sites Don't Work for Mobile Use. 10 points à retenir pour concevoir un site efficacement. Petit récapitulatif général des choses que j’ai bien du répéter une centaine de fois chacune lors d’échanges avec mes clients. Organisation, logique de conception, ergonomie, référencement, voici 10 points à ne pas oublier lorsque l’on veut réaliser un site. La plupart de ces petites choses semblent évidentes, pourtant pour aller vite, parce que cela met en évidences certaines lacunes qu’il veut se cacher, le porteur de projet est souvent tenté de les oublier.
#ilnyaqueduvecu Définir des objectifs … et s’y tenir Quels que soient ces objectifs, ils permettent de se fixer une ligne directrice, d’éviter de se reposer 50 fois les mêmes questions lors de la rédaction, de la conception graphique, du développement. Exemples : définition des cibles prioritaires, des 3 couleurs de base de la charte graphique, de l’emplacement et textes des menus, des expressions-clés principales visées, etc. Mettre à plat l’arborescence du site Pas besoin d’outils compliqués, un tableur Excel peut suffire.
Pourquoi ?
Un super kit de vectors pour vos infographies ! Circulaire.legifrance.gouv.fr/pdf/2012/02/cir_34663. iPhone CSS—tips for building iPhone websites. 31 January, 2010 With the rapid rise in mobile browsers, it has probably never been more important to ensure your sites can be handled on these platforms. By far one of the most popular such browsers is Mobile Safari on the iPhone – this is one of the easiest browsers to develop for: it runs on Webkit (meaning a lot of rich CSS3 support) and it's only ever on one resolution and on one OS.
N.B. This article addresses iPhone development and iPhone development only. There is no reason why you cannot or should not develop for other mobile devices and platforms, Apple or otherwise. The practical upshot of this is that you need to do no cross-browser testing, and can use all the CSS3 you like. To start The first thing to remember when developing a site to be displayed on an iPhone is that it is very similar to designing a print stylesheet. Some people don't agree with browser sniffing, but you need to detect the iPhone somehow. <? We want people to save your site to their home screen... <? Images.
Tutoriel balises meta : guide complet en français. Est-ce que Google tient compte de toutes les balises meta ? C'est sans doute un classique mais cette fois la réponse vient de Google directement... L'occasion de revenir sur chaque balise pour préciser son intérêt pour le référencement. Voici donc un tuto balises meta sous forme de liste complète de ces "meta tags" et de leur impact sur le référencement.
Article mis à jour le 27/10/2014, publié initialement le 28/01/2009 Sommaire : Les explications ci-après proviennent initialement de l'article de Google (rédigé par John Mueller, ingénieur Google à Zurich). Les balises meta et leur utilité pour le référencement naturel (SEO) Balise title Même si ce n'est pas une balise meta, Google confirme que la balise <title> est utilisée par Google dans son algorithme de classement.
A ma connaissance, la balise meta title n'existe pas et n'est donc pas prise en compte par les moteurs : Ordre des balises meta Balise meta description Balise meta keywords Balise meta news_keywords Balise meta robots. Les bonnes pratiques ergonomiques pour creer vos liens. Après un petit moment d’absence, nous allons essayer de reprendre les rênes de ce blog et pour ce faire voici quelques bonnes pratiques à mettre en place pour rendre vos liens plus « utilisables », plus ergonomiques. Une fois de plus, chaque site internet a ses contraintes et tous ces conseils ne sont pas forcement applicables à chaque site. Ce sont uniquement de bons conseils pour des sites à caractères « populaires » Les liens sont un moyen pour l’utilisateur de naviguer vers d’autres pages du même site Web, consulter des documents connexes et/ou visiter des sites externes.
Les utilisateurs ne devraient pas avoir à deviner ou à frotter la page pour découvrir où ils peuvent cliquer. Afin de maximiser l’affordance perçue de la cliquabilité, il faut prendre soin de souligner le texte du lien mais pas que… Être soulignés: les liens soulignés sont un standard qui agit comme un repère visuel fort pour connoter la cliquabilité.Mixer les cases. Photo via flickr.