Responsive design

[dylanvana]

Hallo Tweakerts,

Ik ben niet geheel onbekend met web development maar ik heb 'responsive' een lange tijd links laten liggen omdat ik front-end meestal niet zelf doe. Nu zie ik steeds meer websites en developers gebruik maken van responsive designs. Uit nieuwschierigheid ben ik gaan Googlen maar ik zie veel verschillende oplossingen en meningen over responsive design. Ook schieten mij een aantal vragen binnen die ik niet zo 123 kan beantwoorden.

Om het kort te houden heb ik mijn vragen concreet in een lijstje gezet

• Wat moet ik gebruiken voor een goed werkende responsive website? Gebruik maken van procenten? Een soort framework zoals Bootstrap gebruiken? Jquery mobile? Enkel viewports en media queries?
• Als je gebruik maakt van viewports en media queries (en dus pixels gebruikt) krijg je dan geen problemen met mobiele devices die 1920x1080 resoluties ondersteunen waardoor je een desktop weergave op je mobiel krijgt voorgeschoteld?
• Ook zie ik (oa tweakers.net) dat veel websites voor mobiele devices een ander menu weergeven, dus dat het meer aansluit op de looks en feels van een mobiele OS (wat ik erg gebruiksvriendelijk vind).
• Welke tutorial heb jij gebruikt om kennis te maken met responsive design?

Alvast bedankt

[MoietyMe]

dylanvana schreef op dinsdag 29 april 2014 @ 12:08:
[list]
• Wat moet ik gebruiken voor een goed werkende responsive website? Gebruik maken van procenten? Een soort framework zoals Bootstrap gebruiken? Jquery mobile? Enkel viewports en media queries?

Dat ligt natuurlijk heel erg aan de omvang van je project. Om het echt te leren zou ik voorstellen zelf met media quries en mobile-first te gaan knoeien. Daar je aangeeft de front-end over het algemeen niet zelf te doen is het misschien makkelijker/handiger om een framework als Bootstrap, Zurb, ed te gebruiken.

• Als je gebruik maakt van viewports en media queries (en dus pixels gebruikt) krijg je dan geen problemen met mobiele devices die 1920x1080 resoluties ondersteunen waardoor je een desktop weergave op je mobiel krijgt voorgeschoteld?

Nee

• Ook zie ik (oa tweakers.net) dat veel websites voor mobiele devices een ander menu weergeven, dus dat het meer aansluit op de looks en feels van een mobiele OS (wat ik erg gebruiksvriendelijk vind).

Dit is geen vraag

• Welke tutorial heb jij gebruikt om kennis te maken met responsive design?[/list]

Er staan genoeg artikelen op het net, op A List Apart kun je vast wel wat vinden.

[dylanvana]

Good Fella schreef op dinsdag 29 april 2014 @ 12:15:
Dat ligt natuurlijk heel erg aan de omvang van je project. Om het echt te leren zou ik voorstellen zelf met media quries en mobile-first te gaan knoeien. Daar je aangeeft de front-end over het algemeen niet zelf te doen is het misschien makkelijker/handiger om een framework als Bootstrap, Zurb, ed te gebruiken.

Het gaat mij niet om wat makkelijker is maar om wat 'beter' is (vaag begrip i know). Wat zijn de voor- en nadelen van de door jouw genoemde keuzes?

Dit is geen vraag

Hoe doe je dit (gaan we bijdehand doen )

Er staan genoeg artikelen op het net, op A List Apart kun je vast wel wat vinden.

Ik ben er nog niet over uit welke weg ik ga bewandelen maar de website 'a list apart' kende ik nog niet, thnx

[kaassouffle]

dylanvana schreef op dinsdag 29 april 2014 @ 12:24:

[...]

Hoe doe je dit (gaan we bijdehand doen )

http://exisweb.net/incred...igation-and-menu-patterns

[geert1]

Er is niet één perfecte oplossing voor responsive design; het hangt af van je voorkeuren en van het project waar je aan werkt.

Wie snel en makkelijk wil, kiest voor een framework zoals Bootstrap. Je hebt hiermee snel resultaat en hoeft het wiel niet zelf uit te vinden, maar mogelijke nadelen zijn dat een framework overhead met zich meebrengt (veel mogelijkheden die je misschien niet gebruikt, extra code) en dat het je werkwijze beïnvloedt (je moet dan de logica van het framework volgen en dat kan botsen met hoe je het zelf zou willen doen). Ook zie ik soms dat Bootstrap-sites wel erg dicht bij de standaard blijven, waardoor je letterlijk ziet dat het Bootstrap is en de site dus meer lijkt op andere sites. Dat is natuurlijk te voorkomen door wat meer te customizen.

Wil je het helemaal zelf in de hand hebben, dan is het beter om zelf de media queries te schrijven. Ik gebruik zelf een mix van percentages (bijvoorbeeld voor de layout en kolommen) en pixels (voor blokken en onderdelen die niet percentueel moeten schalen). Je kunt hierbij kiezen om te beginnen met de kleinste versie (mobile first) en dan je browser telkens te vergroten en aanpassingen te doen, of juist vice versa (grootste versie eerst, dan browser steeds verkleinen en media queries toevoegen totdat de layout op elk formaat goed en mooi is). In principe is mobile-first beter en meer vooruitstrevend, maar dit maakt de compatibility met IE8 wat lastiger (IE8 ondersteunt namelijk geen media-queries, maar heeft nog wel een significant marktaandeel voor sommige doelgroepen). Ik werk daarom zelf vanuit de desktop-versie terug naar de kleinere versie, maar je kunt er zo langzamerhand ook voor kiezen om IE8 niet meer te ondersteunen (naar mijn mening zitten we in de twijfelfase wat betreft ondersteuning voor deze browserversie; het gebruikerspercentage hangt af van je doelgroep).

Er komen langzaamaan ook een aantal design-tools beschikbaar die het ontwerp én de front-end-code tegelijk mogelijk maken. Nou ja, dat kon al veel langer (Dreamweaver, Frontpage) maar het resultaat was eigenlijk altijd troep. Dat verandert nu eindelijk, en ook responsive design is hiermee goed mogelijk. De meest veelbelovende app hiervoor op dit moment is Macaw, en ook WebFlow, Adobe Edge Reflow en anderen zijn interessant. Er wordt verwacht dat over enkele jaren een hoop van het front-end-werk met dit soort tools gedaan kan worden, en ook nu al zijn ze prima te gebruiken (vaak nog met wat handmatige afwerking in de code).

Wat betreft smartphones met hoge resoluties: Deze apparaten geven een lagere resolutie door aan de website dan hun echte schermresolutie, waardoor dit probleem zichzelf automatisch oplost. Dus een 1080p-scherm op een smartphone geeft een veel lagere resolutie door, zodat de website wel in zijn mobiele versie getoond wordt. De hoge resolutie wordt gebruikt om tekst beter leesbaar te maken, zonder dat alles heel klein wordt.

Eigenlijk kan ik alleen maar adviseren om meerdere dingen te proberen, je ervaring op te bouwen en dan een eigen workflow te kiezen. Je vindt hier een mooie verzameling van leesvoer, tools en technieken (wel erg veel, maar zitten goede dingen bij). Succes!

[ Voor 3% gewijzigd door geert1 op 29-04-2014 14:20 ]

[n8n]

Lees artikelen op bradfrostweb.

http://bradfrostweb.com/blog/post/responsive-strategy/
http://bradfrostweb.com/b...-effective-media-queries/

Schrijft veel over responsive en modulair websesign en maakt ook nog eens sense

[Woutske]

Ik raad ook aan om op de website van bootstrap rond te neuzen; daar staan een hoop voorbeelden van responsive elements en optimalisaties voor mobiele apparaten (vooral CSS).

[n8n]

Woutske schreef op zondag 11 mei 2014 @ 22:54:
Ik raad ook aan om op de website van bootstrap rond te neuzen; daar staan een hoop voorbeelden van responsive elements en optimalisaties voor mobiele apparaten (vooral CSS).

Zie bootstrap niet bepaald als een toonbeeld van juiste responsive praktijken. Zit vol verouderde ideeën, beetje de wordpress van de CSS

[pasmaskas]

Via deze website: http://webdesignerwall.com/ heb ik veel geleerd over responsive design.

Dit is een goede om het te leren: http://webdesignerwall.co...n-with-css3-media-queries

Het is makkelijker dan je denkt. Ik heb ook eerst Bootstrap en andere grids geprobeerd alleen als leek zie je vaak niet goed hoe het nou allemaal in elkaar zit. Ik ben toen zelf gaan stoeien er mee en heb toen een eigen grid gemaakt die ik op al mijn websites gebruik.

Voor mij werkte het om eerst informatie over Responsive Design, Media Queries, Viewport etc.. te lezen en begrijpen wat het doet met wat oefenen.

De links die n8n gepost heeft zijn ook goede om het te leren.

[ Voor 5% gewijzigd door pasmaskas op 16-05-2014 14:35 ]

[Misha]

n8n schreef op zaterdag 03 mei 2014 @ 17:03:
Lees artikelen op bradfrostweb.

http://bradfrostweb.com/blog/post/responsive-strategy/
http://bradfrostweb.com/b...-effective-media-queries/

Schrijft veel over responsive en modulair websesign en maakt ook nog eens sense

Brad Frost heeft ons bij Tweakers via zijn artikelen heel goed geholpen, vooral om de juiste mindset te krijgen. Bekijk ook eens Lukew.com. Die heeft erg nuttige artikelen, al is dat meer mobile breed dan specifiek Mobile web

[n8n]

Misha schreef op vrijdag 16 mei 2014 @ 18:40:
[...]


Brad Frost heeft ons bij Tweakers via zijn artikelen heel goed geholpen, vooral om de juiste mindset te krijgen. Bekijk ook eens Lukew.com. Die heeft erg nuttige artikelen, al is dat meer mobile breed dan specifiek Mobile web

Ik heb de front-end van het mobiele fok forum indertijd geschreven, toen was er nog een stuk minder moois qua uitleg en praktijkervaring voor handen.

Brad frost is wel een held qua mindset en hij kan ook nog eens zinvolle artikelen schrijven. Volgens mij had ik toen zelf webdesignerwall en alistapart waar ik met name kwam om artikelen te lezen.

[TheNephilim]

Misha schreef op vrijdag 16 mei 2014 @ 18:40:
[...]


Brad Frost heeft ons bij Tweakers via zijn artikelen heel goed geholpen, vooral om de juiste mindset te krijgen. Bekijk ook eens Lukew.com. Die heeft erg nuttige artikelen, al is dat meer mobile breed dan specifiek Mobile web

Interessant, ga ik ook eens even lezen!