Algemeen discussietopic over Responsive design

[WoutF]

Welke browser gebruik je op je N5? Want hij hoort gewoon D te openen.

[Misha]

Idd, dat zou gewoon D moeten zijn. Ik heb nog geen Nexus 5 om mee te testen (komt morgen pas binnen), maar van anderen hoor ik dat ze gewoon RWD krijgen

[Hooglander1]

Je krijgt ook gewoon c of d (afhankelijk of je hem in landscape of portrait vasthoud) met de Nexus 5, dat is nooit anders geweest. Ik heb het wel alleen getest met de chrome browser.

[Elfjes]

Ben je wel ingelogd op je N5?

[_David_]

RWD werkt prima hier op de N5, je bent waarschijnlijk niet ingelogd zoals Elfjes zei.

[Misha]

Hebben we nou allemaal een Nexus 5, jongens?

[DarkShadow16]

Ai Ai stom stom stom
Had hem net een goed uur uit de doos en omdat ik normaal natuurlijk altijd ingelogd ben, heb ik daar helemaal niet aan gedacht.
En ja als je in Australië zit en de 32GB versie voor 330 euro kan krijgen in de play store dan kon ik het gewoon niet laten.
* DarkShadow16 gaat even verder zich in een hoekje dom voelen

[Hooglander1]

Misha schreef op dinsdag 03 december 2013 @ 12:48:
Hebben we nou allemaal een Nexus 5, jongens?

Wij wel

[Misha]

Ik krijg hem morgen pas (althans, die van kantoor, ik krijg er geen voor persoonlijk gebruik )

Ander topic!

Font & font-sizes voor teksten

We gebruiken voor RWD nu hetzelfde font als normaal. Ik hoor van menigeen dat ze dit eigenlijk net te klein vinden om echt lekker te lezen of de tekst te scannen. Ik ben het hier zelf mee eens. Zoals al elders in dit topic aangegeven heb ik zelf een custom css die de grootste van het font een kleine boost geeft. Elfjes heeft het ook en nog iets mooier maar ik vroeg me af wat jullie hier zelf van vinden. Vinden jullie de teksten (en dan heb ik het dus over de tekst in een artikel, de reacties, forum topic etc) nu lekker leesbaar of denken jullie dat een iets grotere fontsize praktischer is?

Even ter voorbeeld de CSS van Elfjes:

code:

@media (max-width: 767px), (max-device-width: 767px) and (orientation: portrait), (max-device-width: 499px) and (orientation: landscape) {

/* Fonts */

@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400);

/* font bij article */

.article, .articleColumn .pollWrapper {
font-size: 15px;
font-family: "Helvetica", "Roboto", "Arial";
}

.articleColumn .pollWrapper h3 {
font-size: 15px;
font-family: "Helvetica", "Roboto", "Arial";
}

.nextPrevLinks {
font-size: 15px;
font-family: "Helvetica", "Roboto", "Arial";
}


/* Volgende en vorige artikel tweaks */ 

.nextPrevLinks .label+span {
margin-left: 23px;
}

.nextPrevLinks .label.next {
    background-position: 0 -59px;
}

.nextPrevLinks .label.previous {
    background-position: 0 -84px;
}

.nextPrevLinks .label {
color: transparent;
width: 0px;
}

/* Reacties */

.reactie {
font-size: 15px;
font-family: "Helvetica", "Roboto", "Arial";
}

.reactieHeader a {
font-weight: 700;
}

.reactieHeader .date, .reactieHeader .replyTo {
font-size: 13px;
font-weight: 300;
}


/* GoT */

.message .poster .username {
font-size: 17px;
font-family: "Helvetica", "Roboto", "Arial";
}

.message .poster .title {
font-weight: 300;
font-size: 13px;
}

.user, a.user:hover {
font-weight: 700;
}

.message .username a {
    font-size: 15px;
}

.messageheader {
font-size: 13px;
font-family: "Helvetica", "Roboto", "Arial";
}

.messagecontent {
font-family: "Helvetica", "Roboto", "Arial";
font-size: 15px;
}

.messagecontent blockquote {
font-size: 15px;
font-family: "Helvetica", "Roboto", "Arial";
margin: 0 5px 10px;
}
}

[crisp]

Misha: die CSS doet niet alleen andere font-sizes, maar vooral ook andere fonts...

[Misha]

Ik heb de tekst ietwat aangepast

[icratox]

Ik heb werkelijk geen idee of ik dit nu als bug moet rapporteren of niet, dus vandaar dat ik het hier schrijf.

Het valt me op bij dit artikel: nieuws: KPN wil optie in iPhone om niet naar wifi te schakelen als er 4g is dat in de Grade D versie op mijn Galaxy S3, het plaatje dermate 'groot' is dat de tekst links van het plaatje in een vrij smalle strook word gedrukt. Het is geen groot probleem, het leest alleen vrij onprettig. Heb op 't moment geen screenshot, maar zal even kijken dat ik die nog upload vandaag.

Is het geen idee om zo'n intro plaatje boven de tekst te laten verschijnen in een RD ipv rechts van de tekst? Aangezien het mee laten schalen van het plaatje ook niet het gewenste effect zal geven volgens mij (word te klein om bruikbaar/informatief te zijn). Op deze manier zal de tekst niet 'lijden' onder de grootte van de afbeelding.

[ Voor 21% gewijzigd door icratox op 04-12-2013 11:33 ]

[Hooglander1]

Misha schreef op dinsdag 03 december 2013 @ 15:04:

Font & font-sizes voor teksten

Zoals ik al eerder heb aangegeven, vind ik het font eerder een tikkie te groot dan te klein. In de artikelen zou ik het niet graag groter willen zien, dan mis ik weer het overzicht om het lekker te kunnen lezen.

[Elfjes]

Regel 25 tot 42 van die CSS gaan niet over fonts maar over een andere aanpassig mbt de "vorige artikel" en "volgende artikel" links uit de artikelpagina. Dit is nu ook reeds door Tweakers aangepast aan de destkopsite. Maar dat terzijde

ik maak met veel plezier gebruik van de grotere lettertypes op responsive

met betrekking tot plaatjes naast artikel-alinea's. Dat is mij ook wel eens opgevallen. Dat je ineens nog maar 1 woord op een regel ziet omdat het plaatje zo breed is. Je zou natuurlijk iets als dit kunnen doen, al ziet het er ook weer niet supergoed uit...

Cascading Stylesheet:

@media (max-width: 499px), (max-device-width: 499px) and (orientation: portrait) {
  /* plaatjes bij articles */
  .article p img {
    display: block;
    float:none !important;
    margin: 10px auto !important;
  }
}

[ Voor 5% gewijzigd door Elfjes op 04-12-2013 16:52 ]

[icratox]

Dat is inderdaad meer waar ik op doelde, al zou ik op die manier ook nog een zeer lichte border voor de afwerking erbij zetten, dat zou het net wat netter kunnen maken.

[Misha]

Het probleem met de plaatjes is echter dat de plaatjes behoorlijk variabel kunnen zijn. In dit geval werkt het wel aardig, maar wat bij iets kleinere plaatjes? Stel dat er rechts een plaatje van 40px wide staat, dan ziet dat er nogal vreemd uit/ Het is wel een last resort. Ik moet eigenlijk eens even tijd vrij maken om hier met de redactie goed over te zitten. Inspector gaf aan dat als we bijvoorbeeld een verschillende set aan images kunnen definiëren, we specifiek op de class kunnen targetten en veel meer controle hebben over wat een plaatje doet

[crisp]

maar wat bij iets kleinere plaatjes?

Of zelfs een smilie

[Elfjes]

tjah, het plaatje hier is wel wat klein nieuws: Koeriersdienst UPS overweegt ook inzet van drones


Het zier er niet echt mooi uit, maar het is minder storend dan een groot plaatje waardoor er maar 1 woord per regel past

[crisp]

Je zou het gewoon op basis van breedte van het plaatje wel of niet moeten doen. An sich doen we al dingen met JS voor broodteksten (tables en video's krijgen een speciale behandeling), dus wmb kunnen we daar ook nog wel wat extra doen voor plaatjes.

[Elfjes]

Is het niet ook iets wat device-afhankelijk (breedte/ppi) is? En wat is dan een goede grens? 1/2 van de breedte? of minimaal 2/3 tekst?

(en ik maar denken dat jullie geen JS oplossingen willen )

[crisp]

Elfjes schreef op donderdag 05 december 2013 @ 10:53:
Is het niet ook iets wat device-afhankelijk (breedte/ppi) is? En wat is dan een goede grens? 1/2 van de breedte? of minimaal 2/3 tekst?

Dat zullen we proefondervindelijk moeten bekijken Als we op basis van breedte inline plaatjes kunnen classificeren (bv >= 240px = 'wideimage', < 240px && >= 150px 'mediumwideimage', < 150px = 'smallimage') dan kunnen we het verder voor C en D afzonderlijk in CSS regelen.

(en ik maar denken dat jullie geen JS oplossingen willen )

Zo min mogelijk ja aangezien JS manipulatie zorgt voor extra processingtijd en layout reflows, maar dat is een afweging die je per geval moet maken

[icratox]

Zat gisteren of de dag daarvoor op mijn mobiel weer te lezen en kwam een artikel tegen waarbij dit probleem nogal komisch was.

't Artikel begon met "De" (na de introductie), toen kreeg je het plaatje met een behoorlijke ruimte links van het plaatje, en na het plaatje de rest van de tekst. Als ik nu kon herinneren welk artikel dat was

Dit was overigens op de Samsung Galaxy S3

[ Voor 6% gewijzigd door icratox op 09-12-2013 19:09 ]

[_David_]

Had ik hier ook gezien ja, ziet er inderdaad een beetje raar uit

[icratox]

Dat was inderdaad het artikel

[Misha]

Is vanaf morgen gefixed Dan centreren we de plaatjes. Later wil ik aparte classes gaan aanmaken voor images zodat die getarget kunnen worden, maar daar moet ik eerst met de redactie over gaan zitten om te kijken wat hun wensen zijn qua opmaak.

[crisp]

Misha schreef op maandag 09 december 2013 @ 21:14:
Is vanaf morgen gefixed Dan centreren we de plaatjes. Later wil ik aparte classes gaan aanmaken voor images zodat die getarget kunnen worden, maar daar moet ik eerst met de redactie over gaan zitten om te kijken wat hun wensen zijn qua opmaak.

Ik denk dat we zelf met een voorstel moeten komen op basis van breedte van plaatjes. Markup aan de redactie overlaten lijkt me geen goed idee

[WoutF]

crisp schreef op dinsdag 10 december 2013 @ 00:10:
[...]

Ik denk dat we zelf met een voorstel moeten komen op basis van breedte van plaatjes. Markup aan de redactie overlaten lijkt me geen goed idee

Aangezien de redactie altijd al zelf de opmaak van artikelen heeft verzorgd lijkt het me helemaal niet gek om ze erbij te betrekken

[crisp]

WoutF schreef op dinsdag 10 december 2013 @ 07:38:
[...]

Aangezien de redactie altijd al zelf de opmaak van artikelen heeft verzorgd lijkt het me helemaal niet gek om ze erbij te betrekken

Ik bedoel dat een dergelijk systeem automatisch zou moeten werken in plaats van van de redactie verlangen dat ze bij elk plaatje moeten gaan nadenken welke CSS class ze eraan moeten gaan hangen. Dat laatste kost jullie extra tijd en gaat geheid een keer fout

[Misha]

Uiteraard, maar dan heb ik alsnog wensen nodig als uitgangspunt

[marapuru]

Je zou ook het plaatje een min-width kunnen meegeven. Als je vervolgens dat plaatje in een container div gooit die een fixed height heeft en het plaatje klikbaar maakt creëer je een leuke filler

[niektb]

Ik had nog enkele opmerkingen:

Op mijn smartphone (Huawei Ascend G525, 960x540px, Chrome browser) werkt de RWD-versie prima. Ik kom echter het volgende tegen:
Op GoT bij Mijn Topics kan ik niet zien wanneer de laatste post is gedaan, althans in de portrait-modus. in de Landscape-modus is er niks aan de hand.

Ook mis ik de optie om producten in de pricewatch toe te voegen aan een wenslijst. Kan dit kloppen of kijk ik niet goed genoeg?

[Misha]

Het eerste:

In portrait zit je in D, en hebben we net wat te weinig ruimte om de tijd weer te geven. We hebben gekeken naar wat andere mogelijkheden, maar dat was niet praktisch haalbaar met enkel CSS & JS en zou vereisen dat we de complete layout van die pagina opnieuw moesten maken. Dat hebben we voor nu dus maar even niet gedaan

Het toevoegen van producten aan een wenslijst of inventaris hebben we even out of scope geplaatst we moeten even kijken naar een beter interactiepatroon dat ook meteen goed werkbaar is voor RWD

[Elfjes]

Het nieuwe kader van de "zeven andere downloads" ziet er goed uit, met de extra marge aan de zijkanten

[JunkieXP]

Misha schreef op dinsdag 08 oktober 2013 @ 14:16:
[...]

Ik vind de hoeveelheid ruimte nog wel meevallen. Het is sowieso een stuk rustiger dan wat we eerst hadden. Dat oogde onrustig, nam evenveel verticale ruimte in beslag, vertraagde de pagina ontzettend _en_ zat vol tracking door Facebook, Twitter en Google. Dat is nu allemaal in 1 klap weg

Hoewel ik me zeer zeker kan vinden in het standpunt over load en tracking van de Facebook Like knop, functioneert deze mijns inziens wel degelijk anders dan Facebook Share.

Zelf voel ik van tijd tot tijd de behoefte om een Nieuwsitem te Liken, maar niet zozeer om hem via dit een sociaal medium te delen en indien ik dit wel zou willen ondersteunen (vooral mobiele) browsers hier een stuk innovatiever in.

Wellicht kun je de "Officiele Like / Share" buttons (optioneel) laten inladen op het moment dat je de "Deel dit bericht" popup opent.

[Kiswum]

Edit: Bij een test blijkt dat dit vooralsnog alleen bij een poll is, niet bij een nieuwsbericht. Urgentie is hierdoor wellicht wat lager

Ik heb vandaag de nieuwe vormgeving voor mobieltjes getest en wat me direct opviel is het volgende:
Ik weet niet of het een bug of design keuze is, maar in portret modus kan ik niet alle info zien. Als ik mijn telefoon in landschap modus zet, dan is het wel allemaal goed uitgelijnd. Is dit een bekend fenomeen?
In-/uitzoomen is niet mogelijk, waardoor ik dus alleen kan modereren in landschap modus.

Ik heb mijn telefoon eigenlijk bewust nooit in portret modus omdat ik mijn telefoon geheel met 1 hand bedien.

Screenshots:




Browser in Android modus en Desktop modus getest (beide hetzelfde resultaat)
Info telefoon: Xiaomi Mi2 / 4,3"/ 1280x720 scherm / Android 4.1.1 Miui Rom

[ Voor 6% gewijzigd door Kiswum op 10-12-2013 14:48 . Reden: Vooralsnog alleen bij Polls. ]

[Misha]

/poll is nog niet responsive

[Ronwiel]

Ik mis een retina ios web icon. Verder werkt het prima. Beter dan de app!

[_David_]

Is het de bedoeling dat de pagina's binnen topics nu in het midden staan? Ziet er een beetje raar uit (imo)

[Misha]

Yes, dat is de bedoeling. Ik vind het zelf wel meevallen hoe vreemd het oogt; enkel als er nog maar 1 pagina is vind ik het wat maf

[X-Fighter]

Ik weet niet of dit al gezegd is geweest, maar als je zo het menu opent aan de linker- of rechterkant dan zou het scrollen eigenlijk enkel voor dat menu moeten zijn. Als je nu scrollt, scrollt de hele pagina, waardoor je een groot zwart gat hebt in dat menu.

Windows Phone 8

[Mizgala28]

Als de menu knop mee zou schrollen zou dat handig zijn.

En anders een knop om in 1 keer bovenaan de pagina te zitten.

[_David_]

Mizgala28 schreef op dinsdag 10 december 2013 @ 16:25:
Als de menu knop mee zou schrollen zou dat handig zijn.

En anders een knop om in 1 keer bovenaan de pagina te zitten.

Er staat hier meer over een omhoog knop

X-Fighter schreef op dinsdag 10 december 2013 @ 16:18:
Ik weet niet of dit al gezegd is geweest, maar als je zo het menu opent aan de linker- of rechterkant dan zou het scrollen eigenlijk enkel voor dat menu moeten zijn. Als je nu scrollt, scrollt de hele pagina, waardoor je een groot zwart gat hebt in dat menu.

Windows Phone 8

Dit was volgens mij eerder wel zo maar dat zorgde voor bugs met oudere browsers (stock android browser)

Misha schreef op dinsdag 10 december 2013 @ 16:09:
Yes, dat is de bedoeling. Ik vind het zelf wel meevallen hoe vreemd het oogt; enkel als er nog maar 1 pagina is vind ik het wat maf

Ah oke, denk dat het vooral vreemd oogt omdat ik net gewent was aan de 'nieuwe' navigatie

[niektb]

Misha schreef op dinsdag 10 december 2013 @ 13:15:
Het eerste:

In portrait zit je in D, en hebben we net wat te weinig ruimte om de tijd weer te geven. We hebben gekeken naar wat andere mogelijkheden, maar dat was niet praktisch haalbaar met enkel CSS & JS en zou vereisen dat we de complete layout van die pagina opnieuw moesten maken. Dat hebben we voor nu dus maar even niet gedaan

Het toevoegen van producten aan een wenslijst of inventaris hebben we even out of scope geplaatst we moeten even kijken naar een beter interactiepatroon dat ook meteen goed werkbaar is voor RWD

Hij valt in portrait toch in C? (540px) Volgens de open bèta topic valt valt hij in D onder 500px (dus 499px en lager)

[Elfjes]

Elfjes schreef op dinsdag 29 oktober 2013 @ 12:01:
Is het misschien een idee om die dropdown anders te noemen? Nu is ie vernoemd naar de weergave/pagina waar je op dat moment bent (forumlijst/actieve topics) maar dat is dubbele informatie aangezien dat ook al in de tweede header staat. De functie van de dropdown is niet direct zichtbaar, je moet er eerst op klikken om te kijken wat ie doet.

Ik denk dat het intuitiever werkt om hem anders te noemen. Hierbij denk ik aan "Forumopties" of "Forumnavigatie"

Misha schreef op dinsdag 29 oktober 2013 @ 12:26:
Vind ik een uitstekend idee

Wordt hier nog wat mee gedaan?

[AW_Bos]

Misschien niet helemaal de plek om erover te discussieren, maar de Tweakers-app's die er bestaan, die zullen tzt niet meer onderhouden gaan worden. Is er al over nagedacht om ze wel te laten behouden, maar deze via een update puur een redirect te doen naar de browser en je daar doorverwijst naar Tweakers?

Zo is het wel makkelijk dat je Tweakers met een druk op de knop op je bureaublad van je telefoon alsnog kan bereiken zoals eerst.

[Kees]

AW_Bos schreef op dinsdag 10 december 2013 @ 19:46:
Misschien niet helemaal de plek om erover te discussieren, maar de Tweakers-app's die er bestaan, die zullen tzt niet meer onderhouden gaan worden. Is er al over nagedacht om ze wel te laten behouden, maar deze via een update puur een redirect te doen naar de browser en je daar doorverwijst naar Tweakers?

Zo is het wel makkelijk dat je Tweakers met een druk op de knop op je bureaublad van je telefoon alsnog kan bereiken zoals eerst.

Ja

Overigens kun je tweakers.net onder de meeste os'en (al dan niet met trucjes) eenvoudig op je homescreen krijgen.

[ Voor 9% gewijzigd door Kees op 10-12-2013 19:53 ]

[_David_]

AW_Bos schreef op dinsdag 10 december 2013 @ 19:46:
Misschien niet helemaal de plek om erover te discussieren, maar de Tweakers-app's die er bestaan, die zullen tzt niet meer onderhouden gaan worden. Is er al over nagedacht om ze wel te laten behouden, maar deze via een update puur een redirect te doen naar de browser en je daar doorverwijst naar Tweakers?

Zo is het wel makkelijk dat je Tweakers met een druk op de knop op je bureaublad van je telefoon alsnog kan bereiken zoals eerst.

In de nieuwe Chrome beta heb je een add to homescreen knop die precies dat doet

[Misha]

X-Fighter schreef op dinsdag 10 december 2013 @ 16:18:
Ik weet niet of dit al gezegd is geweest, maar als je zo het menu opent aan de linker- of rechterkant dan zou het scrollen eigenlijk enkel voor dat menu moeten zijn. Als je nu scrollt, scrollt de hele pagina, waardoor je een groot zwart gat hebt in dat menu.

Windows Phone 8

We hebben daar een custom scroll tijdenlang in gehad, maar het platform dat je gebruikt, WP, vond dat alles behalve fijn en sloopte de navigatie (ik meen dat het ook voor wat Android devices gold hoor )

Mizgala28 schreef op dinsdag 10 december 2013 @ 16:25:
Als de menu knop mee zou schrollen zou dat handig zijn.

En anders een knop om in 1 keer bovenaan de pagina te zitten.

Een fixed navigatie staat nog op de wenslijst. Ik leg in Welkom bij de open bèta! waarom we dit nu nog even niet hebben

niektb schreef op dinsdag 10 december 2013 @ 17:51:
[...]


Hij valt in portrait toch in C? (540px) Volgens de open bèta topic valt valt hij in D onder 500px (dus 499px en lager)

Hmmm ja klopt. Ik zou het dan niet zo 1,2,3 weten. Ik ben verder ook niet echt bekend met Huawai. Zouden ze nog iets doen met hun resoluties?

Elfjes schreef op dinsdag 10 december 2013 @ 19:39:
[...]


[...]


Wordt hier nog wat mee gedaan?

Helemaal vergeten. als anderen nog suggesties hebben; graag!

AW_Bos schreef op dinsdag 10 december 2013 @ 19:46:
Misschien niet helemaal de plek om erover te discussieren, maar de Tweakers-app's die er bestaan, die zullen tzt niet meer onderhouden gaan worden. Is er al over nagedacht om ze wel te laten behouden, maar deze via een update puur een redirect te doen naar de browser en je daar doorverwijst naar Tweakers?

Zo is het wel makkelijk dat je Tweakers met een druk op de knop op je bureaublad van je telefoon alsnog kan bereiken zoals eerst.

We zullen in de app zelf mensen op de hoogte brengen van het bestaan van RWD en tzt aangeven dat de app over een x aantal dagen zal stoppen met de feed inladen. Gaat wel enige tijd overheen, overigens.

[Elfjes]

Misha schreef op dinsdag 10 december 2013 @ 20:26:

[...]


Hmmm ja klopt. Ik zou het dan niet zo 1,2,3 weten. Ik ben verder ook niet echt bekend met Huawai. Zouden ze nog iets doen met hun resoluties?

Is dat niet gewoon de device pixel ratio waardoor de hoeveelheid css-pixels effectief minder is?

[Misha]

Elfjes schreef op dinsdag 10 december 2013 @ 23:24:
[...]


Is dat niet gewoon de device pixel ratio waardoor de hoeveelheid css-pixels effectief minder is?

Daar zat ik ook aan te denken. Ik ga het morgen eens bekijken kan wellicht iets van 1:1,3 zijn ofzo

[Universal Creations]

Geen idee of mijn vraag een los topic waard is, of dat het misschien al eerder gevraagd is, maar ik zit met het volgende: scrollen op een mobiel gaat erg onhandig, dus gebruik ik altijd op mijn mobiel (en ook vaak op de laptop) de mogelijkheid om direct naar de laatste reactie te gaan. Dit is nu niet mogelijk, waardoor de mobiele versie eigenlijk onhandiger werkt dan de desktopversie.

[Hooglander1]

Universal Creations schreef op woensdag 11 december 2013 @ 14:17:
Geen idee of mijn vraag een los topic waard is, of dat het misschien al eerder gevraagd is, maar ik zit met het volgende: scrollen op een mobiel gaat erg onhandig, dus gebruik ik altijd op mijn mobiel (en ook vaak op de laptop) de mogelijkheid om direct naar de laatste reactie te gaan. Dit is nu niet mogelijk, waardoor de mobiele versie eigenlijk onhandiger werkt dan de desktopversie.

Hoezo kan dat niet? Je kan toch gewoon drukken op het icoontje voor de topicnaam, dan ga je iig naar de eerste nieuwe reactie in de sessie.

[JvS]

Ik gebruik vaak op mijn tv tweakers. Daar heb ik een 1280x720 resolutie en heb ik chrome standaard op 125% ingezoomd staan, zodat ik het vanaf de bank lekker relaxed kan lezen. Het valt me op dat de site daarop niet reageert:



ALs ik het window smaller maak, wordt het wel netjes passend gemaakt en ook op mijn normale LCD (1280x1024) op een andere PC reageert het design op inzoomen, door het weer passend te maken.

Beide op chrome en windows 7.

[Universal Creations]

Hooglander1 schreef op woensdag 11 december 2013 @ 18:06:
Hoezo kan dat niet? Je kan toch gewoon drukken op het icoontje voor de topicnaam, dan ga je iig naar de eerste nieuwe reactie in de sessie.

Dat wist ik niet.... Thanks!

[Inspector]

JvS schreef op woensdag 11 december 2013 @ 19:00:
Ik gebruik vaak op mijn tv tweakers. Daar heb ik een 1280x720 resolutie en heb ik chrome standaard op 125% ingezoomd staan, zodat ik het vanaf de bank lekker relaxed kan lezen. Het valt me op dat de site daarop niet reageert:

[afbeelding]

ALs ik het window smaller maak, wordt het wel netjes passend gemaakt en ook op mijn normale LCD (1280x1024) op een andere PC reageert het design op inzoomen, door het weer passend te maken.

Beide op chrome en windows 7.

Dat betreft een grade B en deze zal pas later ontwikkeld worden. We focussen ons eerst op Grade B en C voor respectievelijk kleine tablets en smartphones.

[Misha]

Inspector schreef op woensdag 11 december 2013 @ 20:14:
[...]


Dat betreft een grade B en deze zal pas later ontwikkeld worden. We focussen ons eerst op Grade B en C voor respectievelijk kleine tablets en smartphones.

Je kunt natuurlijk ook even de weergave forceren via http://tweakers.net/devicedetect

[zeromussov]

Universal Creations schreef op woensdag 11 december 2013 @ 19:46:
[...]

Dat wist ik niet.... Thanks!

Maar dit werkt helaas niet op de bookmarks pagina, dat is wel erg jammer.. Omdat je juist hier vaak regelmatig de nieuwe reacties wilt zien zonder steeds helemaal naar beneden te hoeven scrollen. Hopelijk wordt daar nog iets voor aangepast (kan zo niet direct vinden of dit al al wordt aangepast).

[Misha]

Bij de bookmarks komen de ballonnetjes nog, dus dan kun je gewoon naar de laatste berichten in dat topic van je sessie gaan

[Elfjes]

Ik zie nu net de nieuwe weergave van productspecificaties in grade D en ik weet niet zeker of ik het een verbetering vind. Ik snap denk ik wel waarom jullie alles onder elkaar hebben gezet, maar het maakt wel dat er opeens zoveel witruimte is aan de rechterkant (op een nexus 4, op kleinere screen zal de witruimte wel kleiner zijn denk ik). Ook is het contrast tussen de property en de bijbehorende value niet heel groot wat de overzichtelijkheid niet ten goede komt. Op grade C is het zoveel overzichtelijker.

[Rikkiz0r]

Zojuist een kleine bug gevonden, avatars zijn niet goed uitgeleind. Android 4.4.2 Nexus 5, nieuwste versie van Chrome.



Issue treed overigens niet in elk topic op.

[ Voor 12% gewijzigd door Rikkiz0r op 12-12-2013 00:55 ]

[Misha]

Elfjes schreef op donderdag 12 december 2013 @ 00:48:
Ik zie nu net de nieuwe weergave van productspecificaties in grade D en ik weet niet zeker of ik het een verbetering vind. Ik snap denk ik wel waarom jullie alles onder elkaar hebben gezet, maar het maakt wel dat er opeens zoveel witruimte is aan de rechterkant (op een nexus 4, op kleinere screen zal de witruimte wel kleiner zijn denk ik). Ook is het contrast tussen de property en de bijbehorende value niet heel groot wat de overzichtelijkheid niet ten goede komt. Op grade C is het zoveel overzichtelijker.

Ik begrijp wat je bedoelt. Dit is uiteindelijk een 'best' worst case scenario geworden; op de 320px hebben we simpelweg te weinig horizontale ruimte om ervoor te zorgen dat specs goed leesbaar zijn. Vandaar dat we ze onder elkaar hebben gezet. Ik wil graag nog wat spelen met de contrasten op de pagina en de overige IA, maar toen ik daar mee begon kwam ik er al snel achter dat het niet zozeer een probleem van RWD is, maar een generiek probleem. Onze specificatiepagina is in principe wel aardig, maar nog niet goed genoeg. Ik wil daarom liever het generiek aanpakken, dan een hele sloot aan javascript er overheen gooien en alles anders doen. Dat maakt de pagina namelijk behoorlijk zwaar en heb ik ruzie met onze developers.

Het contrast is trouwens nog wel iets wat we zonder javascript denk ik kunnen fixen. Als je goede suggesties hebt, dan zijn die van jou altijd welkom (want we hebben er immers al zo weinig van je gebruikt )

@Rikkiz0r, we kijken daar in de komende iteratie naar!

[Elfjes]

zoiets misschien? Ik ben er niet helemaal overtuigd over, maar misschien is het iets waar jullie mee verder kunnen

Cascading Stylesheet:

@media (max-width: 499px), (max-device-width: 499px) and (orientation: portrait) {
  /*Pricewatch productspecificaties*/

  table.spec-detail td.spec-index-column {
    font-weight: 700;
    color: #616464;
  }

  table.spec-detail td.spec-column {
    padding-left: 20px;
    color: #000000;
  }
}

[henri8096]

Mizgala28 schreef op dinsdag 10 december 2013 @ 16:25:
Als de menu knop mee zou schrollen zou dat handig zijn.

En anders een knop om in 1 keer bovenaan de pagina te zitten.

dit onderschrijf ik.
was het eerste wat me opviel, dat ik in het forum weer helemaal naar boven moest scrollen om weer in het "menu" te komen.

[MarcoC]

Misha schreef op donderdag 01 augustus 2013 @ 20:27:
Ipads zijn nog buiten de scope van het project

Zonde. Waarom? Tweakers website is vervelend om te gebruiken op iPad.

[_David_]

Tweakers werkt hier anders prima op een 10.1 tablet.

[MarcoC]

_David_ schreef op donderdag 12 december 2013 @ 18:18:
Tweakers werkt hier anders prima op een 10.1 tablet.

Op mijn iPad moet ik standaard scrollen.

[Metian]

henri8096 schreef op donderdag 12 december 2013 @ 10:24:
[...]

dit onderschrijf ik.
was het eerste wat me opviel, dat ik in het forum weer helemaal naar boven moest scrollen om weer in het "menu" te komen.

En ik ook. Zou werkelijk een verademing zijn als er een oplossing komt voor het scrollen, van boven naar beneden (forum) en weer omhoog (overal).

Eerst had ik zoiets van, valt wel mee. Maar ik nu wat meer op tweakers zit op me mobiel (wat ik normaal weinig deed zonder RD) valt me op dat het scrollen toch vrij vervelend begint te worden, ondanks de snelle scroll op mijn Nexus 5

[_David_]

Misha in "[feat] omhoog-knop"

Misha schreef op woensdag 20 november 2013 @ 07:13:
Een back-to-top-functie staat nog op //todo. Een fixed header of een 'header-die-weer-opnieuw-verschijnt' () hebben we uitgeprobeerd maar zorgde nog voor erg veel problemen op menig device. Staat overigens nog wel op het verlanglijstje

[Metian]

Ah, een bericht die ik dus over het hoofd gezien heb. Thanks!

Trouwens, werkt custom css ook gewoon met de responsive design? Heb eigenlijk nog niet de gelegenheid gehad om het uit te proberen..

[ Voor 52% gewijzigd door Metian op 12-12-2013 21:25 ]

[Elfjes]

Ja dat werkt. In responsive.css worden twee media-queries uitgevoerd om de responsive css te laden. Er zijn nu een responsive_c.css en een responsive_d.css, wanneer deze precies getriggerd worden kan ik zo gauw even niet zien. Misschien dat Misha of Inspector daar iets meer over kan zeggen? Ah ik zie de queries al in de html staan .

deze queries werden eerst gebruikt door Tweakers, en gebruik ik nog steeds met succes om grade C en D te targeten

Cascading Stylesheet:

/*Grade C & Grade D */
@media (max-width: 767px), (max-device-width: 767px) and (orientation: portrait), (max-device-width: 499px) and (orientation: landscape) {
}

/*Grade D only*/
@media (max-width: 499px), (max-device-width: 499px) and (orientation: portrait) {
}

[ Voor 3% gewijzigd door Elfjes op 12-12-2013 21:59 ]

[_David_]

Post van Inspector over het targeten van grades binnen RWD JoostBaksteen in "Algemeen discussietopic over TRD"

[Metian]

Awesome, van weekend maar is even spelen met custom css en nieuwe responsive design. Misschien kom ik nog wat handige dingen tegen.

[Misha]

Elfjes schreef op donderdag 12 december 2013 @ 09:41:
zoiets misschien? Ik ben er niet helemaal overtuigd over, maar misschien is het iets waar jullie mee verder kunnen

[afbeelding]

Cascading Stylesheet:

@media (max-width: 499px), (max-device-width: 499px) and (orientation: portrait) {
  /*Pricewatch productspecificaties*/

  table.spec-detail td.spec-index-column {
    font-weight: 700;
    color: #616464;
  }

  table.spec-detail td.spec-column {
    padding-left: 20px;
    color: #000000;
  }
}

Interessante optie. Een indent helpt al inderdaad. Vind het nog niet dé oplossing overigens

MarcoC schreef op donderdag 12 december 2013 @ 17:59:
[...]

Zonde. Waarom? Tweakers website is vervelend om te gebruiken op iPad.

Omdat ik een strakke scope heb moeten hanteren voor dit project. Onze gebruikerservaring was het meest slecht op de smartphone en kleine tablet, vandaar dat ik daar de volle focus op heb gelegd. Als we ook grote tablets hadden meegepakt, dan hadden we veel minder ruimte gehad voor om met bepaalde dingen te experimenteren, en daardoor minder ervaring op te doen. Overigens vind ik vervelend een tikkeltje overdreven. Het is hoogstens op bepaalde vlakken ongemakkelijk te gebruiken

MarcoC schreef op donderdag 12 december 2013 @ 18:24:
[...]

Op mijn iPad moet ik standaard scrollen.

Je moet op ieder device scrollen, of het nou RWD, groot, klein of wat dan ook is. Ik snap deze opmerking dus niet helemaal?

Metian schreef op donderdag 12 december 2013 @ 21:13:
[...]


En ik ook. Zou werkelijk een verademing zijn als er een oplossing komt voor het scrollen, van boven naar beneden (forum) en weer omhoog (overal).

Eerst had ik zoiets van, valt wel mee. Maar ik nu wat meer op tweakers zit op me mobiel (wat ik normaal weinig deed zonder RD) valt me op dat het scrollen toch vrij vervelend begint te worden, ondanks de snelle scroll op mijn Nexus 5

Zoals ook andere al hebben gezegd: we kijken naar wat oplossingen. Als eerste wil ik, omdat ik denk dat dat het snelst te implementeren is, een back-to-top-functie aanbieden. Vervolgens kunnen we gaan kijken of we de navigatie fixed gaan maken, waarbij we nog wel een aardige keuze moeten maken: zoomen of fixed navigatie. Beide gaat namelijk niet dankzij een bugje in webkit . Als je gaat inzoomen bij een fixed element, dan schaalt het element ook gewoon vrolijk mee (en heb je dus ineens een navigatie die de helft van je beeldscherm is )

Metian schreef op donderdag 12 december 2013 @ 22:07:
Awesome, van weekend maar is even spelen met custom css en nieuwe responsive design. Misschien kom ik nog wat handige dingen tegen.

Ik ben benieuwd!

Edit:

Hmmm...

code:

#top {
position: fixed;
width: 100%;
}

Dit heeft niet echt het gewenste effect es dieper op induiken

Edit 2:

code:

/*Grade C & Grade D */ 
@media (max-width: 767px), (max-device-width: 767px) and (orientation: portrait), (max-device-width: 499px) and (orientation: landscape) { 

#top {
position: fixed;
width: 100%;
top:0px;
z-index:1;
}

#contentArea {
margin-top: 44px;
}

Hmmm, sloopt wel de off canvas navigatie

[ Voor 11% gewijzigd door Misha op 12-12-2013 23:11 ]

[_David_]

http://updates.html5rocks...300ms-tap-delay-gone-away

Over de 300ms delay

[Mrjraider]

Ik was er in het begin wat skeptisch over maar in vergelijking met de applicatie is dit een hele verademing. Goed werk lui
Ik blijf testen...

[Misha]

_David_ schreef op vrijdag 13 december 2013 @ 19:51:
http://updates.html5rocks...300ms-tap-delay-gone-away

Over de 300ms delay

Klinkt veelbelovend. Leuke discussie ook over de mogelijkheid tot zoomen.

mrjraider schreef op vrijdag 13 december 2013 @ 20:46:
Ik was er in het begin wat skeptisch over maar in vergelijking met de applicatie is dit een hele verademing. Goed werk lui
Ik blijf testen...

Goed om te horen, man! Puur uit nieuwsgierigheid: waardoor was je skeptisch?

[crisp]

Misha schreef op vrijdag 13 december 2013 @ 22:29:
[...]


Klinkt veelbelovend. Leuke discussie ook over de mogelijkheid tot zoomen.

Jammer dat je nog wel jaren vast zit aan oudere (stock)browsers op mobile; mobile browsers zijn wat dat betreft echt de nieuwe Internet Explorers

[Mrjraider]

Misha schreef op vrijdag 13 december 2013 @ 22:29:
[...]


Klinkt veelbelovend. Leuke discussie ook over de mogelijkheid tot zoomen.


[...]


Goed om te horen, man! Puur uit nieuwsgierigheid: waardoor was je skeptisch?

Mijn eerste punt was; alweer iemand die de mobiele browser praktisch verplicht (omdat de gewone website niet te lezen valt zonder een miljoen keer in te zoemen). De mobiele versie van tweakers vond ik zeer onpraktisch en niet fijn werken, ik was daarom erg blij met de applicatie van jullie.
Nu de hele mobiele variant een makeover heeft gehad ten aan zien van layout en functionaliteit ben ik erg te spreken..

[Whatson]

_David_ schreef op vrijdag 13 december 2013 @ 19:51:
http://updates.html5rocks...300ms-tap-delay-gone-away

Over de 300ms delay

heb

code:

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

Als custom css toegevoegd voor mijn Windows Phone en alles werkt ineens veel sneller

crisp schreef op zaterdag 14 december 2013 @ 11:58:
[...]

Jammer dat je nog wel jaren vast zit aan oudere (stock)browsers op mobile; mobile browsers zijn wat dat betreft echt de nieuwe Internet Explorers

maar de nieuwe mobile IE ondersteund het gewoon )

[ Voor 29% gewijzigd door Whatson op 14-12-2013 22:34 ]

[An_doR]

De TRD site werkt behoorlijk goed, veel beter dan de app of de 'normale' versie... alleen ongeveer het meest basale, de grootte van de fonts is gewoon niet lekker. Om lekker te kunnen lezen op mobiel (en Nexus 7) is de font-size net te klein (arial en dergelijke vallen sowieso al klein uit)

Zo kom je weer een beetje op vervlogen tijden dat elke ontwerper alles boven de 10px "te groot" vond.
Helaas is er geen browser meer te vinden die text reflow na pinch vergroten goed ondersteund. Opera op Android doet dat goed in de normale versie van de site, maar niet in de responsive.

Wat mij betreft mag de font-size best op 14/15px staan bij alles <768 todat er een equivalent voor ctrl+ op de mobiel is.
De tekstgroote in de browser groter zetten is niet echt een oplossing omdat de meeste sites voor mobiel al een font-size van 15/16 hanteren en die dus enorm worden als je de instelling veranderd.

[_David_]

Fonts en fontgrootte is natuurlijk iets waarbij de smaken nogal verschillen, ik vind bijvoorbeeld het zo prima en andere weer niet, het is op te lossen door zelf custom CSS te gebruiken, of tweakers moet nog een layout instelling maken voor fontgrootte, denk alleen niet dat ze dat willen

[klepje]

Misha schreef op donderdag 12 december 2013 @ 22:32:
[...]

Je moet op ieder device scrollen, of het nou RWD, groot, klein of wat dan ook is. Ik snap deze opmerking dus niet helemaal?

Ik denk dat hij bedoeld dat je naar de zijkant kunt scrollen. Op de iPad mini heb ik zelf ook het probleem, als ik de weergave (als ik niet ingelogd ben) op automatisch zet wordt de desktop weergave weergegeven. Als ik de weergave op "middelgrote schermen" zet klopt het wel.

Ook is het jammer dat de Chrome beta op Android het icoontje van Tweakers niet pakt als je Tweakers aan je homepage toevoegt.

Hopelijk wordt dit nog gefixed

[Misha]

Ah, dus de browser zoomt niet uit zichzelf goed uit? Ik heb wel een idee'tje waar dat aan kan liggen

Wat betreft het icoontje: schijnbaar wil Google de plaatjes in een expliciete volgorde wil hebben, ipv dat hij gewoon de diegene uit een lijst pakt die hij nodig heeft. Ontzettend onlogisch. Ik denk dat Google nog wel het licht gaat zien. tot die tijd zouden we de volgorde om kunnen draaien

[hylke94]

klepje schreef op dinsdag 24 december 2013 @ 01:35:
[...]


Ik denk dat hij bedoeld dat je naar de zijkant kunt scrollen. Op de iPad mini heb ik zelf ook het probleem, als ik de weergave (als ik niet ingelogd ben) op automatisch zet wordt de desktop weergave weergegeven. Als ik de weergave op "middelgrote schermen" zet klopt het wel.

Ook is het jammer dat de Chrome beta op Android het icoontje van Tweakers niet pakt als je Tweakers aan je homepage toevoegt.

Hopelijk wordt dit nog gefixed

Ik krijg het icoontje wel op mijn homepage via Chrome bèta...

[Misha]

Ik heb het ook op de ene telefoon goed zien gaan en op de andere niet. Hopeloze bende

[Miki]

In het begin moest ik er erg aan wennen omdat met wat extra zoomen en goed mikken de desktop site best bruikbaar was. Maar nu ik een zo een tijdje aan het gebruiken ben vind ik het toch best fijn werken.

[Misha]

Goed om te horen, Miki

[Belecthor]

Ik gebruik het responsive design sinds kort op mijn Nexus 5 en het werkt echt fantastisch! Het heeft meer dan de Tweakers app vervangen. Het enige probleem wat ik nu tegen ben gekomen is wanneer ik naar vraag & aanbod ga via m'n mobiel, dan gaat hij in full-screen.

[Misha]

Mooi, Belecthor

Ik hoop V&A nog af te kunnen ronden voordat we het definitief gaan lanceren. Ik heb goede hoop, maar pin me nog nergens op vast

[MADG0BLIN]

Ik kon het zo snel niet vinden, maar wordt het ook mogelijk om het aantal reacties per device in te stellen? Op mijn pc en laptop heb ik het liefst 100 reacties pp, maar op mijn telefoon liever 25.

Voor de rest gebruik ik het erg veel op mijn telefoon tegenwoordig, werkt erg prettig.

[Misha]

Daar hebben we nog geen ondersteuning voor, maar staat wel op mijn persoonlijke verlanglijst

[mr_obb]

Ik merk in het nieuwjaarsartikel dat smilies gecentreerd op een witregel worden weergegeven, terwijl de schrijver ze in de tekst heeft geschreven.

Daarnaast zijn een groot aantal van de grafieken niet goed zichtbaar.

Geconstateerd op: iPhone 5, IOS7, Safari, portrait.

[sebastius]

Ik heb mijn iPad ook een tandje lager gezet (middelgrote schermen) en werkt nu veel fijner!

Wishlist: tweakblogs ook in het responsive verhaal (sowieso mag tweakblogs wel eens een upgrade krijgen, hoewel ik snap dat dit projectje geen corebusiness is en er geen stuiver mee verdient wordt)

[MarcoC]

Misha schreef op donderdag 12 december 2013 @ 22:32:
[...]
Je moet op ieder device scrollen, of het nou RWD, groot, klein of wat dan ook is. Ik snap deze opmerking dus niet helemaal?

Ik bedoel dat je op de iPad standaard horizontaal moet scrollen. Zodra jde pagina inlaadt is hij een beetje ingezoomd. Dat vind ik vervelend.

[ Voor 13% gewijzigd door MarcoC op 02-01-2014 10:08 ]

[sebastius]

MarcoC schreef op donderdag 02 januari 2014 @ 10:08:
[...]
Ik bedoel dat je op de iPad standaard horizontaal moet scrollen. Zodra jde pagina inlaadt is hij een beetje ingezoomd. Dat vind ik vervelend.

Daarom heb ik hem een tandje lager gezet qua device-grade, dan springt de iPad over op responsive en ben je er van af.

[MarcoC]

Ik zie nu pas dat dat kan inderdaad. Ideaal.

[koelpasta]

Hi pplz!

Nice hoor! Ziet er netjes uit!

Alleen is de leesbaarheid op mn desktop (mozilla browser) behoorlijk afgenomen.
Zo te zien hebben jullie de kleur van het font weer lichter gemaakt waardoor de letters optisch te licht worden gerendert (mede door AA) en de text voor mn gevoel af en toe in mn periphere visie in de achtergrond begint te verdwijnen (heel raar en onrustig gevoel).

Het is best wel gek dat jullie het font minder contrast meegeven. Jullie weten namelijk niet welke eigenschappen het scherm van de gebruiker heeft en daarnaast wordt het font redelijk dicht op elkaar gepakt. Laag contrast fonts werken het best als de letterdichtheid niet zo heel groot is (minder dan T.fp) . Aangezien jullie op het randje van acceptabel contrast zijn gaan zitten zullen er, denk ik, best wel veel mensen problemen krijgen met leesbaarheid vanwege de statistische afwijking van verschillende schermen onder verschillende lichtomstandigheden. Het zou veel zinniger zijn om iets meer contrast te hanteren dan strikt nodig want contrast bij de eindgebruiker kan zelden worden vergroot. Op een mobieltje in de zomer kost het exponentieel meer batterij om meer contrast te maken. Schermen (binnen het spectrum TV-Monitor-Mobile) hebben zulke verschillende eigenschappen dat de subtiliteit die jullie in de kleur proberen toe te passen redelijk zinloos is voor de meeste praktijksituaties. Je kunt in de praktijk bij tekst beter te veel contrast hebben dan te weinig.

Voorstel: Kunnen jullie ergens een optie inbouwen om het grijs in het font meer richting zwart te halen?
Zodoende kan elke gebruiker zelf bepalen wat het juiste contrastnivo is voor hun scherm.
Ik kan dat wel met custom CSS oplossen maar dat lost het alleen voor mij op.

[FolkertP]

Ziet er goed uit op mobiel en werkt goed!
Bedankt voor het verlossen van die app.

[Phyxion]

Misschien dat het nieuwe h1/h2 font nog wat aangepast kan worden? Op het feit na dat het echt een afschuwelijk font is krijg ik er gewoon zere ogen van. Gezien mijn +3 reactie over de aanpassing van het font ben ik blijkbaar niet de enige.

Overigens zou ik de border rechts van het nieuws weghalen, het ziet er zo erg rommelig en streperig uit.

[MikeyMan]

Vind het nieuwe design eigenlijk best fijn

Enige opmerkingen die ik heb zijn:
- verticale uitlijning op mijn one is vrij ruim. Zou wat compacter kunnen
- in het forum overzicht zijn de 'paginaknoppen' wat hoog
- ik mis op het forum overzicht de laatste post-tijd/datum.
- het zou mooi zijn als de 'weergaveopties' ook de gedetecteerde schermformaten zou weergeven.

Verder; keep up the good work!

Edit: laatste post staat er in medium wel tussen. Dan wordt mijn one dus als klein gezien met full-HD scherm

[ Voor 25% gewijzigd door MikeyMan op 07-01-2014 21:27 ]