Pages :
(reprise du message précédent)

Bonjour Eaglefor,
il est probable que tu préféreras élaborer ton site uniquement pour les écrans d'ordi, non ceux pour smartphone ou tablette. Dans un premier temps et peut-être toujours parce que tu es photographe. Ce serait infiniment complexe d'élaborer ultérieurement des versions pour smartphone et tablette : tu risques d'être déçu dans le rendu minimaliste de tes oeuvres ; en ce cas tu te limiteras à réaliser quelque chose de bon, et de très bon pour les écrans 15'' et 17'' (pouces) : autant faire une et seule chose et qu'elle soit excellente ...

En ce cas tu seras bien inspiré de te limiter à une largeur de 980 pixels. Je t'invite à surfer le web et à découvrir ce qu'ont réalisé une vingtaine d'autres photographes, et à admettre que pour tel ou tel site que tu admirerais, tu seras amené à lire le code source de leurs pages : html css principalement pour tout comprendre 'comment et pourquoi', et pourquoi pas pour t'en inspirer.

Considère l'ergonomie de ton menu : un amateur qui souhaite découvrir tes oeuvres doit pouvoir surfer aisément de page en page, mais surtout ne pas devoir procéder à ce qui deviendrait vite agaçant pour lui : saisir 1x 2x 3x la flèche 'retour' du navigateur pour revenir au menu général ... Mettre ton menu général en position:fixed, et sur toutes les pages et sous-pages (!!!) sera une première approche ergonomique intéressante, en le condensant sur la largeur totale 980px, et pas épais plus de 60px ! Je pense que ta page d'accueil actuelle est photographiquement vide de sens, presque inutile : place plutôt un trio de bonnes photos (pourquoi pas tes meilleures), aux dimensions moyennes qui assurent d'emblée l'envie de les saisir agrandies. Agis vite et fort, sans perdre la troisième seconde d'une visite où au terme de laquelle le visiteur choisira de rester sur ton site, ou de s'en échapper à jamais.

Pour répondre précisément à ta question : oui, et davantage : essaie d'oublier totalement PhotoShop pour l'instant, et apprends d'abord à coder html et css de façon simple, correcte et efficace. Et réserve à tes oeuvres et exclusivement à tes oeuvres le seul privilège de l'usage de PhotoShop ... Car c'est une question de stratégie double : création d'un site web en html et css, présentation d'une oeuvre photographique. A défaut de respecter ceci, crains de ne pas progresser vite et bien.
Modifié par pictural (02 Aug 2015 - 23:02)
Merci pour ce message critique mais constructif.

J'étais sur le point d'essayer de mettre mon code à jour pour l'adapter à tous les écrans, on verra donc ça par la suite et se concentrer sur le support PC.
Pars tout simplement d'un schéma griffoné sur papier en 30 secondes chrono ! (et daigne oublier un instant ce qui est commun chez beaucoup de photographes : un fond noir qui provoque immanquablement un effet d'éblouissement par des lettres claires et des images blanches ... car l'être humain est un animal diurne par excellence ; pas nocturne)

Comme celui-ci :

upload/59366-schem2.jpg

et attelle-toi à réaliser une telle page d'accueil simplissime, où dans la barre de menu figurent des liens vers d'autres pages ... Simplissime à imaginer, à rédiger, à utiliser !

Nous verrons par la suite comment, selon les rubriques d'images, apparaîtront des sliders automatiques (avec contrôle play/stop)(par javascript alternant la class d'un nouvel id, avec effet de transition css3) : facile à faire, facile à mettre à jour, facile à utiliser, sans liste ordonnée, sans écriture html (ou presque), avec mise en cache des images au chargement de la page grâce à une toute petite ligne de script ...
Modifié par pictural (03 Aug 2015 - 12:44)
Salut Eaglefor,
les img en float:left sera une solution ; sinon tu crées 2 div en display:inline-block avec même height, où tu places img puis texte.
Bonjour,

Comportements flottants, affichage inline-block, affichage sous la forme de cellules CSS, il y a plusieurs façon de faire. Je ne te recommanderais pas d'utiliser forcément les flottants car la compréhension et la gestion des dépassement des flottants et autres joyeusetés de la décennie dernière sont assez complexes à appréhender au début.

Bref, là il faut que tu reprenne depuis le début par les petits articles d'initiation disponibles sur Alsa (par exemple Initiation au positionnement partie 1). Si cet apprentissage relève d'une importance particulière pour toi, c'est à dire si le site en question à vocation à représenter ton activité professionnelle, je te conseille de te procurer le bouquin du taulier d'Alsa qui te permettras de comprendre ce que tu fais plutôt que de bidouiller sur Dreamweaver et de prier pour que ça s'affiche comme tu veux Smiley smile
> CSS 2 pratique du design web

Bonne continuation Smiley smile
Modifié par audrasjb (24 Aug 2015 - 08:39)
Bref ! Eaglefor, une bonne page du Bloc-notes t'aidera à tout comprendre depuis rien, sans NightmareWeaver ... Et là, je pense que AudrasJb a parfaitement raison de t'aiguiller vers le préliminaire et l'essentiel.

A +++
Modifié par pictural (26 Aug 2015 - 19:53)
Eaglefor,
pour la version actuelle de ton site (par le nouveau link), daigne noter ceci en guise de recommandation visuelle : les polices de caractères avec 'serif' (empâtement de l'extrémité des lettres, par exemple Times New Roman) sont à proscrire lorsqu'elles apparaissent claires sur fond sombre parce qu'elles sollicitent les cellules hyper-photosensibles de la périphérie de la rétine (de l'oeil) et provoquent de ce fait une 'sur-exposition de l'image', dont un éblouissement répétitif lors de la lecture d'un texte ... Ce qui est extrêmement fatiguant, donc agaçant.

En conclusion il est préférable d'utiliser dans ce cas une police de caractère 'sans serif', par exemple Arial, Verdana, etc.
Modifié par pictural (26 Aug 2015 - 19:56)
Pages :