J'ai abandonné Squarespace et créé mon propre site photo à partir de zéro


Depuis plusieurs années, mon site de photographie s'appelle Squarespace home. Parmi les systèmes de gestion de contenu en ligne et complets, il est difficile de se tromper avec Squarespace. Offrant l'enregistrement et l'hébergement de domaine, ainsi que des modèles bien conçus, Squarespace facilite la création d'un site Web d'aspect professionnel.

Squarespace présente de nombreux avantages. Leurs choix de modèles sont excellents, ils sont visuellement attrayants et fonctionnent généralement pour les fins pour lesquelles ils ont été construits. Vous souhaitez ajouter du commerce électronique à votre site Web? Facile. Voulez-vous commencer à bloguer? Ajoutez une page de blog et le reste est fait pour vous. Besoin d'assistance technique? Un chat ou un coup de téléphone.

Squarespace a mis à la disposition des particuliers ce qui coûterait autrement des centaines, voire des milliers de dollars à réaliser par l'intermédiaire d'un développeur Web de composants, le tout pour un coût mensuel assez raisonnable. Alors que mon site Web ne voit pas beaucoup de trafic (pas de faute de Squarespace), j'ai décidé de transférer mon domaine de Squarespace vers un service d'hébergement dédié. Ce qui signifiait que je devais recommencer et créer mon site Web à partir de zéro.

Pourquoi choisirais-je de quitter l'environnement soigné et soigné de Squarespace? En grande partie à cause de gestion de contenu.

Avant d’aller plus loin, je devrais clarifier quelques points. Premièrement, ce n'est pas une critique de Squarespace en soi. Squarespace existe dans un but très précis. Comme je l'ai mentionné, Squarespace a mis à disposition des outils permettant à quiconque de développer un site Web d'aspect professionnel; que ce soit pour prendre en charge une entreprise, un portefeuille ou un projet sans nécessiter de développement Web coûteux. Si vous êtes prêt à prendre le temps de vous familiariser avec l'environnement Squarespace, il répondra probablement bien à vos besoins.

Deuxièmement, les utilisateurs de Squarespace le savent déjà. S'ils avaient besoin de la flexibilité supplémentaire d'un site Web autogéré, ils auraient probablement emprunté cette voie en premier lieu. Dans mon cas, j'ai commencé avec Squarespace dans les mêmes circonstances. Je voulais un look bien adapté avec des fonctionnalités modernes, le tout pour très peu d'effort. C'est après plusieurs années d'utilisation, cependant, que les besoins d'un site Web autogéré sont devenus plus évidents.

Maintenant, en termes de gestion de contenu, vous êtes peut-être propriétaire de votre contenu, mais vous n'êtes pas vraiment propriétaire de votre site Web. Oui, vous avez un nom de domaine, que vous possédez techniquement et que vous pouvez emporter ailleurs, mais votre contenu est pris en charge par un modèle qui est géré et détenu par Squarespace. Squarespace est une entreprise et comme toute entreprise, elle pourrait fermer ses portes demain. Vous laissant très peu d'options pour récupérer vos efforts dans le cas du pire des cas. Pour être honnête, Squarespace vous permet de télécharger votre «site», mais pas de quelque manière que ce soit qui le rende facile de façon transparente transférer ce contenu vers un autre fournisseur.

Pour un portefeuille, ce n'est probablement pas un gros problème, mais cela peut être particulièrement le cas si vous utilisez votre site Web pour n'importe quel moyen de revenu. Après plusieurs années d'utilisation, c'était ce manque global de la possession cela m'a fait décider de quitter Squarespace et d'héberger mon site Web ailleurs. Il y a quelque chose à dire pour avoir un contrôle complet sur tous les domaines de votre site Web, des médias que vous téléchargez aux fichiers HTML et CSS qui constituent le cœur d'un site Web.

Dans ce scénario, si le pire arrivait au pire, je sais que je peux facilement amener mon site Web vers n'importe quel service d'hébergement avec peu de temps d'arrêt entre les deux. Cela devrait être une considération importante pour tous les photographes ou créateurs de toute nature.

Ce qui suit est un récit des décisions que j'ai prises lors de la création et de la conception de ce site Web et du fait qu'il pourrait être une ressource utile pour d'autres personnes qui souhaitent faire quelque chose de similaire. J'ai essayé d'approcher la construction de ce site aussi logiquement que possible, donc chaque «partie» est, plus ou moins, dans l'ordre de considération. À ce titre, je commencerai par discuter de ma première décision dans le choix d'une plateforme d'hébergement.

Partie 1

Choisir une plateforme d'hébergement

Le choix d'une plate-forme d'hébergement a été un peu difficile. Avec de nombreuses options disponibles, vous pensez que ce serait n'importe quoi mais, cependant, la quantité n'est pas toujours égale à la qualité. Googler simplement «meilleur hébergement de site Web 2018» n'est pas un mauvais endroit pour commencer à se familiariser avec l'environnement actuel de l'hébergement de sites Web. Vous pouvez ensuite utiliser ces informations pour filtrer davantage vos choix.

Une autre option, et celle que j'ai finalement choisie, était de rechercher Stack Exchange et les subreddits de développeurs Web sur Reddit. Les deux ont une base d'utilisateurs massive et quel meilleur moyen de trouver ce type d'informations que des personnes susceptibles d'avoir une expérience dans l'utilisation des services d'hébergement? Il y avait beaucoup de bons conseils à donner, mais beaucoup ont souligné l'importance d'un service client de qualité par rapport aux différences techniques.

En parlant de différences techniques, une décision technique que vous devrez probablement prendre est de choisir entre l'hébergement mutualisé ou l'hébergement dédié. Avec l'hébergement mutualisé, comme son nom l'indique, vous partagez les ressources du serveur avec d'autres sites Web. L'hébergement dédié, en revanche, fournit des ressources dédiées pour un seul site Web. Les deux ont leurs avantages. L'hébergement mutualisé est nettement moins cher, tandis que l'hébergement dédié favorise la stabilité. Je me risquerais à dire que pour la grande majorité des gens, l'hébergement mutualisé est plus que suffisant.

Après avoir comparé la plupart des principaux acteurs de l'hébergement Web, j'ai finalement choisi un plan d'hébergement partagé de Siteground. Ils ont reçu d'excellents commentaires des utilisateurs (en particulier le service client), avaient des tarifs annuels raisonnables pour l'hébergement partagé et un ensemble de fonctionnalités de lancement solides pour les utilisateurs débutant avec leur propre site Web autogéré.

Transferts de domaine

Lorsque vous vous inscrivez pour un compte Squarespace, vous vous enregistrez également pour votre propre nom de domaine (site Web). C'est en fait une fonctionnalité intéressante que Squarespace propose en ce sens que, en tant que service, tout est autonome. Vous pouvez avoir votre nom de domaine et votre site Web en marche dans les 10 minutes nécessaires pour créer un compte; pas besoin d'acheter un domaine auprès d'un autre fournisseur. C'est la voie que j'ai empruntée lorsque j'ai utilisé Squarespace et enregistré mon nom comme nom de domaine.

Squarespace, heureusement, en fait une expérience relativement indolore en offrant les outils nécessaires pour préparer votre domaine au transfert vers un autre fournisseur. J'ai suivi les étapes exactes trouvées ici et je n'ai rencontré aucun problème. Le transfert de Squarespace à Siteground a duré 10 minutes (bien qu'ils estiment que cela peut parfois prendre jusqu'à 48 heures). Une fois le transfert de domaine terminé, il était temps de commencer à rassembler les éléments de ce site.

Partie 2

WordPress (CMS) ou HTML statique?

La décision suivante a été de décider si je devais utiliser WordPress ou HTML / CSS statique. Dire que WordPress est le CMS le plus utilisé au monde n'est pas une exagération. Selon WordPress, 30% des sites Web sont construits à l'aide de WordPress, qui comprend un certain nombre de grands noms tels que Le New York Times, Forbes, BBC Amérique, TechCrunch.

Si WordPress est assez bon pour gérer ces sites Web, il est assez bon pour gérer votre propre site Web personnel. L'omniprésence de WordPress signifie également que les services d'hébergement offrent généralement des installations WordPress faciles. Donc, si vous venez de Squarespace et que vous aimez toujours l'idée d'un CMS, WordPress (ou l'une des nombreuses variantes) est une bonne solution.

Mais, il y a une autre considération, et c'est un site Web HTML statique. Statique signifie pas de CMS ou de pages Web rendues dynamiquement, via PHP. Les sites Web HTML statiques présentent des avantages. Le premier est la simplicité. Vous avez un fichier HTML pour chaque page et une série de fichiers CSS qui les stylisent. Une fois terminé, vous téléchargez sur votre service d'hébergement préféré et vous êtes prêt à partir. En outre, les sites Web HTML statiques ont tendance à avoir des temps de chargement plus rapides. Un autre avantage est que les pages HTML statiques peuvent offrir plus de flexibilité SEO (optimisation des moteurs de recherche).

Il y a cependant un inconvénient important, et c'est, chose assez intéressante, la gestion de contenu. Un CMS, comme WordPress, est conçu pour faire exactement cela, gérer le contenu. Vous pouvez écrire et télécharger sur une page via un éditeur de texte facile à utiliser, ainsi que télécharger des photos à l'aide de n'importe quel nombre de plugins de galerie de photos disponibles. Le HTML statique vous oblige à modifier directement le code HTML de la page, puis à télécharger cette page via FTP pour remplacer l'ancienne par la nouvelle. C'est assez archaïque par rapport à WordPress ou à d'autres systèmes CMS. Si vous ajoutez constamment du nouveau contenu, ce n'est pas exactement l'idéal.

Pesant les avantages et les inconvénients de WordPress et du HTML statique, j'ai opté pour le HTML statique. Dans un environnement où les sites Web modernes ont tendance à être riches en fonctionnalités, je recherchais la rapidité et la simplicité. Le HTML / CSS statique offre les deux.

Boilerplates HTML / CSS

Je n'ai pas beaucoup d'expérience en développement Web. J'ai géré des sites Web à l'aide d'un CMS, mais pas en codant un site Web à partir de zéro. Ma connaissance du HTML / CSS est basique; assez pour connaître certaines des terminologies et pas grand-chose d'autre. La seule information dont j'étais au courant est les passe-partout HTML / CSS.

Les plaques chauffantes, ou squelettes comme on les appelle parfois, fournissent la base de base pour le développement et la conception d'un site Web. Étant donné que toutes les pages HTML ont une structure de page requise, les modèles standard incluent cette structure ainsi que d'autres fonctionnalités communes qui aident à accélérer le processus de développement du site Web. Ces modèles standard incluent généralement un fichier CSS (feuille de style en cascade) qui normalise votre page Web pour l'aider à rester cohérent entre les navigateurs Web (généralement appelé normalize.css).

Chaque navigateur Web a le potentiel de styliser les pages Web différemment. L'inclusion d'un fichier CSS normalisé aidera à garder votre site Web identique sur tous les navigateurs. En parlant de navigateurs Web, les passe-partout incluront également des fonctionnalités qui rendront votre site Web prêt pour les mobiles. La clé est de pouvoir afficher facilement votre page Web sur n'importe quel appareil; qu'il s'agisse d'un téléphone portable, d'une tablette ou d'un ordinateur de bureau complet.

Comme tout jusqu'à présent, le choix d'un passe-partout nécessitait quelques décisions. Pour moi, il y avait deux facteurs importants. Premièrement, le passe-partout ne pouvait pas être de grande taille. Les plaques chauffantes ont tendance à être assez grandes en fonction des caractéristiques qui y sont intégrées. Deuxièmement, le passe-partout devait être convivial. À la fin de la journée, tout ce dont j'avais besoin était le strict minimum. Entrez Skeleton.

Skeleton est présenté comme «un passe-partout simple et réactif», ce qui n’est pas une blague. Le téléchargement complet ne dépasse pas 26 Ko. Skeleton comprend également de jolies fonctionnalités stylisées simples telles que des boutons et des formulaires si vous choisissez de les utiliser. Une critique que j'ai vue en ligne est qu'elle n'est pas aussi constamment mise à jour que les autres passe-partout et pas aussi riche en fonctionnalités, mais aucun de ces éléments n'a d'importance pour moi. Comme mon site Web est en grande partie basé sur des photos et du texte, il n'y a pas vraiment besoin de frais généraux supplémentaires au moyen de la fonctionnalité d'expérience utilisateur. Tout ce dont j'avais besoin est simple et Skeleton convient parfaitement à ce projet de loi. Hautement recommandé.

Galerie de photos

Je savais que créer une galerie de photos ne serait pas aussi simple si j'avais choisi d'utiliser un CMS comme WordPress. Comme ce site Web est plus pratique, je savais qu'une galerie de photos nécessiterait un peu plus de travail. Je voulais minimiser non seulement la quantité de travail / codage potentiel, mais aussi garder mon thème de simple et léger. Cela a pris une bonne soirée mais je suis tombé sur l'utilitaire de galerie de photos appelé Fresco. Il est rapide, facile à mettre en œuvre et offre de nombreuses possibilités de personnalisation pour répondre à la plupart des besoins des galeries de photos.

Partie 3

Philosophie de conception

Bien que la conception devrait probablement être la première chose que vous considérez et esquissez plutôt que la dernière, c'est la troisième partie de cette série pour une raison. Après avoir utilisé Squarespace pendant un certain nombre d'années, j'ai gardé des notes mentales sur des choses que j'aurais aimé pouvoir changer, mais que je ne pouvais pas en raison des limitations des modèles.

Les modèles Squarespace sont bien conçus et suivent généralement bon nombre des tendances de conception Web les plus populaires d’aujourd’hui: images couvrant l’écran, texte volumineux en blocs et transitions en fondu entre les éléments. Tout en plaisant, ils étaient personnellement irritants. J'avais une vision mentale de longue date de la façon dont j'organiserais mon propre site Web, donc je n'ai pas eu à passer beaucoup de temps à esquisser les détails. Ma philosophie de conception ultime pour ce site Web était assez simple; léger et rapide, propre et soigné.

Disposition

J'ai choisi une mise en page assez standard. Le conteneur (la partie du site Web que vous lisez actuellement) mesure 960 pixels de large et est centré. L'utilisation de Skeleton comme passe-partout a rendu cela simple car il s'agit de la disposition par défaut. Cet espace de travail de 960 pixels peut être divisé en colonnes pour aider à organiser les éléments sur la page. Par exemple, mes pages Accueil, Blog et À propos utilisent 100% de la largeur du conteneur (tous les 960 pixels) ou une colonne.

Mes galeries de photos, par contre, sont divisées en tiers pour que je puisse disposer mes photos dans une grille à trois colonnes.

Une seule page peut avoir des colonnes de différentes largeurs pour aider à accueillir plusieurs mises en page en fonction du contenu. Mieux encore, tout est réactif afin que le contenu évolue proportionnellement.

Polices

Choisir la bonne police est un gros problème. Je dirais que c'est l'une des décisions les plus importantes que vous devrez prendre en termes de conception. Cela n'aide pas qu'il existe des milliers de polices disponibles. Quelques considérations clés aideront à réduire considérablement le champ des choix. Indépendamment du fait qu'une police sera utilisée pour un titre ou un corps de texte, vous voulez une police qui sera facilement lisible et restera cohérente entre les navigateurs. Heureusement, des référentiels comme Google Fonts proposent des polices hébergées dynamiquement qui s'afficheront indépendamment de la plate-forme et du navigateur.

Un autre avantage des polices Google est qu'elles sont gratuites. Toutes les polices ne sont pas gratuites et nécessitent souvent une licence pour être achetées. Aussi pratique que soit Google Fonts, je pense que vous feriez mieux de choisir une police Web sécurisée.

Une police Web sécurisée s'affiche généralement quel que soit le navigateur que vous utilisez. Je voulais utiliser une police sans empattement et Arial est une police Web sécurisée disponible pour l'affichage sur tous les navigateurs. Depuis Arial est considéré comme une police système, je n'ai pas eu à compter sur Google Fonts pour servir le style. Arial est utilisé à la fois pour le corps du texte et les titres de ce site Web. Bien qu'Arial n'ait pas beaucoup de design wow-factor, c'est l'une de ces polices qui va avec presque tout; un peu comme l'équivalent de couleur neutre des polices.

Photos

Je me rends compte que les photos haute résolution qui remplissent l'écran sont extrêmement populaires sur les sites Web, mais cela peut également entraîner un rendu plus lent et des téléchargements éventuellement coûteux. Google a plusieurs excellentes ressources qui couvrent l'optimisation des images qui valent bien la lecture. Ils peuvent être trouvés ici et ici. Les images de ce site Web mesurent en moyenne 200 Ko, ce qui constitue un bon équilibre entre taille, qualité et vitesse.

Il existe un certain nombre de programmes qui peuvent aider à compresser JPEGS sans trop sacrifier la qualité. Certains d'entre eux incluent des utilitaires en ligne tels que TinyJPG et Compressor, ainsi que des programmes de bureau tels que imageOptim (Mac uniquement. Je ne connais pas très bien les options disponibles pour les utilisateurs de Windows). Bien que j'aie utilisé ces derniers, Adobe Photoshop couvre tous mes besoins de compression d'image. Si vous possédez déjà un compte Creative Cloud, il n'est pas nécessaire d'ajouter quoi que ce soit d'autre à votre flux de travail. Sinon, les utilitaires mentionnés ci-dessus fonctionneront bien.

Partie 4

Flux de travail

J'utiliserai cette dernière partie pour couvrir le flux de travail et les applications que j'utilise pour maintenir et mettre à jour ce site Web. Il existe de nombreuses alternatives à ce que je vais couvrir ci-dessous mais, pour l'instant, c'est ma configuration actuelle (peut changer selon les circonstances. Si tel est le cas, des mises à jour seront publiées ici).

Éditeur HTML / CSS

Il existe de nombreux éditeurs HTML / CSS disponibles et je n’ai pas vraiment de conseils spécifiques à donner les uns par rapport aux autres. À moins que vous ne soyez un développeur hardcore avec des besoins très spécifiques, il y a peu de raisons d'acheter un logiciel d'édition HTML / CSS. Le seul conseil que j'ai est d'en trouver un qui dispose de la saisie semi-automatique HTML / CSS robuste et de l'aperçu en direct.

Le code HTML / CSS de saisie semi-automatique est extrêmement utile et permet de simplifier le codage, tandis que l'aperçu en direct vous permet de visualiser votre page Web comme si elle était en ligne et sur le Web. Ceci est utile lors de l'examen du contenu d'une page avant de la télécharger sur votre site Web. J'ai choisi d'utiliser Brackets. Principalement en raison de sa simplicité et de son ensemble de fonctionnalités simples, ainsi que de l'inclusion de la saisie automatique HTML / CSS et de l'aperçu en direct. Il permet également des extensions qui sont nombreuses. J'utilise Beautify qui aide à organiser le code HTML / CSS de manière plus lisible.

Client FTP

Puisqu'il s'agit d'un site Web statique, cela signifie que je remplace les anciens fichiers HTML par les nouveaux fichiers HTML et que je télécharge d'autres contenus de site Web. Alors que les services d'hébergement proposent des portails en ligne pour accéder à votre site FTP, la voie la plus simple est via un client FTP. Les clients FTP vous permettent de stocker vos informations de connexion pour une utilisation ultérieure.Une fois connecté, vous pouvez simplement vous reconnecter. Comme les éditeurs HTML / CSS, il existe de nombreux clients FTP parmi lesquels choisir, mais j'utilise Filezilla, qui est disponible pour Mac et Windows. Il est gratuit et fait le travail.

Traitement de texte

Pour le traitement de texte, j'utiliserai à la fois TextEdit et Brackets. TextEdit (l'équivalent Mac de Notepad) sert principalement à rédiger le brouillon. Une fois le brouillon terminé, je le copierai dans Brackets pour l'organiser en sections sur la page HTML, puis terminerai la révision finale. L'aperçu en direct est particulièrement utile ici car je suis en mesure d'avoir une meilleure idée de la mise en page avant que cette page ne soit mise en ligne.

Conclusion

À la lumière des nombreuses options disponibles pour les individus qui souhaitent créer et maintenir un site Web, tout cet effort semble un peu archaïque. Je n'utilise aucune des fonctionnalités automatisées d'un cadre plus robuste via un CMS ou une distribution de pages côté serveur. D'un autre côté, cependant, j'ai trouvé que j'apprécie beaucoup cette gestion pratique de mon contenu. Ce n'est certainement pas pour tout le monde, mais je n'écarterais pas complètement tout cela.


A propos de l'auteur: Matthew Nordhagen est un photographe amateur basé à Alexandrie, en Virginie. Les opinions exprimées dans cet article sont uniquement celles de l'auteur. Vous pouvez trouver plus de son travail sur son site Web. Cet article a également été publié ici et ici.



Source link

Un circonstances e-commerce donne l’occasion de se lancer à moindres frais pendant rapport aux entreprises classiques. De plus, vous avez la possibilité vous lancer autrement rapidement. La contrôle d’un lieu e-commerce ne demande pas de présence physique à un endroit précis, sauf peut-être pour le stockage et la préparation des commandes que vous pouvez tout à fait externaliser, ou encore mieux si vous ne possédez pas de accumulation (on en parlera plus tard dans l’article).