Skip to content

5 outils indispensables du développeur HTML/CSS

Soyez sociable ! Partagez :
  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

L’environnement de travail est primordial dans le métier de développeur / Intégrateur HTML/CSS. Il est impératif de s’équiper des bons outils.

Voici une liste non-exhaustif des outils indispensables du développeur HTML/CSS.

#1 – Un bon navigateur

icones-navigateurs

Il est important de visualiser son code. C’est pourquoi, il faut un bon navigateur qui interprète proprement son code.
Pour ma part, j’utilise essentiellement Google Chrome, qui permet de visualiser le code HTML ainsi que les propriétés CSS attachées à la balise.

Google Chrome permet également d’ajouter à la volée du CSS pour tester une ou plusieurs propriétés vous évitant ainsi de devoir retourner dans votre IDE pour modifier votre code.

Récemment, firefox a mis en place un outil dédié aux développeurs. Il est assez intéressant et vaut la peine d’être testé.
La suite ici.

#2 – Un mauvais navigateur

Et oui, tous les utilisateurs n’utilisent pas les derniers navigateurs. En 2013, près de 60% d’utilisateurs naviguaient sur Internet Explorer et 20% d’entre eux sur le terrible Internet Explorer 8 (12 utilisateurs sur 100 tout de même).

C’est pourquoi il est important de tester son site web sur tous les navigateurs !

Pour ma part, j’ai une machine virtuelle sous Windows où je teste mes sites sous Internet Explorer, IE11 livre un très bon outil pour visualiser les sites web dans tous les moteurs de Microsoft !

Les bons sites actuels maintiennent tous les navigateurs jusqu’à IE8.

D’ici la fin de l’année 2015, le maintien des sites sur IE8 devrait petit à petit être abandonné (J’en veux pour preuve que Bootstrap va arrêter de maintenir IE8…)

#3 – Un bon IDE

sublime_text_icon_2181Un IDE (Integrated Development Environment pour Environnement de développement intégré) est le logiciel que le développeur utilisera pour faire des sites Web.

La première erreur à ne pas commettre est d’utiliser un éditeur WYSIWYG (What you see is what you get pour Ce que tu vois c’est ce que tu as) parce que le code généré par ces éditeurs (Nview, Dreamweaver, Muse…) est très moche (mauvaise indentation, utilisation de tableaux…).

Quand j’ai commencé mes tous premiers sites Web, j’utilisais NotePad++, qui intègre la coloration syntaxique (couleur du code) et un peu d’auto-complétion si on bidouillait avec les plugins (quand on commence à taper quelque chose, l’IDE nous propose des mots clef)

Aujourd’hui, j’utilise Sublim Tex qui est selon moi un très bon IDE, car il regroupe tous les outils utiles pour un bon développement.

#4 – Un bon framework HTML/CSS de base

J’en parle plus haut, Bootstrap est un, parmi d’autres, framework HTML/CSS/JS.

Il en existe d’autres (Foundation…), je vous laisse le soin de trouver le vôtre : http://codecall.net/2014/01/13/best-html-css-frameworks-2014-for-web-designers/

Il est important d’utiliser ce type de Framework car ils embarquent tout un tas de “class” et de style par défaut qui évite de devoir tout re-coder… (Boutons, bars de navigation….)

D’ailleurs, je remarque avec l’expérience que de plus en plus de “gros” site on recourt à ces Frameworks.

#5 – Plusieurs terminaux

Réussir son responsive design !

Que le développeur qui n’a jamais eu à faire un site responsive me jette la première pierre !

Quésaco le Responsive ? Lire mon article sur le sujet!

Lors de mes nombreuses lectures sur le Web, une tendance naît dans le milieu du Webdesign : “Mobile First” ! C’est à dire, “Pense ton site d’abord pour les téléphones”.
Les utilisateurs ont tendances aujourd’hui à consulter tous leurs sites favoris sur leur tablette ou smartphone. Donc il faut du responsive !

Qui dit Responsive, dit plusieurs tailles d’écran et donc dit contraintes d’affichage (Pub, Images, taille de texte…).
Il vous faudra donc plusieurs tailles d’écran pour tester vos sites.
Pour ma part j’ai :

  • Un écran 21 pouces 16/9 (1920×1080)
  • Un écran 17 pouces 4/3  (1280×1024)
  • Un téléphone (iphone 5c)
  • Une tablette (parfois…) (1280×800)

Tous ces appareils me permettent de voir mon site sous différentes résolutions, différentes interfaces utilisateurs (Le doigt n’est pas une souris…)

Voilà, la liste de mon “must have” en tant qu’intégrateur web ! Bien sûr, vous devez en avoir d’autres ! Des idées ?

N’hésitez pas à me donner vos outils !

Soyez Sociable ! Partagez !
Published inAstuce du jourCSSDiversSite WebTutoriel
  • Yohann

    Hmm tous les navigateurs permettent de changer le html css et javascript à la volée :p

    Pour sublimetext je suis bien d’accord, j’ai montré ça à un développeur front récemment (qui utilisait lui aussi notepad++), et je crois que maintenant il ne pourra jamais plus revenir sur notepad++ x)
    Je conseille également le plugin “emmet” pour sublime text, pour coder à une vitesse surprenante (dès que l’on s’est bien habitué), ainsi qu’un plugin live reload (il en existe plusieurs), qui permet de “lier” l’éditeur avec le navigateur de son choix. Grâce à cela, la page du navigateur s’éditera en live dès que l’on sauvegardera 🙂

    Bonne journée 😉

    Ps : tu as abordé le sujet, donc je te propose une idée pour un futur article : sur pc, le hover sur un menu est simple. Comment adapter ça en responsive ? Peut-on changer le hover en “click” lorsque l’on est sur mobile ?
    Car beaucoup de sites ont ce défaut. Avec le mobile, on veut cliquer sur un sous-menu, mais lorsque l’on clique sur le menu, il charge la page avant d’afficher les sous-menus, qui donc disparaissent ! C’est une juste une idée 🙂

    • Je vais réflechir à ça !

      Pour ma part, mes sous-menus sont souvent gérer via le plugin dropdown de Bootstrap. Je surclass juste la fonctionnalité pour les écrans (avec les media queries).

      Du coup, j’ai une option de survol quand j’utilise un PC et un clic quand je suis sur tablette ou smartphone !

      • Yohann

        Ah c’est super ça ! Ah l’occasion je me pencherai sur ce sujet !
        Merci pour la réponse 🙂

        Quelles sont tes normes pour les media-queries ? Je ne sais jamais quelles tailles définir… Et tu utilises une page css pour chaque type ?

  • madvic

    Les chiffres sont du00e9ju00e0 obsolu00e8te (et tant mieux). Voici des chiffres qui sont tout de mu00eame u00e9tonnant mais correspondent aux chiffres d’un de nos sites : nhttp://www.w3schools.com/browsers/browsers_explorer.aspnIE repru00e9sente plus que 8% grace au mobile et donc les anciens navigateurs que 2%. Je pense qu’on peut du00e9ju00e0 les rayer de la liste ! (Yeahhhh)

    • yohann

      C’est vrai que u00e7a fait plaisir !nEn fait si u00e7a se trouve, les 2% en question correspondent aux testeurs qui essaient leur site avec des vieux navigateurs ! 😉

      • p0k3

        Le problu00e8me des statistiques c’est qu’elles ne remplaceront JAMAIS les statistiques propres aux sites des clients.nJ’ai un client par exemple, son site est visitu00e9 u00e0 10% par des IE8 (entreprise figu00e9e avec XP).nSur 1000 utilisateurs, u00e7a fait quand mu00eame 100 qui ne peuvent pas voir le site et donc qui ne peuvent pas consommer ! C’est pas mal quand mu00eame !

        • yohann

          J’ai fait un edit avant d’avoir vu ta ru00e9ponse, sorry 😉

      • madvic

        Ah oui, effectivement, je n’avais pas fait attention !nhttp://www.sitepoint.com/browser-trends-march-2015-renewed-interest-opera/nLu00e0 nous sommes pour < IE9 u00e0 4%

        • yohann

          Effectivement !

  • Pingback: 6+ sites pour le développement CSS3/HTML5()

  • Pingback: HTML_CSS | Pearltrees()

banner