Responsive web design vraag

Hallo,

Ik moet voor een klant een website lay-out maken. Nu heb ik hem de lay-out gepresenteerd en kwam de vraag vanuit de klant of de website zich aanpast wanneer de website via tablet of een mobiele telefoon wordt bekeken. Aan mij is alleen de taak om voor het ontwerp te zorgen de bouw wordt uitbesteed.
Ik moet nu aan de klant reageren of dit mogelijk is.
Een website op mobiel formaat maken is geheel nieuw voor mij en ben toen gaan googlen en kwam al snel uit bij: Responsive web design.

Het is sowieso geen optie om een gehele nieuwe website erbij te maken voor mobiel, maar ik wil het via stylesheets doen.

Nu heb ik hierover een aantal vragen:
- Moet ik een speciale stylesheet erbij maken om hem mobiel goed te laten zien?
- Moet ik voor iedere device een aparte layout maken? (liggend en staand)

Alvast bedankt

Groeten,
Carla

je kan het niet geheel via stylesheets oplossen, er moet in je ontwerp natuurlijk rekening zijn gehouden met responsive web. Het gaat daarbij volledig om de verhoudingen. Voor zover ik weet moet hierbij geen aparte stylesheet zijn, maar eerder een stylesheet waarin het responsive deel mee wordt geprogrammeerd.

Er moet voor zover ik weet geen apart design worden gemaakt voor verschillende devices. Het doel is juist 1 design te hebben welke werkt op ieder formaat.

Ik denk dat je hierbij goed moet onthouden wat de verschillen zijn tussen mobile sites en een responsive webdesign, daar heb je volgens mij wat verwarringen in. Er zijn veel goede artikelen hierover te vinden op o.a. Smashingmagazine.

Beste Carla,

Een introductie over Responsive Webdesign:
http://css-tricks.com/video-screenca...ve-web-design/.

Verder zijn er veel gratis frameworks beschikbaar die zich al automatisch aanpassen, waarbij het ook relatief eenvoudig is om je eigen ontwerp te implementeren (zoals deze 1140 CSS grid).

Voor iedere device heb je "media queries", het is mogelijk dat bepaalde onderdelen zich aanpassen aan het formaat en/of geheel verdwijnen op bepaalde apparaten (zoals een sidebar die op een iPhone niet zichtbaar is).

Hopelijk heb je er iets aan.

Succes!

Je kunt er inderdaad aparte stylesheets voor gebruiken. Maar het kan ook in 1 bestand. Met max-width kun je in je css aangeven wat er vanaf die breedte moet gebeuren
Hier staan ook interessante links in: http://www.frankwatching.com/archive...jn-als-design/

Bedankt voor alle reacties.
Ik ben er veel wijzer van geworden en zal hiervan een mooi verslag schrijven voor de klant.

Mocht je nog een previeuw willen van een bekende website die dit ook sinds kort heeft ingevoerd: http://hyves.nl. Ook deze website heeft zich beperkt tot het algemene als de bezoeker zich met een tablet/telefoon navigeerd.

Vriendelijke groeten,
Bart Roelofs

@Bart als ik de browser verklein wordt de vormgeving van Hyves niet aangepast, maar krijg ik een horizontale scrollbalk