Hallo, was ik weer.
Hoe maak ik mijn site geschikt voor smartphones en tablets?
Groetjes,
Bertus
PS Ik heb veel artikelen in databases staan. Dus veel MB's.
2.387 views
Kijk eens naar het Responsive Web Design.
Dan heb je minimale aanpassingen ... en je hebt maar 1 website.
Dus geen aparte website voor mobiele/draagbare dingen.
Wat er op je website staat aan artikelen maakt niet uit. Bespaar overload en beperk http-aanvragen.
Dan heb je minimale aanpassingen ... en je hebt maar 1 website.
Dus geen aparte website voor mobiele/draagbare dingen.
Wat er op je website staat aan artikelen maakt niet uit. Bespaar overload en beperk http-aanvragen.
Beste Eddy,
dank voor je reactie.
De site gaat over relatiegeschenken:
zowel bedrukte artikelen als onbedrukte artikelen.
Je klikt via een menu naar catalogus dan naar de rubriekskeuze en dan zie je alle artikelen in die rubriek.
Je kunt dan via link "details" de eventuele drukmogelijkheden en staffelprijzen zien. Daarna kun je ook nog het artikel in vol scherm vergroot zien.
Ik probeer mij een voorstelling te maken over hoe ik hier overload moet voorkomen en hoe ik http-aanvragen kan beperken.
Bedoel je dat er weinig verwijzingen naar andere pagina's moeten zijn?
Want die zijn er in mijn optiek veel.
Bezoekers moeten nog al wat keuzes maken om uiteindelijk bij hun keuze uit te komen: rubriek, artikel, kleur, maat, bedrukking.
Groeten,
Bertus
dank voor je reactie.
De site gaat over relatiegeschenken:
zowel bedrukte artikelen als onbedrukte artikelen.
Je klikt via een menu naar catalogus dan naar de rubriekskeuze en dan zie je alle artikelen in die rubriek.
Je kunt dan via link "details" de eventuele drukmogelijkheden en staffelprijzen zien. Daarna kun je ook nog het artikel in vol scherm vergroot zien.
Ik probeer mij een voorstelling te maken over hoe ik hier overload moet voorkomen en hoe ik http-aanvragen kan beperken.
Bedoel je dat er weinig verwijzingen naar andere pagina's moeten zijn?
Want die zijn er in mijn optiek veel.
Bezoekers moeten nog al wat keuzes maken om uiteindelijk bij hun keuze uit te komen: rubriek, artikel, kleur, maat, bedrukking.
Groeten,
Bertus
Nee, in praktijk is het gewoon 1 extra stijlsheet.
Die laat je alleen in (dmv media-queries) bij schermen kleiner dan ... 920px bijvoorbeeld.
Met een liquid-design heb je dan minimale aanpassingen.
Eigenlijk zou je met de kleinste schermen moeten beginnen (dat is het Mobile First-idee) en dan moeten verrrijken voor grotere schermen. De praktijk is vaak (en in jouw geval dus ook) andersom: eerst desktop, dan mobiel.
Dat houdt in dat je op een hoop dingen een display: none; en background-image: none; gaat zetten.
Nu zijn de browsers nog niet zo ver om dan die dingen ook niet in te laden, maar dat duurt niet lang meer.
Kijk eens op www.zunflappie.nl wat het doet: open het met een maximaal schermgrootte.
En verklein die dan.
Dat gebeurt ook op je mobiel (probeer maar).
Link naar CSS: www.zunflappie.nl/design/2010/index.css
Op 80% van het document switch ik over naar RWD (Responsive Web Design). Alle opmaak in 1 stijlblad = 1 request.
Probeer GEEN afbeeldingen te gebruiken maar zo veel mogelijk met CSS op te lossen (als headers etc).
Overload heb je al snel: eigenlijk komt het er op neer: strip wat je strippen kan.
En daarna moet je dat eigenlijk ook doen voor desktop ;).
Voordeel: het is en blijft dezelfde website met dezelfde php en html-code. Alleen de CSS verandert!
Link naar stij
Die laat je alleen in (dmv media-queries) bij schermen kleiner dan ... 920px bijvoorbeeld.
Met een liquid-design heb je dan minimale aanpassingen.
Eigenlijk zou je met de kleinste schermen moeten beginnen (dat is het Mobile First-idee) en dan moeten verrrijken voor grotere schermen. De praktijk is vaak (en in jouw geval dus ook) andersom: eerst desktop, dan mobiel.
Dat houdt in dat je op een hoop dingen een display: none; en background-image: none; gaat zetten.
Nu zijn de browsers nog niet zo ver om dan die dingen ook niet in te laden, maar dat duurt niet lang meer.
Kijk eens op www.zunflappie.nl wat het doet: open het met een maximaal schermgrootte.
En verklein die dan.
Dat gebeurt ook op je mobiel (probeer maar).
Link naar CSS: www.zunflappie.nl/design/2010/index.css
Op 80% van het document switch ik over naar RWD (Responsive Web Design). Alle opmaak in 1 stijlblad = 1 request.
Probeer GEEN afbeeldingen te gebruiken maar zo veel mogelijk met CSS op te lossen (als headers etc).
Overload heb je al snel: eigenlijk komt het er op neer: strip wat je strippen kan.
En daarna moet je dat eigenlijk ook doen voor desktop ;).
Voordeel: het is en blijft dezelfde website met dezelfde php en html-code. Alleen de CSS verandert!
Link naar stij
Ok. Dank je wel.
Hier ga ik mijn site eerst maar eens op nazien.
En indien daar waar nodig aanpassen.
Nogmaals dank.
Ik heb de komende avonden wat te doen.
Groeten,
Bertus
PS. Voorlopig dus eventjes als gesloten beschouwen.
Hier ga ik mijn site eerst maar eens op nazien.
En indien daar waar nodig aanpassen.
Nogmaals dank.
Ik heb de komende avonden wat te doen.
Groeten,
Bertus
PS. Voorlopig dus eventjes als gesloten beschouwen.
Een goede tip die ik vandaag nog heb gehoord. Zorg in ieder geval voor een menu welke onderaan de site staat. De duimen bevinden zich op een mobile device het laagst en worden vaak gebruikt om te navigeren in de menubalk (op iOS/Android apps).....
Dank je wel Aar!
Handige tip.
Kan ik goed gebruiken.
Groeten,
Bertus
Handige tip.
Kan ik goed gebruiken.
Groeten,
Bertus
Wat goede tutorials over responsive webdesign:
- Setting breakpoints in responsive design
- A crash course in CSS media queries
- Responsive design with CSS3 media queries
En 2 hele goede tutorials over menu's:
Responsive nav patterns en de daaropvolgende tutorial (wordt naar gelinkt)
- Setting breakpoints in responsive design
- A crash course in CSS media queries
- Responsive design with CSS3 media queries
En 2 hele goede tutorials over menu's:
Responsive nav patterns en de daaropvolgende tutorial (wordt naar gelinkt)