Het behouden van dynamische content op de juiste plek in html

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jorn Reed

Jorn Reed

01/08/2019 15:37:24
Quote Anchor link
Ik heb een wordpress project, met een zelf gemaakt thema. Ik heb een pagina met een achtergrond van een menukaart, die 100% bij 100% is(volledige scherm grootte). Op het menu zijn er verschillende blokken waar de tekst op moet. Het tonen van de tekst is het probleem niet, maar omdat ik nu met een achtergrond foto werk die op elk scherm natuurlijk een ander hoogte en breedte heeft, weet ik niet met html/css hoe ik het voor elkaar krijg dat op elk scherm (maakt niet uit welke grootte) dat de tekst (menu producten) op dezelfde plek in de blokken zit.
 
PHP hulp

PHP hulp

03/04/2020 12:36:09
 
- Ariën -
Beheerder

- Ariën -

01/08/2019 16:46:56
Quote Anchor link
Heb je een testopzet?
 
Thomas van den Heuvel

Thomas van den Heuvel

02/08/2019 00:23:30
Quote Anchor link
Jorn Reed op 01/08/2019 15:37:24:
maar omdat ik nu met een achtergrond foto werk die op elk scherm natuurlijk een ander hoogte en breedte heeft, weet ik niet met html/css hoe ik het voor elkaar krijg dat op elk scherm (maakt niet uit welke grootte) dat de tekst (menu producten) op dezelfde plek in de blokken zit.

Dan kun je twee dingen doen:
Of je zet je pagina zo op dat deze voor een vaste resolutie werkt (en daarmee dus ook alles wat groter is, maar dat kan er dus weer raar uitzien op het moment dat dit vele malen groter is dan de resolutie waarvoor het ontworpen is), het kan dan handig zijn dat je een indicatie hebt van wat de meest gangbare resolutie is waarmee de pagina('s) worden bekeken. Heb je hier statistieken van?

Of, en wellicht beter, je maakt je pagina/website responsive. Dit zodat de meest gangbare resolutie-bandbreedtes er fatsoenlijk uit zien (mobiel, tablet, desktop). De rest van je design moet zich hier natuurlijk ook voor lenen. En je zult dus een gevalsonderscheid moeten maken tussen deze verschillende afmetingen.

Dit staat trouwens ook los van het pakket (WordPress of wat dan ook) wat je gebruikt.

En als je nog een stapje terugdoet zou dit eigenlijk al in het ontwerp meegenomen moeten zijn: Voor welke apparaten is deze site bedoeld / welke schermresoluties worden (voornamelijk) door onze doelgroep gebruikt?
 
Ozzie PHP

Ozzie PHP

02/08/2019 03:15:22
Quote Anchor link
Thomas van den Heuvel op 02/08/2019 00:23:30:
Voor welke apparaten is deze site bedoeld / welke schermresoluties worden (voornamelijk) door onze doelgroep gebruikt?

Deze vraag is eigenlijk steeds minder relevant. "Vroeger" (tot een jaar of 4 à 5 geleden misschien) was dit een zeer terechte vraag, maar tegenwoordig kun je er vanuit gaan dat een site (welke dan ook) op allerlei resoluties zal worden bekeken. PC's, mobiele telefoons en tablets zijn inmiddels dusdanig gangbaar en gemeengoed, dat je niet meer kunt zeggen dat jouw site voornamelijk op een bepaalde resolutie of type device zal worden bekeken. Je moet er vanuit gaan dat je site zowel op een breedbeeldscherm als op een mobiele telefoon en alles wat daar tussenin zit zal worden bekeken en gebruikt.

(Uitzondering zou eventueel kunnen zijn als het een interne bedrijfssite/-applicatie betreft waarvan je weet dat deze alleen binnen een specifiek bedrijf(keten) zal worden gebruikt en altijd op een breedbeeldscherm en nooit op een mobiele telefoon zal worden getoond of vice versa. Dan kun je de site afstemmen op de juiste resolutie en verdere aanpassingen voor een grotere/kleinere resolutie achterwege laten.)
 
Thomas van den Heuvel

Thomas van den Heuvel

02/08/2019 10:06:27
Quote Anchor link
Zal ongetwijfeld kloppen maar neemt niet weg dat het tijdens het ontwerp als criterium (beschikbaar in welke (specifieke) resoluties) voorbij zou moeten komen. Als het antwoord "alle/variabel" is, ook prima, maar ook dan zul je daar dan rekening mee moeten houden in het verdere ontwerp.

Ook zou je je kunnen afvragen of er een echte noodzaak is om echt alles responsive te maken. Als dit fijn(er) werkt en ook minder/weinig werk kost om op te zetten dan is er geen echte reden om dit niet te doen, maar ik kan mij zo voorstellen dat als je bijvoorbeeld in de beheerkant (backend) van een site zit, je dit doorgaans niet doet vanaf je mobiel. Naast het type site maakt het dus ook uit in welke capaciteit je deze site gebruikt.

Het is waarschijnlijk doorgaans beter om publiek toegankelijke content responsive te maken, tenzij er een (speciale) reden is om dit niet te doen. Bewustzijn over dit soort zaken (waarom deze specifieke aanpak?) kan nooit kwaad.

---

Denk dat topicstarter ook een beetje belemmerd wordt door de insteek "er moet (?) een achtergrondfoto in zitten". Misschien kun je hier een draai aan geven door verschillende designs te maken voor verschillende apparaattypen. Op een mobiel surf je waarschijnlijk ook anders dan op een desktop/tablet. Op laatstegenoemde kun je meer tekst kwijt en neemt men mogelijk ook meer tijd om dingen te lezen, op een mobiel is het misschien interessanter om meer visueel te werk te gaan, je zult daar ook slim met de beperkte ruimte om moeten gaan.
Gewijzigd op 02/08/2019 10:12:48 door Thomas van den Heuvel
 
- Ariën -
Beheerder

- Ariën -

02/08/2019 10:40:20
Quote Anchor link
Admin-backends mogen naar mijn mening zeker wel responsive zijn.

Je hoeft overigens niet te verwachten dat iemand op zijn telefoon met het invullen van tientallen velden een record aanmaakt.
Maar als je eventjes iets moet aanpassen, al is het een vinkje of een stukje tekst, dan biedt het zeker een uitkomst.

Ikzelf sta ook aan de rand van een project om mijn backend om te gooien. Gelukkig zijn er ook templates voor ;-)
 
Ozzie PHP

Ozzie PHP

02/08/2019 12:42:15
Quote Anchor link
@Thomas:

Je herhaalt zo ongeveer hetzelfde als wat ik even daarboven zei, maar in andere woorden. Het zal wellicht in de ontwerpfase kort benoemd worden, maar wat ik wilde zeggen is dat het tegenwoordig eigenlijk een vanzelfsprekendheid is dat een site responsive is, en dus zal juist eerder een niet-responsive variant worden besproken omdat dit tegenwoordig de uitzondering op de regel is.

"maar ik kan mij zo voorstellen dat als je bijvoorbeeld in de beheerkant (backend) van een site zit, je dit doorgaans niet doet vanaf je mobiel."

Klopt, eens. Voor grote cms-systemen (WordPress, Joomla, Magento enz.) kan ik me voorstellen dat het wel allemaal responsive wordt gemaakt (commercieel belang, groot en divers publiek). Gaat het echter om een custom applicatie voor 1 bedrijf, dan kan ik me ook heel goed voorstellen dat deze niet op mobiel zal worden gebruikt (zie ook mijn 2e opmerking in het voorgaande bericht) en dus hoef je ook niet per se rekening te houden met mobiel design en dat bespaart weer ontwikkeltijd en kosten.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.