Select mobile site

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yoeri Achterbergen

Yoeri Achterbergen

19/11/2015 16:04:15
Quote Anchor link
Beste Leden,


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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
@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.

Hoe doet bijvoorbeeld bol.com dat?

Kan iemand mij een tip hierin geven?


Gr. Yoeri
 
PHP hulp

PHP hulp

29/09/2020 10:09:18
 
Thomas van den Heuvel

Thomas van den Heuvel

19/11/2015 16:06:13
Quote Anchor link
Je kunt het window toch zelf wel resizen naar een dergelijke afmeting?
 
Yoeri Achterbergen

Yoeri Achterbergen

19/11/2015 16:12:55
Quote Anchor link
Beste Thomas,


Nou ik wil eigenlijk een onderscheid maken tussen desktop en mobile.
Voor mobiel wil ik een andere layout maken en functies veranderen tegen over de desktop site.
grote site's maken hier gebruik van en ik zou graag willen weten wat er nu gebeurt.
 
- Ariën -
Beheerder

- Ariën -

19/11/2015 16:24:22
Quote Anchor link
Er zijn twee mogelijkheden:
- Zorg voor een goede responsive werking van je site d.m.v. CSS, en eventueel het gebruik van een grid-column-systeem zoals Bootstrap.
- Een aparte layout maken, waarbij je rekening houdende met useragent bepaalt wie vanaf een mobile device surft. Het nadeel hiervan is dat je twee layouts moet onderhouden en dus extra werkt hebt.
 
- SanThe -

- SanThe -

19/11/2015 16:26:02
Quote Anchor link
Wat Thomas zegt werkt gewoon.
Ikzelf gebruik er gewoon een mobieltje bij om te kijken.
 
Yoeri Achterbergen

Yoeri Achterbergen

19/11/2015 16:35:14
Quote Anchor link
Beste Ariën,


Via Goolge kwam ik uit op een dynamische website, hierbij blijft de URL het zelfde alleen de layout verschild per apparaat/useragent.
Ze hebben het hier over een "vary header" alleen is er geen duidelijke uitleg, heb jij of iemand anders hier ervaring mee?
 
Marthijn Buijs

Marthijn Buijs

19/11/2015 16:39:29
Quote Anchor link
Misschien moet je even de link geven waar je dat op zag.
Dan kunnen we wat daar staat beter uitleggen.
 
- SanThe -

- SanThe -

19/11/2015 16:40:07
 
- Ariën -
Beheerder

- Ariën -

19/11/2015 16:43:17
Quote Anchor link
Dan gebruiken ze een useragent-detectie, om de layout te bepalen. Hier staat meet over de Vary-header. Ikzelf gebruik(te) in mijn eigen CMS deze class:
http://mobiledetect.net/

Werkt ook wel lekker, maar responsive-ness vind ik toch beter. Waarom zou je functies op je telefoon willen bieden die je niet op een desktop-pc heb, of andersom?
 
Yoeri Achterbergen

Yoeri Achterbergen

19/11/2015 17:33:30
Quote Anchor link
Ik heb dat van Google doorgelezen maar begrijp niet heel goed hoe ik die vary header goed in elkaar zet.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
GET /page-1 HTTP/1.1
Host: webadres
(...rest of HTTP request headers...)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)
 
Thomas van den Heuvel

Thomas van den Heuvel

19/11/2015 19:19:50
Quote Anchor link
User agent detectie is toch terug in de tijd?

Was responsive webdesign niet juist bedoeld om de noodzaak om onderscheid te maken tussen verschillende browsers, devices en resoluties op te heffen?

Daarbij hielp het volgens mij ook enorm om "mobile first" te ontwikkelen. Als je je ontwerp zo niet hebt uitgebouwd is het mogelijk lastiger om deze met terugwerkende kracht mobiel-vriendelijk te maken. Maar dan moet je dus gewoon constateren dat het oorspronkelijke ontwerp hier niet op voorbereid was.
 
Yoeri Achterbergen

Yoeri Achterbergen

19/11/2015 19:33:43
Quote Anchor link
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.
 
- Ariën -
Beheerder

- Ariën -

19/11/2015 19:42:58
Quote Anchor link
Maar waarom twee layouts als ik mag vragen?
Met de useragent-detectie heb je al voldoende.
 
Thomas van den Heuvel

Thomas van den Heuvel

19/11/2015 21:31:23
Quote Anchor link
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.
 
Jop B

Jop B

20/11/2015 10:24:22
Quote Anchor link
Kan hij dan niet gebruik maken van een index file, codering php?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<?php

echo $_SERVER['HTTP_USER_AGENT'];

$browsertype = get_browser;
print_r($browsertype);
?>


en dan met een if else statement de juiste begin pagina aanroepen?
 
Yoeri Achterbergen

Yoeri Achterbergen

20/11/2015 14:26:44
Quote Anchor link
Zoiets is inderdaad wat ik bedoel.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<?php
If (desktop = desktop{
Geef desktop layout
} elseif (mobile = mobile){
geef mobiele layout
}
?>


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.
 
Thomas van den Heuvel

Thomas van den Heuvel

20/11/2015 14:40:51
Quote Anchor link
@Jop een user agent vertelt je niet alles.

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.
 
- Ariën -
Beheerder

- Ariën -

20/11/2015 15:05:35
Quote Anchor link
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.
 
Yoeri Achterbergen

Yoeri Achterbergen

20/11/2015 15:51:17
Quote Anchor link
Dan ga ik daar maar eens naar RWD kijken.

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?
 
- Ariën -
Beheerder

- Ariën -

20/11/2015 15:55:48
Quote Anchor link
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.
Gewijzigd op 20/11/2015 16:01:03 door - Ariën -
 
Jop B

Jop B

20/11/2015 17:14:58
Quote Anchor link
@yoeri


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$iphone
= strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

if ($iphone || $android || $palmpre || $ipod || $berry == true)
{

echo "hello mobile";
}
else{
echo "hello dekstop";
}

?>
 



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.