Valt mij op dat de icoontjes en logos op de site allemaal net niet helemaal scherp zijn. (Op nexus5) Gekeken in de CSS en zie dat er alleen een 2x variant voor is. Met de huidige 3x schermen kan dat wat hoger..! Wellicht een icon font of svg afbeeldingen voor alles vanaf 2x?
:strip_icc():strip_exif()/u/373264/misha.jpeg?f=community)
/u/339914/crop614f2ddc29025.png?f=community)
Die mogen imho ook wel een iets hogere resolutie krijgen. Onze designer is er alleen eventjes niet, dus het moet even op zich laten wachten 
Verwijderd
Iconen / logo's moet je maken als Vector (SVG) en niet als bitmap. Dat is toch altijd de regel in webdesign?
SVG kan namelijk niet onscherp worden.
Edit: Zo te zien zijn de Icons gemaakt in PNG. http://tweakimg.net/g/if/...k/menu_responsive_new.png
Misschien een verbeter puntje i.v.m. hoge resulatie mobile devices zoals retina ipad's en hoge resolutie Android telefoons?
Het is niet zo zeer belangrijk om nu aan te passen.
Maar iconen en logo's. Dat moet toch SVG?
p.s. SVG is vaak ook qua size kleiner. Het is een WIN-WIN situatie!
SVG kan namelijk niet onscherp worden.
Edit: Zo te zien zijn de Icons gemaakt in PNG. http://tweakimg.net/g/if/...k/menu_responsive_new.png
Misschien een verbeter puntje i.v.m. hoge resulatie mobile devices zoals retina ipad's en hoge resolutie Android telefoons?
Het is niet zo zeer belangrijk om nu aan te passen.
Maar iconen en logo's. Dat moet toch SVG?
p.s. SVG is vaak ook qua size kleiner. Het is een WIN-WIN situatie!
[ Voor 58% gewijzigd door Verwijderd op 10-12-2013 20:48 ]
/u/372832/Avarat010.png?f=community)
Het voordeel van dit soort png bestanden is dat je maar 1 afbeelding hoeft te laden. Hierdoor heb je gelijk alle iconen. Als je voor iedere icoontje een apart svg file hebt, moet er voor elke afbeelding opnieuw connectie gemaakt worden om het binnen te halen. Dus in plaats van 1 connectie voor alle afbeeldingen wordt het 7 connecties voor alle afbeeldingen.:
Iconen / logo's moet je maken als Vector (SVG) en niet als bitmap. Dat is toch altijd de regel in webdesign?
SVG kan namelijk niet onscherp worden.
Edit: Zo te zien zijn de Icons gemaakt in PNG. http://tweakimg.net/g/if/...k/menu_responsive_new.png
Misschien een verbeter puntje i.v.m. hoge resulatie mobile devices zoals retina ipad's en hoge resolutie Android telefoons?
Het is niet zo zeer belangrijk om nu aan te passen.
Maar iconen en logo's. Dat moet toch SVG?
p.s. SVG is vaak ook qua size kleiner. Het is een WIN-WIN situatie!
Tevens heb je door deze png ook alle andere mouse event (bv mouse-over) iconen binnen gehaald. Hij zit immers als in je cache omdat die ergens anders ook al voor gebruikt is. Als je afbeeldingen één voor één binnen haalt, doet die dat voor het mouse-event volgens mij pas zodra je de mouse-event uitvoert. Mocht je dan beetje een kut verbinding hebben, haalt die die afbeelding niet binnen, en krijg je dus niks te zien. Zeker met een responsive design is dat wel een kwestie. De keren dat ik gebruik maak van de responsive design is als ik op mijn telefoon zit, in de trein. In sprinters heb ik best vaak geen 3g verbinding in bepaalde weilandgebieden.
Wat wel handig is, is om van iedere icoon een svg bestand te hebben, om zodra het moet het te bewerken. In dit geval om ook een x3 versie te maken. Maar lijkt me logisch (en vanzelfsprekend) dat het designteam van Tweakers alle icoonen wel in svg op hun computer hebben staan.
[ Voor 31% gewijzigd door Hedva op 10-12-2013 21:31 . Reden: Ik heb meer slaap nodig ]
/u/1830/acm.png?f=community)
Op zich is het geen gek idee. Het lost allerlei problemen mbt "retina"-weergave en switchen tussen diverse afbeeldingen op... maar ik heb uiteraard wel wat praktische vragen daarbij:
Maar iconen en logo's. Dat moet toch SVG?
p.s. SVG is vaak ook qua size kleiner. Het is een WIN-WIN situatie!
Ondersteunen alle moderne browsers wel SVG in een img-tag? Want als we er allerlei rare trucken voor moeten uithalen... Als ik deze pagina bekijk, lijkt het erop dat IE8 het niet ondersteund. En die is toch nog net niet helemaal van onze supported-browserlijst afgevallen. In ieder geval niet op zo'n manier dat we daadwerkelijk geen - nu - prima werkende afbeeldingen willen verbergen.
En er staan daar ook geen mobiele devices bij, moderne zullen vast met SVG overweg kunnen (mijn android 4.0 tablet kan het iig), maar geldt dat ook voor de wat oudere?
Zijn SVG's (goed) te combineren is met sprite-maps? Zoals o.a. voor die specifieke kleurtjes worden gebruikt, maar wat we eigenlijk voor alle ondersteunende elementen proberen te gebruiken.
En last but not least, is het renderen van SVG even licht/zwaar als png of gif? Juist mobiele devices houden natuurlijk niet enorm over, zeker de wat goedkopere. Responsive is effectief al een verzwaring van de pagina, dus dat willen we zoveel mogelijk beperken
:strip_exif()/u/343403/avatar.gif?f=community){kind=avatar}
Als we nu toch gaan zeuren over de icons, ik vind het zwarte lijntje rond de drie balkjes links en rechts boven niet zo mooi... 
Zou er beter uitzien zonder dat lijntje (zoek icon heeft het ook niet namelijk)
Zou er beter uitzien zonder dat lijntje (zoek icon heeft het ook niet namelijk)
Je bedoelt dan de borders rond de vier plaatjes die hierin boven 'tweakers' staan?
http://tweakimg.net/g/if/...k/menu_responsive_new.png
Volgens mij zijn die niet zwart, maar uiteraard wel een donkerdere kleur dan de rest en idd ook duidelijk meer aanwezig dan bij de andere plaatjes
http://tweakimg.net/g/if/...k/menu_responsive_new.png
Volgens mij zijn die niet zwart, maar uiteraard wel een donkerdere kleur dan de rest en idd ook duidelijk meer aanwezig dan bij de andere plaatjes
[ Voor 11% gewijzigd door ACM op 10-12-2013 21:42 ]
Ik wil nog steeds eens wat meer spieken naar http://icomoon.io. Ben benieuwd hoe dat in de praktijk werkt
Ja dat:
Je bedoelt dan de borders rond de vier plaatjes die hierin boven 'tweakers' staan?
http://tweakimg.net/g/if/...k/menu_responsive_new.png
Volgens mij zijn die niet zwart, maar uiteraard wel een donkerdere kleur dan de rest en idd ook duidelijk meer aanwezig dan bij de andere plaatjes
Vooral op een IPS LCD scherm is dat donkere lijntje goed te zien (Lumia 920, rgb) Op een scherm met Amoled valt het dan weer minder goed op (Lumia 925, pentile rgbg) maar dat komt waarschijnlijk door de pixelindeling waardoor de dikte van dat lijntje minder lijkt te zijn.
[ Voor 42% gewijzigd door Whatson op 10-12-2013 21:57 ]
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
Ik denk dat je dan beter gewoon SVG kan gaan doen (met fallback naar een gewoon plaatje voor oude IE). Lijkt me veel efficienter dan een font-file hiervoor misbruiken...:
Ik wil nog steeds eens wat meer spieken naar http://icomoon.io. Ben benieuwd hoe dat in de praktijk werkt
Intentionally left blank
Wat vrienden van me waren er erg over te spreken. But then again; zij vinden fancy flikkerende call to actions, over-used parallax scrolling etc ook helemaal geweldig 
http://caniuse.com/svg
Voor IE8 en andere stokoude browsers zou je bijvoorbeeld mbv content-negotiation alsnog een png kunnen serveren.
Maar dat laat onverlet dat in sommige situaties een png versie toch de voorkeur heeft; bijvoorbeeld voor de segment-plaatjes waar de hoge-resolutie versies ook daadwerkelijk meer detail hebben. (Kan uiteraard ook wel met meerdere versies SVG's). En inderdaad, sprites is ook iets waar je dan naar moet gaan kijken, en de mogelijkheid tot inlinen in CSS bijvoorbeeld om toch het aantal benodigde requests te beperken.
[ Voor 10% gewijzigd door crisp op 10-12-2013 23:00 ]
Intentionally left blank
In de basis is een font ook SVG. Ik snap alleen niet waarom je dat per-sé als een font zou willen gebruiken en niet simpelweg direct SVG plaatjes gebruiken, behalve dan misschien dat je heul veul icons dan in 1 (huge) bestand kwijt kan - effectief ook een soort spritemap, maar wel een met veel extra overhead (ook qua onderhoudbaarheid).:
Wat vrienden van me waren er erg over te spreken. But then again; zij vinden fancy flikkerende call to actions, over-used parallax scrolling etc ook helemaal geweldig
[ Voor 9% gewijzigd door crisp op 10-12-2013 23:00 ]
Intentionally left blank
Als je het echt goed wilt doen, doe het dan met CSS!
http://www.1stwebdesigner.com/css/css-icons-logos/
Heeft alle voordelen voor zover ik weet
Enige nadeel is dan de hoeveelheid werk/tijd die je er in moet steken...
http://www.1stwebdesigner.com/css/css-icons-logos/
Heeft alle voordelen voor zover ik weet
Enige nadeel is dan de hoeveelheid werk/tijd die je er in moet steken...
Bloated, veel werk, niet makkelijk los te embedden en werkt niet in oudere browsers...:
Als je het echt goed wilt doen, doe het dan met CSS!
http://www.1stwebdesigner.com/css/css-icons-logos/
Heeft alle voordelen voor zover ik weet
Enige nadeel is dan de hoeveelheid werk/tijd die je er in moet steken...
Intentionally left blank
Verwijderd
Wat dacht je van de performance?:
[...]
Bloated, veel werk, niet makkelijk los te embedden en werkt niet in oudere browsers...
Hier gebruiken we waar mogelijk altijd icon-fonts, werkt super, altijd scherp en zo goed als iedere browser die er tot toe doet ondersteunt dit.
Feit is dat je met CSS toch vaak nog redelijk wat markup nodig hebt om voldoende 'hooks' te hebben voor ingewikkeldere vormen. We passen het overigens wel al toe hoor, bijvoorbeeld voor de 'close'-buttons van overlays en 'back'-buttons; daar komen we met enkel :before en :after al een heel eind.:
[...]
Wat dacht je van de performance?
En toch is het m.i. een beetje een 'hack' om daarvoor fonts te gebruiken ipv losse SVG's. Voor multi-color is het ook niet bruikbaar.
Intentionally left blank
Verwijderd
Ik kan het niet bewijzen maar gevoelsmatig lijkt mij een SVG toch lichter. Ik kan het fout hebben hoor als je kunt bewijzen dat een CSS icoon lichter is.:
[...]
Wat dacht je van de performance?
Hier gebruiken we waar mogelijk altijd icon-fonts, werkt super, altijd scherp en zo goed als iedere browser die er tot toe doet ondersteunt dit.
Dan verontschuldig ik me haha. Echter is een SVG wel makkelijker te maken.Edit: Ik verbaas me trouwens wel naar wat je kan maken met CSS3
als ik je link even goed had bekeken. Gaaf hoor!
[ Voor 9% gewijzigd door Verwijderd op 11-12-2013 18:51 ]
ik bedoel juist dat css icoontjes zwaarder zijn... gradients, shadows, etc, worden niet leuk gevonden door de render engine. om over cross-browser nog maar te zwijgen!:
[...]
Ik kan het niet bewijzen maar gevoelsmatig lijkt mij een SVG toch lichter. Ik kan het fout hebben hoor als je kunt bewijzen dat een CSS icoon lichter is.
Edit: Ik verbaas me trouwens wel naar wat je kan maken met CSS3
:strip_exif()/u/17059/joost.gif?f=community)
Interessant leesvoer: http://ianfeather.co.uk/t...from-an-icon-font-to-svg/
Intentionally left blank
Pagina: 1