La conception Web réactive fait fureur pour le moment, mais en tant que concepteur à temps plein, il est difficile de prendre le temps de saisir les nouvelles tendances, aussi utiles qu'elles soient, voire nécessaires.
Les thèmes et modèles prédéfinis vous offrent un moyen rapide et facile de commencer à concevoir des sites Web adaptatifs. Nombre d'entre eux effectuent tout le travail à votre place et fournissent un flux de production plug-and-play simple, tandis que d'autres se chargent des tâches les plus ardues en prenant en charge les requêtes des médias et en vous donnant le contrôle total sur la conception. Cet article contient 20 modèles gratuits et premium, tous entièrement réactifs.
Mise en page réactive: manie ou nécessité?
Il y a eu beaucoup de discussions sur la conception de sites Web réactifs ces derniers temps. Beaucoup le considèrent comme l'avenir de la conception Web et vont même jusqu'à dire que vous ne faites pas de la conception Web de la bonne façon si vos sites ne sont pas conformes à leur formule spécifique pour une compatibilité maximale. D'autres affirment qu'il ne s'agit que d'un autre jouet parmi une longue série de modes qui vont et viennent.
La réponse est probablement quelque part entre les deux. La vérité est que la conception Web a en effet rencontré un obstacle majeur avec la richesse des différentes tailles d’écrans qui accèdent désormais régulièrement au Web. De nombreux sites ne peuvent pas se permettre de négliger une grande partie des utilisateurs mobiles, ni de créer des sites personnalisés parfaitement adaptés à tous les smartphones, tablettes, ordinateurs portables et ordinateurs de bureau disponibles sur le marché.
Le design réactif, qu’il soit tendance ou non, est actuellement la meilleure réponse à ce problème. Si les requêtes des médias perdent en popularité, ce sera tout simplement parce qu'une meilleure solution a été trouvée et non pas parce que le problème cesse d'être important.
Je ne peux pas dire comment nous allons développer des sites dans dix ans, mais vous pouvez parier que la taille des écrans continuera à devenir de plus en plus fragmentée, car tout ce qui fonctionne avec une batterie ou une prise devient rapidement capable d'accéder au Web. Si nous définissons? Sensible? Si la conception Web est un ensemble de techniques utilisées pour assurer une compatibilité maximale entre le plus grand nombre d'appareils possible, nous ne cherchons certainement pas une mode, mais la norme actuelle et future pour les professionnels de notre secteur.
Certains se plaignent de l'effort supplémentaire et du temps de développement, mais ce n'est vraiment pas aussi grave que vous pourriez le penser et une fois que vous avez réussi, l'impact sur votre flux de travail peut être assez minime. Les outils de ce post le rendent encore plus rapide en vous allégeant la pression sur les éléments réactifs.
20 modèles et thèmes réactifs
Yoko - Thème gratuit HTML5 / CSS3 WordPress 3.1+
? Yoko est un thème WordPress moderne et flexible. Avec la mise en page responsive basée sur les requêtes de média CSS3, le thème s'adapte à différentes tailles d'écran. La conception est optimisée pour les grands écrans de bureau, les tablettes et les petits écrans de smartphone. Pour personnaliser votre blog, vous pouvez utiliser les nouveaux formats de publication (galerie, mise de côté ou citation), choisir votre propre logo et une image d’en-tête, personnaliser le fond et la couleur du lien.
Prix: Libre
Squelette
Skeleton est un passe-partout qui facilite le développement de sites Web réactifs. Nous avons écrit plusieurs fois à ce sujet sur Design Shack et adorons sa simplicité. En plus du téléchargement, vous obtenez bien sûr un fichier de démonstration, qui peut facilement être utilisé comme modèle de départ pour créer votre propre travail.
Prix: Libre
Super Squelette: Réactif, Minimal, Beau
SuperSkeleton est plus qu’un modèle, c’est un framework HTML5 complet; Une collection de plusieurs scripts et de structures CSS incroyablement puissants qui ont été réunis dans un kit parfait comme point de départ de votre prochain projet.
Il s’agit d’un package super premium comprenant 20 modèles HTML, un kit d’interface utilisateur PSD, plusieurs skins, des piles de polices et bien plus encore. C'est une bonne affaire pour moins de 20 $ et c'est le moyen idéal pour lancer vos projets dans une mise en page réactive.
Prix: $17.00
Responsive Twenty Ten (thème WP)
Responsive Twenty Ten est un thème enfant du thème WordPress par défaut avec de nombreuses fonctionnalités exceptionnelles, telles que des images flexibles. Les auteurs vous autorisent à "télécharger, prendre, utiliser, modifier et en faire ce que vous voulez".
Prix: Libre
Modèle de conception Web sensible Onextrapixel
Un modèle / tutoriel gratuit très basique mais solide pour une conception Web réactive. C'est parfait si vous voulez juste fouiller et voir comment fonctionne un modèle réactif simple sans toutes les peluches.
Prix: Libre
Le romancier: Thème WP réactif pour les écrivains
Un thème d'aspect unique avec une interface de livre ouvert simulée qui s'adapte facilement lorsque vous redimensionnez le navigateur. Parfait pour les portefeuilles d'écrivains personnels.
Prix: $35
Ari WordPress Thème
Ari est un thème de blog très minimal qui est super attrayant dans sa simplicité. Il est conçu pour WordPress 3 et plus et comporte à la fois un thème clair et un thème sombre. Vous voudrez certainement jeter un coup d'œil à celui-ci.
Prix: Libre
Grille d'or
À l'instar de Skeleton, Golden Grid est plus qu'un modèle, c'est un cadre pour la création de sites réactifs. Les 16 colonnes peuvent être combinées ou pliées en 8 colonnes pour les écrans de la taille d’une tablette et en 4 colonnes pour les écrans de taille mobile.
Prix: Libre
Hero - Un modèle de page unique réactif
Un modèle de page simple de style réactif, propre et minimal pour le type personnel et professionnel. Il comporte un menu fixe tout en haut du document pour faciliter la navigation. Il a également une bordure de 10 pixels dans le corps.
Hero propose à la fois un thème clair et un thème sombre, tous deux superbes, mais le noir est particulièrement glissant.
Prix: $14
Good Minimal - Un modèle HTML5 réactif
«Good Minimal est un modèle de style épuré et minimaliste qui convient aux portefeuilles, aux blogs et aux entreprises. Très semblable au modèle précédent à bien des égards, mais avec un design plus audacieux et plus unique. J'aime vraiment le look de la typographie dans celui-ci.
Prix: $14
iTheme2 (WordPress)
iTheme2 est un superbe modèle de blog gratuit doté d'une mise en page réactive et de nombreuses fonctionnalités exceptionnelles, telles qu'un curseur de fonctionnalité personnalisable, un widget de média social, deux thèmes de thèmes, etc.
Prix: Libre
Folio Deux
"Folio Two est un portefeuille avancé, un modèle pratique et utilisable conçu avec HTML5 + CSS3 et utilisant jQuery pour améliorer la convivialité de l'utilisateur."
Ce modèle comporte une très grande et grande grille d’images qui se modifie progressivement à mesure que la fenêtre du navigateur se redimensionne. La grille a fière allure, qu'elle soit petite ou grande!
Prix: $12
Thème Grido WP
Grido est un exploit impressionnant et impressionnant d’astuces de mise en page Web. Il comporte à la fois une disposition semblable à celle d'une maçonnerie et un système réactif qui réajuste cette disposition pour plusieurs tailles d'écran. Il est livré avec plusieurs jeux de couleurs, une galerie de lightbox, sept skins et plus.
Prix: $39
Thème WordPress flexible
"Flexible" est un thème WordPress permettant de présenter votre contenu et de l’afficher en fonction de la taille de votre écran, avec votre propre design. Il fournit également une intégration très simple avec Facebook et l’option Fan Gate, indispensable si vous utilisez un site Web.
Prix: Libre
Modèle de profil Gray Deresan
Modèle sophistiqué avec une palette de couleurs neutres, un curseur d’image et de nombreuses petites touches de design. La mise à l'échelle réactive n'est pas ma préférée, mais elle est fonctionnelle.
Prix: $14
Constellation WordPress Thème
Ce thème a tout. Non seulement il est réactif, il est construit sur HTML5 Boiler Plate et contient à la fois une grille horizontale et un rythme vertical parfait en pixels qui s'adapte parfaitement à tous les appareils. C'est le point de départ idéal pour votre prochain projet WordPress.
Prix: Libre
Grille photo transparente sensible
Une belle petite expérience de Chris Coyier que vous pouvez télécharger et utiliser. Il s’agit essentiellement d’une grande grille de photos qui s’ajuste instantanément aux différentes tailles de fenêtres de navigateur.
Prix: Libre
Tisa WP Thème
Un autre thème Themify superbe et réactif avec beaucoup d’images de grande taille, une belle palette de couleurs et six thèmes de thèmes.
Prix: $39
Thème WordPress adaptatif pour Suricates
Le thème Meerkats est conçu pour répondre à différentes plates-formes et appareils. C'est un thème WordPress simple et basique construit par Gregor McKelvie. ?
Prix: Libre
Cadre de tableau blanc
Le cadre de tableau blanc pour WordPress a été développé pour accélérer le processus de développement d’un thème WordPress. Pour ce faire, Whiteboard élimine le temps consacré au code commun à tous les thèmes WordPress et inclut un code non intrusif qui améliore le thème WordPress de plusieurs manières - notamment le référencement, la vitesse, la convivialité et le support mobile.
Construit sur le framework Popular Less, Whiteboard utilise à la fois HTML5 et CSS3 et vous fournit un point de départ presque imbattable pour développer des thèmes WP parfaitement réactifs.
Prix: Libre
Conclusion
Avec ces vingt ressources étonnantes, vous devriez être complètement armé pour commencer à créer des conceptions Web réactives en HTML / CSS et WordPress. Quel que soit votre budget, plusieurs thèmes et modèles vous conviennent parfaitement.
Laissez un commentaire ci-dessous et laissez-nous savoir si nous en avons manqué. Avez-vous rencontré de bons modèles et thèmes réactifs? Nous voulons les voir!