Agilité, Développement Java, Nouvelles technologies et plus…
  • rss
  • Accueil
  • Management
  • Programmation agile
  • Technologie
  • Linux
  • Evénement
  • App Android
  • Contact
  • A propos de l'auteur
  • English
  • Francais

Offrez un petit coup de jeune à votre application – CSS

Fabian Piau | mercredi 15 février 2012 - 19:47
  • Imprimer
  • Twitter
  • LinkedIn
  • Facebook
  • Pocket

 English version available

Même exempte de bogue, une application dont l’ergonomie n’a pas été bien pensée sera surement un frein pour l’utilisateur. Il est donc important de prendre un peu de temps pour améliorer le design et l’ergonomie d’une application. Même si un client ne le spécifie pas directement dans le cahier des charges, il sera toujours plus plaisant pour lui d’utiliser une application « user-friendly ». L’identité visuelle n’est pas en reste et ne doit pas être négligée. Elle est même primordiale dans certains secteurs où la concurrence est forte comme la vente en ligne ou la publicité.

Cet article va vous montrer qu’il est possible d’améliorer le design général d’une application à moindre coût. En quelques minutes, vous allez voir comment apporter une petite touche en plus à vos formulaires.

Ainsi, vous passerez de ce style d’écran :

Formulaire avant

à celui-ci :

Formulaire après

Attention, seules les versions récentes des navigateurs prendront en compte efficacement ces améliorations (Firefox 4, Internet Explorer 9 par exemple). Ceci s’explique par l’utilisation de propriétés avancées CSS3 (box-shadow, border-radius, text-shadow notamment). Sur des navigateurs plus anciens, vous obtiendrez un comportement dégradé pour ces propriétés. Les bords arrondis deviennent carrés, les ombres n’apparaissent pas… Néanmoins, le rendu final sera souvent plus joli que l’original. Je vous invite à consulter ce site https://caniuse.com/ pour accéder aux tables de compatibilité CSS3/HTML5 des navigateurs.

Voici le rendu d’origine sous IE6 :

Formulaire avant sous IE6

Et le comportement dégradé obtenu :

Formulaire après sous IE6

Quelle est l’astuce pour réaliser ce « lifting » ? Il suffit de vous rendre sur ce site : https://cssbuttongenerator.com/ qui vous permettra de créer des boutons personnalisés avec vos propres paramètres : taille, couleur, ombre, texte, effet d’enfoncement, de focus, etc. et de générer le code CSS associé (aucune image n’est nécessaire). Une fois la portion de code intégré à votre feuille de style, il vous suffira d’utiliser vos nouvelles classes sur les éléments classiques d’un formulaire (input de type button, text, textarea, etc.).

Articles similaires

Responsive Web DesignFaire du Responsive Web Design: oui, mais simplement! surveyFAQ – Sondage en ligne avec Google Forms / Drive / Docs androidListe de mes applications Android favorites printerOptimiser votre site web pour l’impression en 5 minutes
Commentaires
Pas de Commentaires »
Catégories
Programmation agile
Tags
convivial, css, ergonomie
Flux rss des commentaires Flux rss des commentaires
Page 1 sur 11
Télécharger l'app CarmaBlog

Flux RSS

  • Flux RSS RSS - Articles
  • Flux RSS RSS - Commentaires

Articles les plus vus

  • Changer la langue de Firefox - 115 313 vues
  • Réaliser un sondage en ligne avec Google Forms / Drive / Docs - 62 719 vues
  • FAQ – Sondage en ligne avec Google Forms / Drive / Docs - 50 637 vues
  • Personnaliser Gnome 3 (Shell) - 29 665 vues
  • La signification d’URL, URI et URN - 16 775 vues
  • Java EE & CDI vs. Spring - 15 178 vues
  • Open Street Map, une meilleure carte que Google Maps? - 14 351 vues
  • Comparaison NoSQL: Couchbase et MongoDB - 13 870 vues
  • Firefox Nightly, Aurora, Beta, Desktop, Mobile, ESR & Co. - 12 945 vues
  • API, REST, JSON, XML, HTTP, URI… Vous parlez quelle langue en fait? - 12 336 vues

Commentaires récents

  • Fabian Piau sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsBonjour, il n'y a pas de durée limitée pour un son…
  • SUNCAM SONDAGE sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsBonjour je veux me lancer avec Google form dans un…
  • Laetitia sur FAQ – Sondage en ligne avec Google Forms / Drive / Docsabsolument... mais ça ne change rien...
  • Fabian Piau sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsAvez-vous suivi la réponse à la première FAQ de ce…
  • Laetitia sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsBonjour, J'ai créé un Google forms, mais il semble…

Articles récents

  • Attaques de robots: vous n’êtes pas seul… - Il y a 1 an et 4 semaines
  • Flagger – Monitorer vos déploiements Canary avec Grafana - Il y a 1 an et 10 mois
  • Flagger – Déploiements Canary sur Kubernetes - Il y a 2 ans et 9 heures
  • Flagger – Premiers pas avec Istio et Kubernetes - Il y a 2 ans et 2 semaines
  • CoderDojo Expedia à Londres - Il y a 2 ans et 9 mois
  • Etre bénévole à Devoxx4Kids - Il y a 3 ans et 2 semaines
  • Une migration Java 11 réussie - Il y a 3 ans et 4 mois
  • Conseils pour sécuriser votre site WordPress - Il y a 3 ans et 7 mois
  • Devoxx UK 2018 – Jour 2 - Il y a 3 ans et 11 mois
  • Devoxx UK 2018 – Jour 1 - Il y a 3 ans et 11 mois
  • Wise, Revolut et Monzo, une petite révolution dans le monde des expatriés et voyageurs - Il y a 4 ans et 3 mois
  • Autocomplétion pour Git - Il y a 4 ans et 11 mois
  • Swagger, la documentation API automatisée - Il y a 5 ans et 2 mois
  • Architecture Microservices – Les bonnes pratiques - Il y a 5 ans et 7 mois
  • FAQ – Sondage en ligne avec Google Forms / Drive / Docs - Il y a 6 ans et 3 semaines
Offre moi un café

Langue

  • Français
  • English

Suivez-moi!

Suivez-moi sur Linkedin
Suivez-moi sur Twitter
Suivez-moi sur Stackoverflow
Suivez-moi sur Github
Suivez-moi sur Rss
Link to my Contact

Abonnement email

Saisissez votre adresse email pour être informé des nouveaux articles.

Étiquettes

.net agilité android bash blog bonnes pratiques cache cloud conférence css devoxx docker docs drive développeur eclipse extreme programming firefox flagger forms google helm hibernate informatique intégration continue istio java jug kubernetes londres mobilité informatique métier outil panorama partage performance plugin programmeur script société spring sécurité ubuntu windows wordpress

Liens

  • Blog Ippon Technologies
  • Blog Publicis Sapient
  • Blog Zenika
  • Classpert
  • CommitStrip
  • Coursera
  • Le Touilleur Express
  • Les Cast Codeurs Podcast
  • OCTO talks !
  • The Twelve-Factor App

Catégories

  • Evénement (15)
  • Linux (3)
  • Management (7)
  • Programmation agile (29)
  • Technologie (45)

Archives

  • avril 2021 (1)
  • juin 2020 (1)
  • mai 2020 (2)
  • juillet 2019 (1)
  • mai 2019 (1)
  • décembre 2018 (1)
  • octobre 2018 (1)
  • juin 2018 (1)
  • mai 2018 (1)
  • janvier 2018 (1)
  • mai 2017 (1)
  • mars 2017 (1)
  • octobre 2016 (1)
  • avril 2016 (2)
  • mars 2016 (1)
  • novembre 2015 (1)
  • mai 2015 (1)
  • février 2015 (1)
  • décembre 2014 (1)
  • novembre 2014 (1)
  • septembre 2014 (2)
  • août 2014 (1)
  • juillet 2014 (2)
  • juin 2014 (1)
  • avril 2014 (1)
  • mars 2014 (1)
  • février 2014 (2)
  • janvier 2014 (1)
  • décembre 2013 (1)
  • novembre 2013 (1)
  • octobre 2013 (3)
  • septembre 2013 (5)
  • juillet 2013 (1)
  • juin 2013 (1)
  • mai 2013 (1)
  • avril 2013 (1)
  • mars 2013 (2)
  • février 2013 (1)
  • janvier 2013 (2)
  • décembre 2012 (2)
  • octobre 2012 (1)
  • septembre 2012 (1)
  • juillet 2012 (1)
  • mai 2012 (1)
  • avril 2012 (1)
  • mars 2012 (1)
  • février 2012 (1)
  • janvier 2012 (2)
  • décembre 2011 (1)
  • novembre 2011 (2)
  • octobre 2011 (2)
  • septembre 2011 (1)
  • juillet 2011 (1)
  • juin 2011 (2)
  • avril 2011 (1)
  • mars 2011 (1)
  • février 2011 (1)
  • janvier 2011 (2)
  • novembre 2010 (2)
  • septembre 2010 (1)
  • août 2010 (1)
  • juillet 2010 (1)
  • juin 2010 (1)
  • mai 2010 (1)
  • avril 2010 (1)
  • mars 2010 (1)
  • février 2010 (1)
  • décembre 2009 (1)
  • novembre 2009 (1)
  • octobre 2009 (2)
  • septembre 2009 (2)
  • août 2009 (3)
  • juillet 2009 (1)
  • juin 2009 (2)
Suivez-moi sur Twitter
Suivez-moi sur Linkedin
Suivez-moi sur Stackoverflow
Suivez-moi sur Rss
Link to my Contact
Suivez-moi sur Github
 
Fabian Piau | © 2009 - 2022
Tous droits réservés | Haut ↑