• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Minimale resolutie webdesign

Status
Niet open voor verdere reacties.
E

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.359
Waarderingsscore
3
Hoi,

Ik heb een vraag m.b.t. de schermresoluties als het gaat om het ontwerpen van websites. Wat is momenteel de meest gangbare, kleinste resolutie (mobiele devices meetellen) waarmee je rekening zou moeten houden wanneer je een website gaat maken?

Tenx! :)
 
Mss heb je er iets aan om in Google Chrome, onder "meer hulpprogramma's" -> "hulpprogramma's voor webmasters" te kijken welke devices zij laten zien. Daar komen dan ook de resoluties bij. Even door het lijstje links boven lopen.
 
Laatst bewerkt door een moderator:
Jij bedoelt het lijstje in the 'Toggle Device Mode' en daar kijken welke resolutie het kleinst is? Ga er in elk geval eens naar kijken. Bedankt voor de suggestie.
 
Ja. Die bedoel ik.
Mss heb je hier iets aan: De bezoekers van mijn website:
Resolutions.jpg
Ook als ik een langere termijn neem, kom ik geen lagere resolutie tegen dan 320 dpi.
Wel uitsluitend Nederland
 
Laatst bewerkt door een moderator:
Hoi,

Wederom bedankt voor je reactie. Ik was via de tool van Google ook uitgekomen op die 320dpi. Dus dat ga ik vooralsnog even aanhouden als minimum voor een nieuw te ontwikkelen site.
 
Wat mij zelf opvalt is dat ondanks al die "grote" schermen de relatief lage resoluties nog het meeste gebruikt worden, in elk geval zeker niet verwaarloosd mogen worden. Ik neem aan dat je voor een responsive website gaat.
 
Vroeger was het allemaal stukken makkelijker. Websites hadden een resolutie van 800 en later 1024 pixels breed. Tegenwoordig is door de bomen het bos van uiteenlopende apparaten niet meer te zien en gebruiken we responsive en adaptive technologien die zich dynamisch aan het scherm aanpassen. In het kort komt het erop neer dat je met behulp van css 2 of 3 verschillende layouts maakt. Bijvoorbeeld 1 = alles onder 320 px, 2 = alles tussen 320 en 720px, en 3 = alles breder dan 720 pixels. Afhankelijk van de gebruikte browser/apparaat ziet de zoeker de best passende variant. Het is een compromis en voor iedere website gelden andere waarden maar dit is ondertussen wel een soort best practice.
 
Waarschijnlijk kan het nog beter (maar ik ben dan ook geen website ontwikkelaar), maar ik gebruik de volgende media queries:
@media only screen and (min-width: 768px) and (max-width:900px), only screen and (min-device-width: 768px) and (max-device-width:900px)
@media only screen and (min-width: 480px) and (max-width:768px), only screen and (min-device-width: 480px) and (max-device-width:768px)
@media only screen and (min-width: 320px) and (max-width: 480px), only screen and (min-device-width : 320px) and (max-device-width : 480px)
@media only screen and (min-width: 240px) and (max-width: 320px), only screen and (min-device-width : 240px) and (max-device-width : 320px)
Waarbij die laatste mss overbodig is.
 
Laatst bewerkt door een moderator:
Ik ga inderdaad een repsonsive website maken waarbij ik gebruik maak van enkele css-bestanden (in combinatie met css media queries > vergelijkbaar met de voorbeelden die Veng noemt). Mijn minimale breedte wordt 320px (en max rond de 1400px), maar ik lees in Poelsnip's voorbeeld dat hij een css noemt voor websites kleiner dan 320px. Komt die breedte nog veel voor dan, Poelsnip?

Waar ik tegenaanloop in de smallere weergaves, is dat het lastig is om bepaalde informatie die bij elkaar hoort (bijvoorbeeld een wedstrijdprogramma met tijden en teams) duidelijk/overzichtelijk weer te geven zonder daarbij al te veel af te wijken van de weergave die ik ook voor de bredere versies van de site wil gebruiken.
 
Laatst bewerkt door een moderator:
En dan hebben we het nog niet over alle eisen van "mobile friendly" die Google oplegt om in de ranking van zijn zoekmachine op een mobile mee te doen.
Toch ben ik redelijk tevreden over mijn geknutsel. Al mijn pagina's worden als mobile friendly gekwalificeerd, al vind ik zelf dat het lastig is mijn menu's te bedienen op een Samsung I9000
 
Die waarde 320 is zo uit het hoofd en zou best 360 kunnen zijn. Het beste beoordeel je dat aan de hand van de bezoekersstatistieken van je site. Het ging mij meer om de te volgen methode dan strikte waarden en aantal media queries.

Kleinere schermen vragen inderdaad creativiteit voor de weergave. Strikt genomen is responsive design (volgens mij) het op een andere plek en vorm tonen van dezelfde inhoud. Adaptive design heeft een andere benadering en toont onderdelen niet, of totaal anders afhankelijk van de gebruikte browser.
 
Laatst bewerkt door een moderator:
Poelsnip zei:
Kleinere schermen vragen inderdaad creativiteit voor de weergave. Strikt genomen is responsive design (volgens mij) het op een andere plek en vorm tonen van dezelfde inhoud. Adaptive design heeft een andere benadering en toont onderdelen niet, of totaal anders afhankelijk van de gebruikte browser.
Klik om te vergroten...

Daar zit nu vooral een stukje uitdaging. Hoe krijg ik de informatie (waar ik al niets meer van kan weglaten) goed weergegeven op de kleinere devices. Ga daar de komende tijd mee aan de slag.

Bedankt beiden voor de feedback dusver!
 
Ik weet natuurlijk niet wat je allemaal wilt, maar bij de juiste aanpak schaal je vrijwel je hele site. Mijn site (had ik hulp bij) is een jaar of drie geleden gemaakt voor 1024.
Daarna heb ik hem zelf aangepast dmv die media queries en nog wat zaken. De details ben ik echter al weer vergeten want ik heb al even niet meer aan de indeling gewerkt.
M.a.w. In elke resolutie ziet mijn site er hetzelfde uit. Alleen dat vooral mijn mainpage steeds smaller wordt.
 
Het wordt een site voor een vereniging. Qua opzet redelijk minimalistisch (header, content, sidebar, footer), maar met een aantal wat complexere zaken zoals het al genoemde wedstrijdprogramma. Het is niet mijn eerste site die ik ga maken, maar wel mijn eerste Wordpress-site en wil daarbij gelijk wat meer aansluiten bij de hedendaagse technieken en standaarden. Vandaar ook mijn vraag. Verder ben ik aan het kijken of ik volledig em wil gebruiken (en hoe realistisch dat is), etc..

Zou ik je site eens mogen zien?

Erick
 
Natuurlijk mag je mijn site zien. http://www.relatie-voeding-gedrag.nl/ (Staat overigens ook in mijn profiel)
Hij is gemaakt in asp.net. Dit omdat mijn kennis zei dat dat de veiligste omgeving was ivm met een aan te koppelen database (omdat ik ook nog de mogelijkheid wilde om reacties terug te krijgen).
Hoewel Wordpress mij ook aantrekkelijk lijkt voor een leek, want nu moet ik complexe software gebruiken (Microsoft Visual Studio 2010 met nog wat toeters en bellen), stap ik niet over omdat er iets in mijn site zit waarvan ik me afvraag of Wordpress dat ook biedt. Namelijk de opzet om de rechter marge mee te laten lopen met het middenstuk. M.a.w. zodra je een ander menu-item kiest, krijg je de daarbij horende rechter marge te zien. Midden gebied en rechtermarge zijn dus gekoppeld.
Nadeel van asp.net voor mij is dat ik er wel in kan aanpassen, nieuwe pagina's maken lukt ook nog goed, maar echte wijzigingen in de opzet kan ik zelf niet doen.
Als ik ooit de loterij win laat ik de site wel opnieuw door een professional maken:biggrin:. Ik denk dat de vormgeving/layout wel een beetje gedateerd begint te raken en ook lijken mij de teksten voor verbetering vatbaar. Vooral op communicatief gebied.
 
Laatst bewerkt door een moderator:
Ik heb de afgelopen jaren ook veel met asp.net gewerkt omdat ik op dat moment ook hulp kreeg van iemand die daar ervaring mee had en me dus goed zou kunnen helpen. Inmiddels heb ik ook wat php-ervaring opgedaan met Joomla en Wordpress en zie daar ook wel mogelijkheden liggen. Net als jij heb ik elementen in de site zitten die van asp omgezet moeten worden naar php. Microsoft Visual Studio 2010 gebruikt ik alleen om de sitemaps (die het menu aanstuurden/invulling gaven) te wijzigen, de andere dingen deed ik in Dreamweaver.

Jouw situatie, de rechterkolom die telkens inhoudelijk aansluit op je middenstuk, is ook te vertalen naar Wordpress. Je kunt namelijk van bepaalde informatie aangeven wanneer die wel/niet zichtbaar moeten zijn, bijvoorbeeld door de informatie te koppelen aan een categorie. Je site ziet er overigens fris en overzichtelijk uit. Eerste indruk.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan