Internet en mobiel internet

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bertus Wikkerink

Bertus Wikkerink

04/09/2012 20:12:15
Quote Anchor link
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.
 
PHP hulp

PHP hulp

24/11/2024 11:20:42
 
Eddy E

Eddy E

04/09/2012 20:30:44
Quote Anchor link
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.
 
Bertus Wikkerink

Bertus Wikkerink

05/09/2012 18:02:43
Quote Anchor link
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
 
Eddy E

Eddy E

05/09/2012 19:07:45
Quote Anchor link
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
 
Bertus Wikkerink

Bertus Wikkerink

05/09/2012 20:58:22
Quote Anchor link
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.
 
- Ariën  -
Beheerder

- Ariën -

05/09/2012 21:10:34
Quote Anchor link
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).....
 
Bertus Wikkerink

Bertus Wikkerink

07/09/2012 18:52:59
Quote Anchor link
Dank je wel Aar!

Handige tip.
Kan ik goed gebruiken.

Groeten,

Bertus
 
Wouter J

Wouter J

07/09/2012 23:11:46
Quote Anchor link
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)
 



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.