Door een lezer werd ik erop geattendeerd dat Usarchy er niet goed uitziet in Safari op Apple’s Mac. Dat kan natuurlijk niet op een usability weblog, dus ik probeer al een tijdje een Safari emulator te vinden. Ik wil namelijk graag mijn CSS aanpassen zodat Usarchy er in Safari ook fatsoenlijk uit ziet, maar heb zelf geen toegang tot een Apple met Mac OSX. Al zal dat niet lang meer duren, want ik vind dat ik toch eens de interface van Apple moet ervaren.
Het vinden van een programma dat Safari nadoet is echter niet makkelijk. Safari is gebaseerd op de browser engine van Konqueror, dus onder linux zou ik misschien iets kunnen testen. Dat zal ik later vandaag nog even proberen op de Gentoo bak die ik hier heb staan.
Op zoek naar een emulator of een preview tool kwam ik de site iCapture van Danvine.com tegen. Daar kun je een URL invullen, waarna iCapture er een screenshot van maakt zoals de site er in Safari uit ziet. Denk ik, want ik kan het niet testen voorlopig 🙂 De tool is echter wel erg leuk uitgevoerd. Hier schrikbarende resultaat van Usarchy onder Safari.
Klachten over een lelijke lay-out in welke browser onder welk OS dan ook zijn van harte welkom! (al weet k dat er ook nog wel wat issues zijn onder IE6 voor Windows, dat schijnt ook een populaire combinatie te zijn)
Ik ben geen CSS guru, maar ik zal mijn best doen…
usarchy.com 
Moet de titel niet zijn: ‘ Bekijk je website in Mac‚Äôs Safari zonder een Mac’ 🙂
LikeLike
Uhh lol ja eigenlijk wel. Of met een PC 😉
LikeLike
Op Safaritest kun je hetzelfde, met als extra opties de breedte van de afbeelding (lees: beeldscherm) en de kwaliteit van de afbeelding.
LikeLike
Misschien is http://www.browsercam.com/ ook wel leuk om even naar te kijken? Heb dit ene jaartje geleden getest, en werkte best goed 🙂
LikeLike
Da’s een mooie tip, Sander! En het valt me 100% mee. Ik had verwacht dat mijn site (nooit getest op Apple) er ook niet uit zou zien, maar het blijkt pixel-perfect 🙂 (en nou niet zeggen dat dat eigenlijk nog ernstiger is)
LikeLike
Maar nog steeds zijn de letters miniscuul… (met Safari op een Mac)
LikeLike
Een aardig alternatief voor browser-bezichtiging met Browsercam.com is de online Browsershots.org. Vooral ook omdat Browsercam commercieel is, en Browsershots gratis.
Url’tje erin tikken – even wachten – en ja, deze pagina is prachtig op Safari 2.0 onder Mac OS-X. 🙂
francky
PS:
De kleine lettertjes op Safari zitten ‘m denkelijk in de eigenlijk te grote letters in IE op PC. Met de css-aanvulling:
body { font-size: 100.1%; }zou dat te verhelpen moeten zijn. De font-sizing in em’s verderop in het stylesheet moet dan ws. wat aangepast worden, en dan zouden cross-browser min of meer dezelfde letterformaten getoond moeten worden. De 1/10 % extra is om Opera in het gareel te houden.LikeLike
Thanks voor die aanvulling Franky! (En welkom op Usarchy ;)) Dat font size geklooi in Internet Explorer zit me vaker dwars, zie ook de comment van Sander:
http://www.usarchy.com/2006/09/tips-usability-formulieren/#comment-1045
LikeLike
Mijn ervaring is dat de font-size in Firefox, Opera en IE hetzelfde is, op PC onder Windows althans. Moet er wel bijzeggen dat ik eigenlijk altijd em gebruik i.p.v. %. Wellicht dat dat uitmaakt.
LikeLike
Als je je monitor DPI anders instelt (ik heb hem op 106dpi omdat ik anders scheeld word van de kleine letters) wordt je font-size in IE heel anders, maar in andere browsers niet… Nog vermoeiender 🙂
LikeLike
De scherm-resolutie wil ook aardig aantikken! Kleine letters op zich
kan ik wel aan, maar niet: kleine letters in combinatie met v?©?©l te
lange regels (vaak het geval bij hoge reso’s).
Breedte van de ’s aanpassen op de lettergrootte (dus ????k met
width in em’s i.p.v. in % [van de screenwidth] ) kan lucht geven, maar
dan komen vaak andere designproblemen om de hoek kijken.
@Sander: idd. Ik heb hier nog een simpele testpagina zwerven.
Kan iedereen zelf kijken (met browsershots in de aanslag voor
browser/mac/pc verschillen).
Extra’tje: getoonde letergroottes zijn ook nog eens afhankelijk van
het lettertype! – De lettertypen in verschillende browsers zijn niet
allemaal even groot: de Courier in IE is bv. een stuk groter dan de
Courier in FF, terwijl de Arial in beide hetzelfde is…
Dat het formaat van de systeem-letters kleiner is dan de browser-letters
lijkt me te verklaren: als de systeemletters net zo groot zouden zijn
als “gewone tekst” op een pagina (web-pagina, Word-pagina, enz.),
zouden alle werkbalken bij elkaar veel te veel ruimte van het scherm
af snoepen: minimale werkruimte!
Wie meer wil studeren op font-size, kan zijn hart ophalen in de
css-discuss Wiki (item: Sizing Text). *)
Bv. alleen al de links op de pagina “How do I size fonts” zijn goed
voor vele uurtjes leesplezier en hersengekraak! 🙂
O ja, ronde hoekjes! Heb ik toevallig ook nogal wat over in
voorraad. Zie artikel en speeltuin “Liquid Round Corners”.
(de NL-versie moet ik nog ’s updaten…)
francky
*) Ook goed voor allerlei andere css zaken!
(PS: een preview voor ingetikte reacties zou mooi zijn om tikfoutjes eruit te halen enzo.)
LikeLike
Het ps’je bleek te kloppen; ik was ergens een vergeten! 😉
LikeLike
ik zat te twijfelen of mijn website ook was te zien via browsrcamp, gelukkig ziet het even goed uit. http://80.116.187.76/safaritest/1187006164-full.jpg
Jongen en meisjes, bedankt voor de gouden tips
http://www.tangostyle.nl
groeten
LikeLike
de letters van safari zij ineens heel groot kan iemand me helpen
LikeLike