Comment commencez-vous à construire un site web?
La majorité des développeurs partent probablement de zéro ou récupèrent quelques ressources des sites précédents. Les plus organisés d'entre nous ont développé une boîte à outils personnalisée à partir de laquelle commencer un site qui s'avère être une partie essentielle de leur flux de travail.
Aujourd'hui, nous allons expliquer pourquoi vous devriez envisager de créer votre propre package frontal afin de servir de point de départ pour chaque site que vous créez.
Qu'est-ce qu'un package frontal?
Ce que je veux dire par paquet frontal est essentiellement un ensemble d’outils et de conventions qui normalisent certains éléments du processus de développement Web. L'inspiration de cet article provient des esprits créatifs d'Erskine Design. En tant que designer, vous êtes probablement un penseur visuel, nous allons donc passer directement au diagramme:
Le contour de base ou le package ultime Front End d'Erskine
Comme vous pouvez le constater, Erskine a essentiellement construit un cadre de base à partir duquel lancer de grands projets de conception Web. Ils résument comme Un recueil exceptionnel de fichiers CSS en cascade et connectés, de conventions de dénomination, de modules, de plugins et de scripts de bibliothèque garantissant que tout projet dirigé ou traité par un ou plusieurs membres de l'équipe reste en convention, et qu'il est plus facile pour quiconque de le faire dans et travailler avec à tout moment.?
Posséder un tel cadre peut être inestimable pour un certain nombre de raisons, dont nous discuterons ci-dessous. Certains prétendent que ce cadre ou cette boîte à outils est non seulement utile, mais absolument nécessaire. Simon Collison d'Erskine Design va jusqu'à dire: sans aucun doute, aucun site Web ne doit être construit avec une couche de base solide et Forfait Ultime.?
Examinons quelques-uns des avantages et des raisons de la création de votre propre package frontal personnalisé. (Basé sur certaines des suggestions de la présentation d'Erskine, trouvées ici)
Élimination du redoublement
C'est la raison la plus élémentaire et la plus compréhensible pour développer un package frontal. Chaque fois que vous commencez à créer un site, vous suivez plusieurs étapes de configuration, telles que la création de la structure HTML nue, la création de fichiers CSS externes, la liaison du code HTML au CSS externe, l'importation de jQuery et / ou de toute autre bibliothèque JavaScript que vous utilisez souvent, etc. Développer un package frontal récupère tout ce temps perdu en rendant extrêmement facile le démarrage d'un nouveau site: il suffit de copier le dossier contenant le framework et vous êtes opérationnel.
Vous pourriez faire valoir que ces tâches ne prennent pas beaucoup de temps ou sont même nécessaires pour que votre cerveau devienne un état d'esprit du développement Web. Pour répondre à ces arguments, je voudrais tout d'abord vous suggérer de voir combien de temps vous perdez sur chaque projet pour obtenir la hiérarchie des fichiers, configurer et charger les scripts et les styles, définir les conventions de dénomination et corriger les erreurs. Je parie que c'est beaucoup plus que vous ne le pensez. Enfin, à ce dernier argument, je vous inciterais à rééduquer votre cerveau pour qu’il accepte comme point de départ une nouvelle partie du processus. Essayez d’expérimenter avec votre système en place et découvrez à quel point il est plus agréable d’éviter toutes les tâches fastidieuses et répétitives.
Standardisation
La normalisation est un avantage majeur de l’utilisation d’une boîte à outils préfabriquée. Chaque fois que vous démarrez un nouveau projet, vous pouvez faire des choses légèrement différentes. Cela peut être quelque chose de gros, comme changer la façon dont vous mettez en page votre HTML, ou quelque chose de petit, comme décider d’une nouvelle convention de nommage. Cela peut rendre extrêmement difficile pour les autres de suivre votre travail ou même pour vous de revenir plus tard et de vous rappeler comment vous faisiez les choses à l'époque.
Au fur et à mesure que vous développez votre package frontal, maintenez la normalisation à l'avant-plan de votre esprit. Décidez de la meilleure façon de faire tout ce que vous avez à faire et respectez ces conventions pour chaque projet que vous démarrez. Marquez vos commentaires de la même manière, organisez votre CSS de la même manière, utilisez les mêmes conventions de dénomination des variables, utilisez la même hiérarchie de dossiers, utilisez les mêmes réinitialisations de CSS, etc. Prendre toutes les petites décisions et les imprécisions de votre système a l'avantage de rationaliser l'ensemble du processus de développement pour vous assurer de créer un site visible et organisé aussi rapidement que possible.
Cela ne veut pas dire que vous devriez choisir un système et vous y tenir en permanence. Laissez-le évoluer au fur et à mesure que vous apprenez et découvrez de meilleures méthodes, mais n'intégrez pas de nouvelles méthodes avec suffisamment de désinvolture ou de fréquence suffisante pour annuler l'utilité de l'ensemble du package. Lorsque vous décidez d'une meilleure façon de faire quelque chose, assurez-vous que vous êtes absolument certain que cela améliorera votre système et assurez-vous de noter le changement et le moment de son intégration afin de savoir à quoi s'attendre des projets plus anciens.
Meilleure collaboration
C’est là qu’un paquet frontal se croise? absolument indispensable. Lorsque vous travaillez avec une équipe de développeurs sur un grand projet, l'une des principales inefficacités que vous puissiez avoir est l'impossibilité de mettre tout le monde sur la même page dès le début du projet.
Si Bill a structuré sa partie du projet dans un sens, que Jill a structuré sa partie dans un autre sens et que Will essaie de suivre les méthodes de Bill et Jill, les choses vont se gâter rapidement (et pas seulement parce que tous vos les noms des employés riment). Cela mènera inévitablement à de longues réunions consacrées à la bagarre. Si des membres de votre équipe ont déjà démarré un projet en utilisant certaines conventions, vous pouvez parier qu'ils vont défendre cette méthode à mort pour éviter de revenir en arrière et de réparer ce qu'ils considèrent comme du travail terminé. C'est pourquoi il est extrêmement important de développer un package frontal dans les cas où une collaboration importante est impliquée.Vous devrez probablement tenir une réunion pour décider des conventions spécifiques à suivre, mais vous constaterez que les membres de l'équipe sont beaucoup plus flexibles face aux nouvelles méthodes si cela ne nécessite pas de retour en arrière.
La solution à retenir ici est de développer un système avant le début d'un projet, pas pendant. Cela augmentera les chances d'acceptation et évitera de nombreux problèmes d'incompatibilité à l'avenir. Assurez-vous également d'inclure votre équipe dans le processus de prise de décision. Ceci est extrêmement important pour le succès du paquet pour un certain nombre de raisons. Tout d’abord, c’est toujours une mauvaise idée pour la direction de créer un système permettant de rationaliser une tâche donnée sans consulter les personnes qui en sont les plus proches. Peu importe le nombre de diplômes universitaires que vous avez sous les mains de vos subordonnés, il est probable qu'ils constituent la meilleure autorité pour déterminer ce qui fonctionnera et ce qui ne fonctionnera pas. Enfin, mis à part la question de l'efficacité, se pose à nouveau la question de l'acceptation. Si vous donnez à votre équipe un ensemble de directives qu’elle n’a pas contribué à mettre au point, elle traîne des pieds et se plaint tout au long du chemin parce que vous la forcez à faire quelque chose qu’elle ne veut pas faire. Cependant, si vous laissez les membres de l'équipe de tous les niveaux participer activement à l'élaboration des conventions, ils seront beaucoup plus susceptibles de se conformer au nouveau système car ils ont aidé à sa création et à sa direction.
Contrôle de qualité
Développer un package frontal vous permet de mettre en place un certain degré de contrôle de la qualité parmi les membres de votre équipe dès le début du projet. Cela garantit que les erreurs courantes, telles que la récupération du type de document incorrect ou l'oubli d'inclure une feuille de style spécifique à un navigateur, ne sont pas commises. En outre, la mise en place d'un système strict peut aider à prévenir le travail mal fait intentionnellement. Dans une course effrénée pour lancer un projet, les développeurs utilisent souvent du code non conforme aux normes, des noms de variables vagues, des astuces obscures et de nombreux autres raccourcis permettant de revenir en arrière et de corriger ces problèmes ultérieurement. Le problème est bien sûr qu’il n’ya généralement pas de temps pour revenir en arrière et régler ces problèmes plus tard dans le projet à l’approche des échéances clés. Bon nombre de ces problèmes disparaîtront si vous favorisez une culture qui évite de telles pratiques et décourage de s'éloigner des conventions convenues.
En matière de design et d'innovation
Avant de terminer et de demander à entendre vos opinions, je souhaite préempter un argument qui pourrait survenir. Beaucoup voient dans les conventions communes et les règles strictes quelque chose qui paralysera le processus de conception, éliminant pratiquement toute possibilité de créativité ou d’innovation. Ce n'est tout simplement pas le cas dans ce cas et est en fait le résultat opposé de ce qu'un package frontal bien conçu fournira.
Un bon package frontal vous permettra en réalité de vous concentrer davantage sur les éléments créatifs du processus de développement en normalisant les domaines qui prennent du temps et dont la variation ne ferait pas une différence significative dans le résultat final. Ce que je veux dire par là, c'est que des éléments tels que la hiérarchie de vos dossiers passeront complètement inaperçus à l'utilisateur final et ne constituent donc pas le lieu idéal pour concentrer votre créativité sur chaque projet. L'idée ici est de passer rapidement en revue les trucs ennuyeux afin de pouvoir creuser rapidement les tâches qui varient et devraient varier d'un site à l'autre. les choses qui rendent chaque site unique. Avec ce type de système en place, vous pouvez passer plus de temps à développer des interfaces utilisateur originales, à choisir des palettes de couleurs personnalisées, à essayer différentes familles de polices et à coder des fonctions innovantes.
Si le système que vous proposez entrave le processus de création, il ne fait tout simplement pas son travail et doit donc être abandonné au profit d'un retour à la planche à dessin.
Ressources gratuites
Vendus sur l'idée de développer votre propre paquet frontal mais vous ne savez pas par où commencer? Voici quelques ressources gratuites pour vous aider à démarrer.
- Une collection exceptionnelle de styles de réinitialisation CSS globaux
- Exemples de pages vierges HTML
- Un système de template PHP simple
- Google Code: bibliothèques JavaScript hébergées (jQuery, MooTools, etc.)
- 16 modèles de présentation CSS de base
Dis ce que tu penses
Ce qui précède représente mon argument de longue haleine qui explique pourquoi je pense qu'Erskine Design a raison d'affirmer que chaque site Web doit être conçu à partir d'une base solide, standardisée et prédéfinie. Dites-nous si vous pensez que développer un tel système vaut votre temps. Mieux encore, si vous avez un système en place, dites-nous comment il fonctionne!