Tweakers introduceert responsive design

Na een openbètaperiode van een maand hebben we dinsdag de schakelaar omgezet; vanaf heden schaalt de website automatisch naar mobiele apparaten van allerlei formaten, voor een betere gebruikservaring.

Een kleine maand geleden kondigden we een open bèta aan voor het responsive design, waaraan we al enige maanden werkten. Op dinsdag hebben we met gepaste trots het responsive design voor iedereen standaard aangezet. In de afgelopen maand hebben bètatesters met veel enthousiasme gereageerd, werden er aardig wat bugs gerapporteerd en ook grotendeels verwerkt, en hebben we veel reacties gelezen met tips, trucs en requests. In deze .plan lichten we een en ander graag toe, zodat je meteen wegwijs bent zodra je het responsive design opent op je mobiele telefoon.

Device grades

Op Tweakers willen we in de toekomst vier verschillende beeldschermformaten onderscheiden, waarvan we er al drie in productie hebben. In de volksmond heten ze 'breakpoints'; intern hebben we ze wegens wat nalatenschap 'device grades' genoemd. Dit maakt zowel de interne als de externe communicatie eenvoudiger. In een later artikel gaan we hier dieper op in, maar voor nu is het handig te weten wanneer we bepaalde beeldschermformaten indelen in een device grade.

Device grade	Specificatie
A	Alle schermen gelijk aan of breder dan 1024 pixels
B	Alle schermen tussen de 767 en 1023 pixels breed*
C	Alle schermen tussen de 500 en de 767 pixels breed
D	Alle schermen smaller dan 499 pixels

*Grade B is momenteel nog niet in productie en nog niet beschikbaar

Voor de beeldvorming, met grade A richten we ons tot de traditionele desktop, laptop en grote (~10"-) tablets in landscape, met grade B tot grote tablets in portrait of kleine (~7"-) tablets in landscape, met grade C tot kleine tablets in portrait of grote (~5"-) smartphones in landscape en met grade D tot alles wat eronder zit. Het aantal inches en de genoemde apparaten staan hier alleen bij ter illustratie omdat het eigenlijk over device-onafhankelijke pixels gaat, maar via deze manier krijg je een beter beeld.

Navigatie

Doordat Tweakers een uitgebreide site is, is ook onze standaardnavigatie redelijk uitgebreid te noemen. Ons idee van een goed responsive design is dat je te allen tijde, ongeacht het apparaat dat je gebruikt of waar je ook bent, toegang moet hebben tot de volledige content. Daarom hebben we veel geëxperimenteerd met verschillende navigatiemethoden.

We zijn uitgekomen op een ouderwets vertrouwde navigatiebalk met twee 'verborgen side bars', ook wel hamburgermenu's of offcanvas-navigatie-elementen genoemd. Zo houden we alle navigatie toegankelijk zonder de content te veel in de weg te zitten. Ook kun je zo nog steeds vanaf iedere pagina direct naar onze verschillende bestemmingen, de zoekmachine, de tracker, je profielpagina's, en de direct messages en notifications.

Wie het gebruikt zal merken dat we geen navigatie aanbieden die blijft hangen aan de bovenkant van je scherm en ook geen kleine animatie hebben bij het oproepen van een navigatie. Dit hebben we bewust gedaan, omdat de ondersteuning hiervoor nog marginaal is. We willen liever dat zoveel mogelijk mensen goed gebruik kunnen maken van Tweakers en niet alleen de Tweaker die zich een high-end smartphone kan veroorloven. We verwachten dat we dergelijke features wel kunnen ondersteunen zodra de mobiele browsermarkt wat volwassener wordt.

Modereren en reageren op reacties

Een van de krachtigste punten van Tweakers bestaat uit jullie goed onderbouwde reacties. We hebben daarom extra veel tijd besteed aan het juist krijgen van een goede reactieweergave op de smartphone. De weergave van de reacties is niet voor niets een van de veelgehoorde klachten over onze native apps voor Android en iOS. Via je smartphone of kleine tablets kun je alles doen wat je ook op de normale site gewend bent. Je kunt zelf reageren op het artikel of op de reactie van een ander, je kunt filteren, sorteren en modereren. Mocht je niet geïnteresseerd zijn in een reactie of zelfs een complete thread, dan kun je deze in 1 keer volledig dichtklappen.

Zoekmachines, filters

Met Tweakers 7 hebben we de zoekmachines veel krachtiger gemaakt. Daarmee werd het vele malen makkelijker om gericht content te zoeken en terug te vinden. Als je Tweakers bezoekt vanaf je smartphone, heb je nog steeds dezelfde zoekmachine tot je beschikking. Het enige wat het niet gered heeft, is onze zogeheten 'quick search'. Dit is het voorbeeldvenster van je zoekmachine, waarbij we je alvast wat resultaten geven. Doordat het voorbeeldvenster een tikkeltje te hoog is, kwamen we in de problemen bij apparaten met een lage verticale resolutie.

Verder werkt de zoekmachine precies zo als je gewend bent. Zodra je een zoekopdracht gedaan hebt, kun je die verfijnen dankzij alle filteropties die we aanbieden. Ook hier hebben we veel geëxperimenteerd met verschillende interactiepatronen voor de filters. Een patroon dat we elders vaak tegenkwamen, was dat zodra een filteroptie is geselecteerd, direct verder wordt genavigeerd naar de gevonden resultaten. We weten echter dat jullie vaak veel meer dan één optie willen selecteren, dus dat was geen oplossing. We hebben dan ook een extra knop toegevoegd, die beschikbaar is na het filteren. Zo weet je ook als je op een trage verbinding zit wanneer het filteren voltooid is, weet je hoeveel resultaten je ongeveer hebt en heb je direct een link naar de zoekresultaten.

Het forum

Een van de drukst bezochte plekken van Tweakers is de Gathering of Tweakers. Al jaren wordt er gevraagd om een versie die goed toegankelijk is via de smartphone. Ook dit was een veelgehoorde requests voor onze native apps. Dankzij de technieken die een responsive design met zich meebrengt, is dit nu ook realiteit geworden. Voortaan kun je topics fatsoenlijk lezen, reacties posten, je eigen reactie bewerken, anderen citeren, direct naar de voor jou interessante, actieve topics navigeren en meer.

De enige feature die niet toegankelijk is, is topics koppelen aan entiteiten in onze database, zoals producten, merken, series en tags. De huidige tool hiervoor is niet geschikt voor gebruik op de smartphone. We hebben al wat ideeën hiervoor en hopen deze spoedig uit te kunnen voeren. Tot die tijd kun je in ieder geval naar hartelust meediscussiëren met de fijnste community van Nederland.

Scope

Net als bij ieder project hebben we ook bij ons responsive design een strakke scope gehanteerd. We wilden een Duke Nukem Forever voorkomen en vonden het belangrijk dat jullie er nu alvast gebruik van konden maken. Vandaar dat niet iedere pagina zich schaalt naar je smartphone of kleine tablet. Onze belangrijkste bestemmingen zijn echter wel gewoon toegankelijk.

Zo kun je gebruikmaken van een responsive frontpage, redactionele artikelen, user-productreviews, Pricewatch, Meuktracker, Video's en niet te vergeten: ons forum. We hebben zoveel mogelijk functionaliteit behouden, dus je kunt naar hartelust doen wat je gewend bent. Dit heeft wel tot gevolg dat je soms nog terecht kunt komen op de desktopvariant van de website, als je bijvoorbeeld je eigen of het profiel van een mede-tweaker bezoekt.

Extra gratis: Vraag & Aanbod

Doordat de openbètaperiode rustig verliep wat het aantal bugs betreft, bood het ons developmentteam kans om een veel bezocht siteonderdeel eveneens van een responsive-designjasje te voorzien. Met deze launch is ook Vraag & Aanbod grotendeels goed toegankelijk vanaf je smartphone of kleine tablet. Voortaan kun je heel eenvoudig, als je bijvoorbeeld in een winkel staat, even spieken wat het product tweedehands via een Tweaker kost. Natuurlijk pas nadat je de verkoper hebt gewezen op de goedkoopste aanbieder via de Pricewatch en zo mogelijk nog wat hebt afgedongen ;-)

Pin de site vast aan je startscherm

Wie Chrome for Android bèta op zijn Android smartphone heeft draaien, weet waarschijnlijk dat het mogelijk is om Tweakers toe te voegen aan je startscherm. We bieden hiervoor de benodigde visuals in de code aan. In de bètaperiode is echter gebleken dat Chrome for Android bèta niet altijd de juiste icoon wist te pakken. Het kan dus zijn dat je, als je deze experimentele feature gebruikt, niet de juiste icoon krijgt. Het is een kwestie van afwachten totdat Google de functie pusht naar productie en hopelijk in de stabiele versie bugvrij beschikbaar stelt.

Voor wie het alvast wil gebruiken kan eenvoudig via het menu de optie 'Toevoegen aan startscherm' selecteren. Vervolgens staat Tweakers op je startscherm. Als je nog niet Chrome for Android bèta hebt, dan kun je deze vanaf hier installeren.

Device grades forceren en weergaveopties

Omdat niet iedereen gediend is van een aangepaste website en sommigen een bepaalde weergave op een bepaald apparaat verkiezen, hebben we het mogelijk gemaakt om een weergave te forceren. Via weergaveopties kun je een bepaalde device grade forceren. Je kunt deze feature voortaan altijd bereiken via de footer.

Het is belangrijk om te weten dat dit werkt op basis van je sessie, wat betekent dat de geforceerde weergave werkt voor het specifieke apparaat waarop je hem instelt. Zo hebben we het mogelijk gemaakt om op je tablet alsnog de smartphoneweergave te tonen of, als je niet van vooruitgang houdt, het hele responsive design niet te gebruiken ;-)

We horen graag wat je ervan vindt

Tweakers was nooit zover gekomen zonder onze hechte community. We hebben nooit onder stoelen of banken geschoven hoe we jullie mening waarderen. We zijn daarom heel benieuwd wat je van ons responsive design vindt. Speciaal hiervoor hebben we een nieuwe categorie op ons forum geïntroduceerd, waarin je jouw mening kwijt kunt. We vernemen hier graag wat je fijn en wat je minder fijn vindt werken.

In de afgelopen maanden hebben we veel geleerd over responsive design, kleine beeldschermen en meer, en we hebben al ideeën voor verdere verbeteringen, maar hoe meer inzichten, hoe beter. Mocht je een foutje tegenkomen, dan vragen we je dit in de forumcategorie Responsive Design te rapporteren. Zo houden we alles centraal en kunnen we het sneller verwerken.

Nogmaals: testers bedankt!

Net als in de vorige .plan over ons responsive design willen we nogmaals alle bètatesters ontzettend bedanken voor hun hulp. Dit was het eerste project waarbij we onze community zo nauw hebben betrokken en dit heeft vanaf dag één zijn vruchten afgeworpen. We bedanken in het bijzonder Fledder2000, Elfjes, AllseeyinEye, Bosmonster, Freaky_Revolt, Filenox, hylke94, _David_ en Hooglander1 voor hun testwerk, creativiteit, behulpzaamheid en meer.

Reacties (364)

[Znorkus]

Mag er pleasepleaseplease een versie 'AA' komen voor de HD- schermen? Zodat wij met onze 24 / 27/ 30 inch schermen niet de 1024*768 versie voorgeschoteld krijgen die meer thuishoort op een 15 inch CRT-tje van een decennium geleden? Cool dat jullie rekening houden met de kleinere devices, maar jullie lijken te zijn vergeten rekening te houden met de grotere beeldschermen, die toch vaak verkocht worden. Wie heeft er nog niet (minstens) een 23'' full HD? Gebruik die ruimte plz, dit is een infosite. Ik zit thuis naar mijn tracker te kijken waar de zinnen zijn afgekapt omdat er te weinig ruimte is, terwijl links en rechts van de tracker een halve meter wit scherm is. Benut de breedte aub van hedendaagse breedbeeldschermen. Tweakers is geen blog, toch Ik wil zeg maar een soort vliegtuigcockpit voor me zien, met zoveel mogelijk informatie in 1 oogopslag beschikbaar.

[Reactie gewijzigd door Znorkus op 22 juli 2024 19:43]

[Inspector]

We gaan voor de toekomst eens goed kijken of dit inderdaad een valide usecase is. Met de omkomst van UHD op grote TV's en de steeds groter wordende monitors lijkt het een logische stap en ik sluit dus zeker niet uit dat er een "AA" grade komt. Echter zullen we hier eerst goed onderzoek naar moeten doen, kijken wat de meerwaarde is, hoeveel tijd dit kost en wat het opleverd. Daarnaast moet als deze grade er komt de content zo logisch en optimaal mogelijk opgedeeld worden. Er is dus nog een lange weg te gaan willen we dit gaan realiseren

[afterburn]

Als het goed is, kunnen jullie uit de logs zo kijken welke resolutie mensen gebruiken. Ook kunnen jullie, wanneer jullie dat willen, zonder veel moeite afvangen wat de grootte van het venster van de browser is.

Het lijkt me dan ook dat jullie precies weten hoe of wat en zoveel onderzoek zou er dan ook niet nodig moeten zijn.

Ik zit zelf ook met een grijze balk van 2-3cm aan beide kanten van het venster, en gebruik mijn browser dan zelfs nog windowed. Ik vind het nieuwe design heel mooi, maar op een site als tweakers waar het grootste deel van de bezoekers waarschijnlijk met een groot scherm werkt een gemiste kans om zich te onderscheiden van de massa: zoveel sites zijn er (helaas) niet die met hun design rekening houden met grote schermen.

Het argument van onderzoek vind ik wat te makkelijk, gezien het feit dat alle data beschikbaar is in de webserver statistieken. Het werk zit (uiteraard) in het ontwerpen en bouwen, en dat wil ik dan ook absoluut niet bagetaliseren, maar of een dergelijke actie zin heeft, dat kun je zo nakijken.

[Inspector]

Als het goed is, kunnen jullie uit de logs zo kijken welke resolutie mensen gebruiken. Ook kunnen jullie, wanneer jullie dat willen, zonder veel moeite afvangen wat de grootte van het venster van de browser is.

Je bent hier wel heel erg kort door de bocht! Ja, wij kunnen uit de logs analytics tools opmaken hoeveel bezoekers er met een dergelijke resolutie Tweakers bezoeken. Ik weet niet of je wel eens een onderzoek hebt geschreven maar daarmee is de kous verre van af. Het is niet simpelweg hoe groot die groep is en of die groep er is maar ook hoe we die het beste in hun behoefte kunnen voorzien. Hebben we het over TV's waarbij de gebruiker ver van het scherm zit, of hebben we het over grote monitors, waar gebruikers relatief dicht op zitten? Hoe delen we de content zo logisch mogelijk in? wat heeft de hoogste conversie? Wat werkt het lekkerste op touch en non-touch screens, welke secties worden veel op dergelijke devices bezocht en welke weinig? Waar trekken we dan de scope voor deze uitbreiding? Dit moet allemaal bekeken en beargumenteerd worden om uberhaupt aan dev tijd te komen.

Het werk zit (uiteraard) in het ontwerpen en bouwen, en dat wil ik dan ook absoluut niet bagetaliseren, maar of een dergelijke actie zin heeft, dat kun je zo nakijken.

Het werk zit hem zeker ook in het bouwen en juist daarom is een gedegen onderzoek, inclusief haalbaarheid, verwachte conversie etc. belangrijk.

[Rafe]

Hoeveel gebruikers er eventueel mee gebaat zijn is maar één onderdeel van zo'n onderzoek. Dus nee, 'alle data' is niet beschikbaar in de stats.

[Znorkus]

Gaaf Inspector, thanks voor de reactie!
Tsja, als het langs de maatstaven van meerwaarde en kosten/baten gelegd gaat worden, dan is het een kansloze onderneming. Altijd zal blijken dat je gewoon op een facebook-pagina moet lijken om de meeste bezoekers binnen te harken, neem ik aan. De massa van tegenwoordig is niet gesteld op een hoge informatiedichtheid. De enige logische reden om zo'n rare streek uit te halen is dat het onderdeel is van jullie identiteit, jullie roots als nerds ;-)

[Inspector]

Of het een kansloze onderneming is weet ik zo net nog niet, we hebben het onderzoek namelijk nog niet gedaan Hetzelfde werd jaren geleden gezegd m.b.t. optimalisaeren voor mobile en kijk nu eens. Ik zou het zelf i.i.g. ook erg handig vinden en hoop dat die meerwaarde zichzelf zal presenteren met de opkomst van dergelijke devices. Hoe dan ook, het blijft voorlopig even toekomstperspectief.

[Smen]

Ik 'second' graag Znorkus zijn input voor wat betreft een andere lay-out voor grotere beeldschermen.

Als "meer informatie' op een groot scherm te lastig blijkt, is evenveel informatie anders weergegeven wat mij betreft ook een goede optie.

Persoonlijk was ik onder de indruk van deze lay-out. Zeer prettig op een 27 inch monitor met een resolutie van 2560 x 1440px.

[dusty-2011]

Die horizontale layout vind ik dus echt niks.

[Junketsu]

Die gerefereerde layout is puur horizontaal en dus dan weer totaal niet handig voor lage resoluties.

[Bosmonster]

Tip: browse niet fullscreen op Full HD

[afterburn]

Wat niet gemeld staat in de post: ook op de iPhone kun je (iig met iOS 7) een icoontje aanmaken op je homescreen: tap op het icoontje om een link door te sturen (middelste in de bar aan de onderkant van het scherm) en tap op de button 'add to homescreen'. Hij staat dan gelijk op je homescreen, met het juiste icoon en kun je hem eventueel ook in een folder plaatsen.

[Misha]

Dat klopt, afterburn!

[rens-br]

Voor de Android devices (zoals mijn HTC Desire S & HTC HD2) waarop Chrome niet goed draait kun je website ook vastpinnen met de standaard browser. Werkt iets omslachtiger, maar werkt verder wel prima:

Browser --> Surfen naar tweakers.net --> Menu knop (of de drie bollejes) --> Opslaan in bladwijzers --> Label kiezen en bij Toevoegen aan, kiezen voor startscherm

Je hebt nu ook een tweakers.net link op je startscherm staan inclusief mooi icoontje

Voor de rest vind ik het responsive design super! Gebruik het al vanaf de closed beta, stuk mooier en fijner om reacties te lezen / modereren op je telefoon.

[treinentom]

Goed bezig! Ik gebruikte 'm al, maar fijn dat nu iedereen hem heeft.

Overigens, het is ook mogelijk om met de stock android browser Tweakers toe te voegen aan je startscherm, rechtsboven Instellingen -> Bladwijzers -> tweakers.net toevoegen (als je dat nog niet had ) -> bladwijzer indrukken -> op startscherm plaatsen. weliswaar pakt ie dan een ander icoon, maar het werkt feilloos!

[Anoniem: 256386]

Dat heeft lang geduurd.
Een aantal jaar geleden had ik al aan tweakers gemeld dat een tech site een mobiele site moest hebben. Alle concurrenten hadden sinds de opkomst van de smartphone het al vrijwel meteen.

Naar mijn mening is zoiets altijd beter dan een aparte app ontwikkelen.

[Reactie gewijzigd door Anoniem: 256386 op 22 juli 2024 19:43]

[Femme]

We hebben al sinds mensenheugenis tweakers.mobi en we hebben apps voor iOS en Android. Vanwege de omvang van de site is het ondoenlijk om alle functionaliteit ook in een mobiele site en mobiele apps aan te bieden. Die boden daardoor altijd een verschraalde versie van de website. Dankzij responsive kunnen we een pagina (onder een enkele url, dus niet op een aparte mobiele site) optimaal weergeven op een grote verscheidenheid aan devices zodat we geen mobiele site of apps meer nodig hebben.

[Reactie gewijzigd door Femme op 22 juli 2024 19:43]

[Devour]

Femme, complimenten voor het responsive design!
Ik zit zelf ook in de software ontwikkeling en in gesprekken hierover komt het kostenaspect om meerdere interfaces te onderhouden ook vaak naar boven. Heeft dit bij jullie ook gespeeld? En welke afwegingen hebben jullie gemaakt? Hoe gaan jullie met testen om? Geautomatiseerd?

[Femme]

Kosten en devtijd zijn belangrijke factoren geweest om te kiezen voor een responsive website in plaats van native apps. De native apps zullen uitgefaseerd worden. Voor contentsites die hun inkomsten niet direct verdienen met verkopen uit de app is het ontwikkelen van native apps voor meerdere platformen en devicetypen niet rendabel te krijgen, tenzij je een hele grote speler bent.

[ZpAz]

Dit is inderdaad een stuk beter. Die apps waren een slap aftreksel van wat ze hadden moeten zijn. Met zo'n website als deze nu heb je ook geen app meer nodig.

[Inspector]

Het is niet alleen de kosten die meespelen bij het onderhouden van meerdere interfaces maar ook de devtijd, fragmentatie, kennis (meerdere platformen == meerdere talen) en toekomstperspectief. Mocht Ubuntu touch of Firefox Os nu ineens een grote speler worden zouden we ook daar Apps voor moeten gaan ontwikkellen, iets dat nog meer tijd, effort en kennis kost. Nu zijn deze ook alvast gedekt. Verder wil je niet dat je codebase gedupliceerd word naar allerhande apps. Een wijziging aan dewebsite moet dan ook op die andere platformen doorgevoerd worden en dat kost wederom tijd, geld en kennis.

Het testen doen we (nog) niet geautomatiseerd. dit als je doelt op Selenium tests. We gebruiken wel Unit testing aan de PHP en Java kant maar met RWD hebben we daar natuurlijk weinig mee te maken. Op dit moment test ons product team met een groot scala aan devices al onze aanpassingen aan het responsive design. Dit stukje is wel aangenamer gemaakt door het gebruik van Adobe Edge Inspect waardoor met 1 druk op de knop alle devices gerefreshed worden en dus een duidelijk beeld ontstaat hoe de wijziging zich weerhoud op allerhande devices.

[Devour]

Dank voor je reactie. Ik doelde inderdaad op tools als Selenium. Uit ervaring weet ik hoe lastig het is om het op alle browsers, platformen en resoluties het er goed uit te laten zien. Veel mensen onderschatten dit als ze met RWD aan de slag gaan.

Adobe Edge is inderdaad handig. Gebruiken jullie ook Browserstack of iets dergelijks om de verschillende browsers en platformen snel mee te testen?

[Misha]

Nee, we gebruiken geen Browserstack. Daar is niet een expliciete reden voor. We werken allemaal met verschillende os`en op het werk (ik OSX, de ander weer Linux en een ander weer Windows) en meestal zit er wel diversiteit qua geïnstalleerde browsers in. Tot nu toe komen we daar prima mee uit de voeten

[ATS]

Er wás dan ook al jaren een mobile site.

[Misha]

Sssst. Dat was ons best kept secret (en hopeloos verouderd)

[Anoniem: 256386]

Dat wist ik, maar zoals Misha zelf aangaf was het verouderd. Ik gebruikte de normale site op mijn Note. Dit leest uiteraard een stuk prettiger

[wildewouter]

Het is alleen geen mobiele site. Dit is een website die zich aanpast aan de grote van je scherm. Dat betekent dus ook dat als je jouw browser venster verkleint de website ook netjes mee schaalt.

[Misha]

Gelukkig hebben we dan het licht gezien, he

[Zenomyscus]

Steeds vaker krijgen de nieuwe toestellen beeldresoluties van bijvoorbeeld 1920x1080 pixels. Wordt daar nog rekening mee gehouden of worden op deze toestellen de desktopversie getoond? Is het niet fijner te kijken naar het aantal inches van het beeldscherm (als dat mogelijk is..)?

[Misha]

Ja, daar word rekening mee gehouden. Als je bijvoorbeeld op de Nexus 5, die ik juist ook als voorbeeld heb gebruikt, naar tweakers gaat, dan krijg je grade D in portrait en grade C in landscape.

[Zenomyscus]

Het aantal inches en de genoemde apparaten staan hier alleen bij ter illustratie omdat het eigenlijk over device-onafhankelijke pixels gaat, maar via deze manier krijg je een beter beeld.

Hoe hebben jullie hier dan rekening mee gehouden als ik vragen mag?

[Misha]

Zoals ik zeg staat het er puur ter illustratie. Zo kunnen de wat minder technisch onderlegde personen ook een beeld vormen van wat er gaande is. We gebruiken gewoon net als anderen media queries voor het daadwerkelijke werk, maar leg dat maar eens in een paar zinnen uit voor de n00bs

[Zenomyscus]

Ik vind het namelijk zeer interessant aangezien ik zelf vaak responsive layouts maken die (nog) niet kijken naar het aantal inches van het scherm.

Categorie C
media="(max-width: 767px),(max-device-width: 767px) and (orientation: portrait),(max-device-width: 499px) and (orientation: landscape)"

Categorie D
media="(max-width: 499px),(max-device-width: 499px) and (orientation: portrait)"

Hoe komt een Nexus 5 met 1920x1080 pixels dan op categorie D uit? Ik voel me nu ook wel een n00b door dit te vragen

[Misha]

We gaan hier later een volledig achtergrondartikel over schrijven. Nog even geduld

[Elfjes]

Kort atwoord: je device geeft een ander aantal pixels aan de css door dan dat je fysiek hebt, voor de nexus 5 is dat een factor 2.5 of 3 minder oid

[DLGandalf]

dus er zit nog een vertaal slag tussen wat min of meer de dpi uitrekent? Zou je de formule die jullie gebruiken kunnen toelichten?

[dutchgio]

ik heb gebruik mogen maken van de beta maar dat nauwelijks tot niet gedaan.
punt is; op een smartphone is het openen van een app nou eenmaal veel makkelijker en logischer dan een tabblad in je browser.
de stap naar een app die volgens de richtlijnen van Google(op Android) en Apple(op iOS) wordt gemaakt met bijvoorbeeld van Android het welbekende BBQ-lijst aan de linkerkant van het scherm zie ik eerder de meerwaarde van in, want de huidige app is inderdaad verouderd.
maar ik zie een responsive website niet als vervanging daarvan,...

[Femme]

Elk uur dat we besteden aan het dupliceren van functionaliteit in een native app kunnen we niet besteden aan het verbeteren van de website. Zelfs het onderhouden van twee smartphone apps met een beperkte functionaliteit is al moeilijk gebleken laat staan dat we apps kunnen ontwikkelen waarin de functionaliteit uit al onze kernbestemmingen aanwezig is. Een responsive design maakt het wel mogelijk om bijna de gehele site goed aan te bieden op verschillende platformen en devices.

Of je een app laagdrempeliger vindt in gebruik dan een website hangt af van je gewoonte. Als ik tijd aan het verdrijven ben op mijn smartphon zit ik altijd in de browser. Het switchen naar een andere site vind ik minder moeite dan een andere app opzoeken.

[Reactie gewijzigd door Femme op 22 juli 2024 19:43]

[tweaker2010]

Logische keuze, die vooral vanuit het kosten oogpunt begrijpelijk is. Echter zullen nu veel tweakers op hun smartphone via een aparte snelkoppeling op hun homescreen een bezoek brengen aan deze responsive site, deze handeling verschilt niet zoveel met het opstarten van een losse app.

[Reactie gewijzigd door tweaker2010 op 22 juli 2024 19:43]

[luke22]

kost dit niet veel meer internet met 3G dan als je gewoon artikels opent in de tweakers app op bijvoorbeeld IOS? omdat je telkens opnieuw de volledige site met alles erop binnenhaalt en de app alleen de artikels pakt?

[Inspector]

Ja, het kost meer data, dit is echter relatief. Tweakers is sowieso al erg begaan met de snelheid waarop de frontpage laad en dit is mede te danken aan alle optimalisaties aan de bestandsgrootte. Tweakers is dus al vrij klein. Het neem wel degelijk meer dataverkeer voor zijn rekening dan simpelweg een json feed met data zoals dat bij een app het geval is. Dat dit iedere keer opnieuw geladen moet worden is echter niet correct. Je mobile browser heeft gewoon zijn eigen caching en het meeste zal dus, na een keer laden simpelweg uit je cache getrokken worden. Er is dus een verschil kwa data maar deze is minimaal.

[SannrHerr]

Responsive, reschmonsive.

Responsive/mobiele sites vind ik nog steeds overbodig. Ik heb een scherm met een HD resolutie (Nokia Lumia 920) en wil dan ook van de volledige site gebruik kunnen maken.

Ik snap die tegenstrijdige trend niet helemaal. Als ik alleen mobiele websites zou willen gebruiken, zou een resolutie van 800x840 genoeg zijn.

[Inspector]

Dat de resolutie beschikbaar is wil niet zeggen dat de beste optie dan altijd is om alles 1:1 weer te geven. Het fijne in mijn optiek aan een responsive design is dat het er op een highres smartphone wel allemaal scherp en helder uitziet en dus erg fijn leest maar niet dat de fonts dermate klein zijn om alles in te moeten zoomen en constant te hoeven pannen. De trent om dus voor aangepaste interfaces op mobieltjes te gaan is in mijn ogen volledig terecht! Het is scherp, overzichtelijk, leesbaar en werkt (voor de meeste blijkbaar) optimaal. Resolutie is dus niet zo eendrachtig als jij hier schetst. Hoe dan ook, smaak is subjectief en vandaar de voorkeur opties in de footer. Wie weet ga je het in de toekomst nog eens waarderen en dan is de optie i.i.g. toegankelijk

[Anoniem: 457607]

Volgens mij begrijp jij niet het verschil tussen een mobiele site en een responsive site.

[SannrHerr]

Jawel en ik vind beide overbodig. De resolutie van mijn vorige telefoon was met 800x480, naar mijn mening, al hoog genoeg om sites volledig weer te geven.

Mobiele sites zijn dankzij een fatsoenlijk responsive design gelukkig overbodig, maar nog liever maak ik zelf uit hoe ik een website bekijk. Ik kies op mijn telefoon niet voor niets voor 'desktop weergave'.

[Zwijntjesdrecht]

Zijkant / sidebar is opeens weg?

//edit

Nevermind, heb het alweer kunnen herstellen (in weergave opties). Schijnbaar werkt autodetectie niet feiloos?

[Reactie gewijzigd door Zwijntjesdrecht op 22 juli 2024 19:43]

[Misha]

Aan de tracker hebben we niets gewijzigd. De tracker is wel gewoon beschikbaar op de smartphone, zoals je ook in de afbeeldingen kunt zien

[Caelorum]

Mja, met IE11 zodra je verder inzoomt dan 100% gaat de balk weg en dit op een 24" 1920x1200 scherm... Forceren van "Grote schermen" verhelpt het problem wel overigens.

[Misha]

Het lastige aan zoomen is dat de uitwerking nogal onvoorspelbaar is. Als het goed is zou op een gegeven moment ons responsive design moeten intreden, domweg omdat er minder schermruimte beschikbaar is. Maar ik heb ook een keer vernomen dat er niets gebeurt. Voor dergelijke situaties (eigenlijk echte randscenario's) hebben we dus Weergaveopties in het leven geroepen.

[BvZwolle]

Als ik op de iPad 4 op landscapemodus naar www.tweakers.net in Safari ga, pas hij het beeld niet automatisch aan de verhoudingen van de iPad aan.
Is dat bekend, of heb ik het bovenstaande verhaal verkeerd begrepen?

[Misha]

De iPad 4 in landscape krijgt voorlopig graden A, wat gewoon de reguliere website is

[CH4OS]

En wat voor grades krijgen smartphones met 1080p resolutie dan, zoals de SGS4 en de Nexus 5 bijvoorbeeld?

[Inspector]

Gewoon D. Deze devices geven namelijk software pixels door net zoals "retina" schermen waardoor ze effectief als mobile herkend worden.

[Caelorum]

Het punt is dus juist dat bij 105% al meteen de linker balk verdwijnt ook al is er nog meer dan 200px witruimte in de breedte..
Niet dat het super erg is ofzo en ik snap dat het lastig is
Om even voorbeeld te geven. Nu ik heb ingezoomd op 125% heb ik nog steeds genoeg ruimte voor die balk + minstens 50px witruimte.

[Reactie gewijzigd door Caelorum op 22 juli 2024 19:43]

[Phoenix_the_II]

Dank u wel voor de link naar de forceren van desktop weergave link! Waarom is deze afschuwelijk irritante update toch weer doorheen gedrukt?

Maar goed, nu kan ik iig nog doormiddel van forceren van een volledige t.net gebruik maken op een browser schermpje die op de helft van mijn scherm staat...

Waarom is dit nu weer -1? Het is gewoon een reactie ontopic!

[Reactie gewijzigd door Phoenix_the_II op 22 juli 2024 19:43]

[Blokker_1999]

Omdat stilstaan achteruit gaan is? Bij elke verandering zal er altijd een kleine groep zijn die niet tevreden is over de wijzigingen, dat wil dan niet zeggen dat je helemaal niets meer moet veranderen. Men kan ook geen 35 verschillende versies van een site gaan ondersteunen. Dit design is er gekomen na een lang ontwikkeltraject en een open beta (die ook aangekondigd is geweest) waarbij iedereen dus zijn/haar feedback kon geven.

[Anoniem: 237962]

Jij vindt dat stilstand, en de desktopgebruiker (ja ze zijn er nog), vindt het irritant dat hem een op notabene Tweakers.net een mobieltjes georiënteerde website door de strot wordt geduwt.

Niet elke vernieuwing is een verbetering, maar dat lijkt er bij sommigen niet in te gaan.

Ze hadden ook gewoon net als bij bijvoorbeeld AD.nl voor zowel een mobiele als een desktop site kunnen opteren, waarmee je iedereen tevreden houdt. Nu weet ik dat het al jaren aan het afbreken is, maar Tweakers.net was van oorsprong toch echt een PC site, en de meeste gebruikers waren/zijn desktopgebruikers. Een beetje respect naar het publiek dat de site heeft geholpen groot te worden mag wel vind ik. En dat had je kunnen doen door de desktopversie in stand te houden.

[Akufen]

Het is juist heel logisch dat een site zoals tweakers meegaat met zijn tijd. Het is er het perfecte publiek voor, en het aantal bezoekers via mobile devices is ongetwijfeld hoger dan dat van desktop bezoeken.

Bovendien zie ik niet goed in hoe er iets door onze strot werd geduwd met deze update. Ik bezoek momenteel via desktop en volgens mij is er niets of weinig aangepast. Dus in principe is er voor desktopgebruikers niets veranderd, en hebben mobiele gebruikers een beter functionerende website en aangenamere ervaring. Ik begrijp niet hoe je daar frustratie uit kunt putten.

Het enige wat ik mij kan inbeelden is dat je gewend bent in een klein venster te werken, en dus de mobiele versie krijgt. Wat ook weer gemakkelijk op te lossen is door de instelling te wijzigen.

Om op je suggestie om "een andere site" te maken in te gaan… naast het uitzicht is er in de meeste gevallen geen groot verschil tussen de mobiele versie en de desktopwebsite. Meestal zijn de verschillen oppervlakkig (CSS) in combinatie met optimalisatie voor bandbreedte (afbeeldingen en javascript.)
Wat jij ervaart als "andere website", is niet meer dan een andere manier van aanbieden. Sommige websites detecteren je resolutie of user-agent en passen naargelang de layout aan, anderen laten de desktop-versie zien tot je expliciet naar m.ad.nl gaat.

Ongeacht welke optie je kiest, je zal altijd voor en nadelen hebben en een aantal mensen dat liever b dan a ziet. Tweakers heeft hier de gulden middenweg genomen door niets te veranderen voor oude gebruikers, automatisch te optimaliseren voor "nieuwe gebruikers" met daarnaast de mogelijkheid om manueel te kiezen mocht dit je niet bevallen.

Lijkt mij eerlijk gezegd de optimale route.

[Blokker_1999]

Ik ben sinds de open beta overgestapt op het responsive design en ik moet zeggen dat ik uiterlijk zeer weinig veranderingen zijn. Ja ze zijn er, maar ze zijn redelijk subtiel te noemen. Dat de update belangrijker is voor mobiele browsers kan zijn, maar op de desktop is er niet veel veranderd.

En T.net kiest ervoor om 1 enkele site te bouwen die meeschaald met het gebruikte apparaat zodat ze ook maar 1 site te onderhouden hebben ipv 2 of meerdere sites en om gebruikers op die manier een consistente gebruikerservaring te geven op alle platformen.

[Polbeer91]

Die versie is er toch nog gewoon? Op een desktop ziet de site er precies hetzelfde uit als een jaar terug. Alleen als ik m'n window op een half scherm zet en meer dan 125 procent zoom, krijg ik een andere versie, wil ik dit niet dan zet ik dit uit. Ik zie eerlijk gezegd werkelijk niet wat het probleem is.

[wimdezoveelste]

Ik ben ook blij dat er de optie is om de desktopversie te forceren op mijn mobieltje. Ik gebruik hem altijd in landscape mode als ik erop internet en vind de desktopversie dan veel fijner en vooral veel overzichtelijker dan de mobile variant.

[vdvoort]

Waarom is dit nu weer -1? Het is gewoon een reactie ontopic!

Omdat men veelal het moderatie systeem niet gebruikt zoals het zou moeten. De +1 en -1 worden gezien als een gradatie of men de reactie kan waarderen of niet. Aangezien je Tweakers.net bekritiseerd door te zeuren reageren over het forceren van deze afschuwelijk irritante update geeft men je een -1. Puur omdat ze het niet met je eens zijn. Maar ik ga er een beetje vanuit dat je dit zelf ook wel snapt.

Kortom, je reactie valt bij velen niet in goede aarde en het moderatie systeem wordt niet goed gebruikt.

[Zwijntjesdrecht]

Zit achter een PC en niet op mijn smartphone.
Maar maakt niet, ik heb het weer terug aan de praat gekregen d.m.v. de weergave opties.

Bedankt voor de reply terug.

[himlims_]

smartphon weergaven vind ik een ramp; zoom/focus op artikel pas eigenlijk nooit in kaders van scherm; continue horizontaal scrollen, zooooo fucking annoying

kan men ook de oude gebruiken

[Misha]

Vreemd dat je horizontaal moet scrollen. Kun je voor me checken bij Weergaveopties of deze op 'Automatisch' bij je staat?

[Ample Energy]

En wat zou ik moeten kiezen? Tweakers op 19" 1440 x 900 via Pale Moon gaat perfect, maar op m'n Lumia 920 krijg ik met zowel UC Browser als IE alleen een grijs scherm.
Hij is nu geforceerd naar 8", maar dat ziet er op de desktop niet uit. Werkt op m'n telefoon overigens wel erg leuk: kan alle knopjes gebruiken

Edit: Ik heb te vroeg gezeurd, sorry! Het werkt nu prachtig op beide apparaten.

[Reactie gewijzigd door Ample Energy op 22 juli 2024 19:43]

[Misha]

Dat was een bugje die we hebben opgelost

[himlims_]

+1

handmatig gecorrigeerd naar gewenste optie; nu niet meer horizontaal scrollen

[Carlos0_0]

Er is bij mij niks veranderd op me pc alleen maar dat icoontje als je op iemands bericht reageert, ik heb ook nog even met een andere browser gekeken precies het zelde nog.

Jammer site in plaats van app ik heb liever apps dan iedere keer me browser te openen, maar evem gekeken werkte wel goed.

[LopendeVogel]

Ik vind het (nog niet) prettig, ik hou van veel vernieuwingen maar als ik kramp in me duim wil door te scrollen open ik de tweaker app wel die ik allang geleden verwijdert heb om die reden, nu begint de site op me 5s er akelig hetzelfde uit te zien.

Ik ben er dus totaal niet over te spreken, jammer.

[Misha]

Dan forceer je via Weergave opties toch een andere? Simpel opgelost

[maarte997]

Ik kan op een Lumia 800 niets wijzigen... Ik krijg mijn beeld, zie tekst (dat laden duurt trouwens écht lang, hij loopt contstant achter op het scrollen, dan spreek ik over seconden, wat vroeg helemaal niet het geval was). Ik zou het dus willen uitschakelen, maar dit lukt niet.

[Misha]

dat kan gewoon via deze pagina

http://tweakers.net/devicedetect/

[maarte997]

Bedankt. Maar het is toch niet normaal dat de bedoelde weergave niet werkt?

[Misha]

Nee, dat hoort gewoon te gaan. Ik ga het morgen nader onderzoeken

[Only]

Hier ook wat problemen met de standaard weergave..op me telefoon krijg ik nu standaard rare grote weergave .. terwijl ik een htc one gebruik met 1080p schermpje op chrome..genoeg ruimte voor de normale weergave lijkt me..normaal als ik al een mobielachtige site voorgeschoteld krijg druk ik op de browser op desktopweergave opvragen..maar als ik dat nu doe veranderd er niets en blijft die rare weergave..

[Chrotenise]

Moet je dus in je instellingen een andere vormfactor kiezen, zoals staat beschreven in het artikel.

[Only]

Mja..dan schiet het toch juist zijn doel voorbij? Hij moet toch automatisch goed schalen..dat is de bedoeling..heb ook nog andere devices...

[Reactie gewijzigd door Only op 22 juli 2024 19:43]

[Chrotenise]

"" Het is belangrijk om te weten dat dit werkt op basis van je sessie, wat betekent dat de geforceerde weergave werkt voor het specifieke apparaat waarop je hem instelt. Zo hebben we het mogelijk gemaakt om op je tablet alsnog de smartphoneweergave te tonen of, als je niet van vooruitgang houdt, het hele responsive design niet te gebruiken ;-) ""

Het klinkt alsof je standaard naar smartphone weergave gezet wordt. Als je dat te klein vindt en graag een andere (grotere) weergave wilt hebben, kan je dat gewoon doen.

[Reactie gewijzigd door Chrotenise op 22 juli 2024 19:43]

[Only]

Had dat stukje van per sessie gemist..zag op de ipad idd niet de instelling die ik op me foon had ingesteld daarvoor..

[Anoniem: 398494]

En dat is ook gelijk het nadeel van responsive design in mijn ogen. Veel websites kijken naar de client in plaats van resolutie, waardoor je de 'mobiele' versie niet uit kunt schakelen.

[Vayra]

Het werkt heel fijn op mijn nokia 710, complimenten. Wel n paar puntjes:

- Scrollen. Bovenaan de reacties moet n button komen om in 1x naar de onderkant vd pagina te gaan, nu is het n enorme scrollmarathon waardoor je al snel maar n comment in reactie zal plaatsen ipv n eigen nieue comment.

- De notificaties openen niet, blijven op laden hangen.