Wat is de handigste en beste manier om onderscheid te maken tussen desktop en mobile site?
Nu heb ik iets kleins gemaakt en in de css gebruik gemaakt van
CSS
@media only screen and (max-device-width: 480px) {
body{
background-color:#FF0000;
font-family:arial;
}
}
Echter ik werk op Apple en daar kun je in Safari aangeven "ontwikkelingsmodus" zodat je kan kijken hoe het in andere browsers uitziet.
Als ik dit doe met de code hierboven werkt het niet omdat het scherm natuurlijk groter is dan 480px.
Facebook gebruikt ook een andere layout voor mobiel.
Alleen werken zei met een andere URL
"m.facebook.com"
Wat ik wil is dezelfde URL maar 2 layouts.
Maar wil niet het onderscheid maken in de CSS dmv @media.
Op Google had ik het bovenstaande gevonden over de vary header alleen weet ik niet hoe het precies werkt en zou graag feedback willen van iemand die mij opweg zou kunnen helpen.
Of maak het gewoon device/browser/resolutie onafhankelijk met media queries. Het gebruiken van meerdere layouts lijkt mij omslachtig(er), heb je ook het onderhoud (en niet enkel het bouwen) in je overweging voor het opzetten van meerdere layouts meegenomen?
Om terug te komen op je oorspronkelijke vraag: als je dus een flexibel ontwerp hebt hoéf je dit onderscheid niet te maken.
Ik heb twee ontwerpen gemaakt, desktop en een mobiele.
Ik maak dit onderscheid zodat mensen beter kunnen navigeren op hun mobiel device.
De desktopsite is hier niet geschikt voor en daarnaast moet de mobiele site compacter zijn.
Aangezien ik met niet goed thuis ben in php en/of htacces zou ik graag met browserdetectie een zet in de goede richting willen krijgen.
Nogmaals, tegenwoordig heb je een gigantische hoeveelheid van en diversiteit in apparaten waarbij de grens tussen "desktop" en "mobile" heel erg vaag is geworden (of simpelweg niet meer bestaat).
In plaats van het inzetten op specifieke apparaten, browsers of resoluties is het vaak een veel beter idee om een set algemene regels te hanteren zodat het simpelweg niet meer uitmaakt op welk apparaat, in welke browser of op welke resolutie je een site bekijkt!
Met bovenstaande code-insteek pas je ook een soort van inversie van principes toe. Het zou niet uit mogen maken welke browser iemand gebruikt (laten we IE6 even vergeten ;)). Een browser volgt de standaarden, dus zolang je je website opzet volgens deze standaarden zou deze (in theorie) altijd correct moeten renderen.
Met de ontwikkelingen van browsers, CSS en responsive design ben je eindelijk (voor een groot deel) verlost van allerlei afhankelijkheden en nu wil je deze weer opnieuw introduceren? Liever niet!
@Yoeri in hoeverre wijkt deze "mobiele" (wanneer is iets trouwens "mobiel"?) site af van de "desktop" site? Vervullen deze twee echt verschillende taken of bieden ze (compleet) verschillende diensten? In dat geval is het misschien gerechtvaardigd om daar twee aparte sites voor te maken, of je zou zelfs kunnen overwegen om voor de mobiele variant een app te maken. Anders: responsive design is your friend.
Ik zou ook voor een Responsive WebDesign kiezen. Maar dit betekent vaak dat je 'from scratch' moet beginnen met de layout van de site. Een snelle (en liefst tijdelijke) oplossing is om iets met de MobileDetect class die ik eerder in dit topic aanschreef te doen. Deze kan aan de hand van useragent prima achterhalen wat een mobile device of een desktop is.
get_browser() is bovendien ook niet op elk PHP-platform beschikbaar, dus zo'n class zal ik zeker aangrijpen.
Ik gebruik hem ook, maar RWD staat hier hoog op de lijst dat ik die class ga schrappen.
Maar weet iemand hoe grote webshops zoals bol.com en coolbleu en social media site Facebook dit doen?
Die maken een een smaller ontwerp, bijvoorbeeld webshops maken voor de mobiele site een schermgroot categorie menu.
Als je een user agent detectie hebt hoe implanteer ik dit dan goed op mijn site?
Je wilt weten of zij RWD of browserdetectie gebruiken? Resize je browers maar eens naar smaller formaat.
Als deze even smal is als op je telefoon, en hij ziet er hetzelfde uit... dan is het RWD
Als deze er anders uitziet... dan gebruiken ze een aparte site (en misschien een beetje RWD)
Yoeri Achterbergen op 20/11/2015 15:51:17
Als je een user agent detectie hebt hoe implanteer ik dit dan goed op mijn site?
Het ligt er aan hoe je je site gebouwd hebt. Maar een template-parser zou niet overbodig zijn. In mijn geval gebruik ik (nog) Smarty als templateparser. Hiermee houd je je clientside code (HTML, CSS, JS) gescheiden van je PHP-code, en kan je met variabelen en functies je data en loops uit je PHP-code gebruiken.
Dat scheelt weer een hoop dubbele PHP-code.
In mijn geval schakel ik over naar een andere templateset als er een mobile device is.
Het nadeel is wel dat ik dan dus twee layouts sta te beheren.