To slice or not to slice?

[Verwijderd]

Ik, en iemand van mijn groep, hadden daarstraks een discussie over het slices van websites. Hij beweerde dat alle professionele webontwerpers slicen (= layout opdelen en omzetten naar XHTML/CSS) in Photoshop/Fireworks. Ik, daarentegen, heb nog nooit gebruik gemaakt van de slice-tool. Ik schrijf mijn XHTML en CSS nog altijd zelf. Ik gebruik ook afbeeldingen, maar ik vertrek niet van een volledige layout om hem daarna volledig te slicen. Ik maak gebruik van aparte figuren/afbeeldingen. Ben ik hiermee ouderwets of gebruik ik gewoon een andere methode?

[Cartman!]

Ontwerpers moeten sowieso met hun fikken van de code afblijven

[Verwijderd]

Ik heb zelden meer dan 3 of 4 afbeeldingen gebruikt om het grootste deel van de layout van een site te regelen. Meestal komt het neer op 2 of 3 goed gekozen achtergrondafbeeldingen.

Bijna alle ontwerpers/developers die in kleine rechthoekjes slicen zijn volgens mij prutsers die niets snappen van markup en alleen maar in beeld denken. Gevolg is dat er allerlei overbodige markup moet worden bedacht om die plaatjes op hun plek te krijgen.

[Bosmonster]

Ik ken geen enkele frontend developer die "sliced". Tegenwoordig (laten we zeggen de afgelopen 10 jaar) gebruiken we namelijk CSS en geen "tabel" met plaatjes.

Samengevat is slicen een ouderwetse en amateuristische manier van werken. Daar ga je professioneel mee door de mand vallen, wanneer er toch echt wel meer van je verwacht wordt dan de capaciteit plaatjes op te knippen.

[ Voor 23% gewijzigd door Bosmonster op 21-02-2011 19:50 ]

[RobIII]

Bosmonster schreef op maandag 21 februari 2011 @ 19:48:
Ik ken geen enkele frontend developer die "sliced".

Ik ken er wel, maar die verdienen de titel frontend developer dan weer niet Lang verhaal kort: met bovenstaande 2 heren

[Flowmo]

Slicen is voor "webdesigners" die denken "websites" te kunnen "bouwen". Ja, bewust daar aanhalingstekens geplaatst

Vroeger uiteraard ook wel eens geprobeerd, maar tijdens je studie en professionele carriere kom je er als snel genoeg achter dat dat verre van de juiste manier is van werken. Als je voor elk element in he interface een afbeelding zou gebruiken, dan krijg je pagina's van een paar honderd kb, nog voordat de content erop geplaatst is.

CSS is the way to go, aangevuld met hooguit een achtergrond en header afbeelding en wat CSS sprites voor veelgebruikte elementen.

[WeeJeWel]

Wat maakt het uit hoe je het noemt? Sommige klanten vertel ik dat ik slice, anderen dat ik base (sitedeals.nl term) en weer anderen dat ik een front-end ontwikkelaar ben. Iedereen weet wat ik bedoel en daar gaat het uiteindelijk om.

Ik vind dat alle drie gewoon het namaken van een ontwerp in code is

[Avalaxy]

Wat is er mis met slicen? Ik maak altijd een soort prototype in photoshop, 'slice' de nuttige dingen eruit (zoals de header, meer is het uiteindelijk meestal niet ), ik doe save for web, en ik sla puur de afbeeldingen op. De HTML typ ik volledig zelf (met CSS). Maar dat heeft niet veel meer met slicen zelf te maken. Slicen is gewoon het opdelen van je lay-out in kleinere vakjes, en ik zie écht niet in wat daar mis mee is?

[Flowmo]

Slicen volgens de tool van Photoshop is lijntjes trekken om content elementen om daarmee het content element in afbeeldingen op te delen in plaats van behoorlijke divjes met CSS styling. Slicen zelf zorgt ook voor enorm veel table layouts ipv div layouts. Als je de slice tool van Photoshop alleen gebruikt voor de afbeeldingen dan kan het weinig kwaad, aangezien je daarna zelf je layout nog gaat coden (tenzij je dat zelf ook in tables doet ).

[Avalaxy]

Waar jullie het eigenlijk over hebben is dus niet 'slicen', maar de 'generate html' functie van 'save for web'.

[Bosmonster]

"slicen" = opsnijden

Over het algemeen snij je niet je ontwerp op, maar bouw je je ontwerp op middels CSS en knip je wat afbeeldingen uit die je nodig hebt.

[Avalaxy]

Bosmonster schreef op maandag 21 februari 2011 @ 20:18:
en knip je wat afbeeldingen uit die je nodig hebt.

Dat is dus exact wat slicen doet.

[Bosmonster]

Avalaxy schreef op maandag 21 februari 2011 @ 20:19:
[...]


Dat is dus exact wat slicen doet.

Dan gebruik je slicen als een soort selectietool en niet meer en ontgaat het nut me van de functie.

Daarnaast, hoe weet die slice-functie welke lagen of layer comps ik wil hebben? Wat als ik een transparante PNG wil?

Slicen is vooral nuttig uiteindelijk als snelle opknip tool en ik zie het nut dus niet als het enige is dat je wilt doen een paar afbeeldingen uit de PSD halen, liefst uiteraard met 100% controle over wat je uitknipt.

[ Voor 48% gewijzigd door Bosmonster op 21-02-2011 20:24 ]

[Avalaxy]

Bosmonster schreef op maandag 21 februari 2011 @ 20:21:
[...]


Dan gebruik je slicen als een soort selectietool en niet meer en ontgaat het nut me van de functie.

Zoals ik al zei; prototyping in PS.

Daarnaast, hoe weet die slice-functie welke lagen of layer comps ik wil hebben? Wat als ik een transparante PNG wil?

Dat werkt volgens mij gewoon prima. Desnoods even je andere layers invisible maken, maar transparancy pakt ie gewoon.

[CH4OS]

Flowmo schreef op maandag 21 februari 2011 @ 20:14:
Slicen volgens de tool van Photoshop is lijntjes trekken om content elementen om daarmee het content element in afbeeldingen op te delen in plaats van behoorlijke divjes met CSS styling. Slicen zelf zorgt ook voor enorm veel table layouts ipv div layouts. Als je de slice tool van Photoshop alleen gebruikt voor de afbeeldingen dan kan het weinig kwaad, aangezien je daarna zelf je layout nog gaat coden (tenzij je dat zelf ook in tables doet ).

Geen tables gebruiken is geen vrijbrief dat je 'dan maar' zoveel mogelijk divs 'mag' gebruiken. Gebruik zo min mogelijk divs dus, en gebruik HTML zo semantisch mogelijk. Daar heeft elke gebruiker / browser profijt van en ja, zelfs blinden kunnen dan jouw website (goed) begrijpen. Vergeet niet dat je de inhoud van divs ook kan stylen met CSS (en dat idee heb ik eigenlijk wel, dat veel mensen dat vergeten).

[Bosmonster]

Avalaxy schreef op maandag 21 februari 2011 @ 20:24:
[...]


Zoals ik al zei; prototyping in PS.

Prototyping in PS? Verklaar je nader, met name over wat dit met slicen te maken heeft.

Dat werkt volgens mij gewoon prima. Desnoods even je andere layers invisible maken, maar transparancy pakt ie gewoon.

Even je andere layers onzichtbaar maken? Dat zijn er soms honderden. Lijkt me makkelijker die la(a)g(en) er even uit te trekken en op te slaan (en dus wederom geen slicing).

[Verwijderd]

Avalaxy schreef op maandag 21 februari 2011 @ 20:06:
Wat is er mis met slicen? Ik maak altijd een soort prototype in photoshop, 'slice' de nuttige dingen eruit (zoals de header, meer is het uiteindelijk meestal niet ), ik doe save for web, en ik sla puur de afbeeldingen op. De HTML typ ik volledig zelf (met CSS). Maar dat heeft niet veel meer met slicen zelf te maken. Slicen is gewoon het opdelen van je lay-out in kleinere vakjes, en ik zie écht niet in wat daar mis mee is?

Het punt is dat de browser voor ieder plaatje wat je gebruikt even contact met jouw server moet opnemen. Voor elk plaatje wordt dan een request opgebouwd, verzonden, response opgebouwd (je server), verzonden en verwerkt.

Dit gaat natuurlijk 100x sneller als je maar 1 afbeelding hebt ipv 100 kleine. Verder kan je met CSS deze afbeelding desgewenst opdelen in slices. Dus, client side.

Zie ook deze pagina: http://www.whelp.nl/css-sprite-design/

[Flowmo]

CptChaos schreef op maandag 21 februari 2011 @ 20:26:
[...]
Geen tables gebruiken is geen vrijbrief dat je 'dan maar' zoveel mogelijk divs 'mag' gebruiken. Gebruik zo min mogelijk divs dus, en gebruik HTML zo semantisch mogelijk. Daar heeft elke gebruiker / browser profijt van en ja, zelfs blinden kunnen dan jouw website (goed) begrijpen. Vergeet niet dat je de inhoud van divs ook kan stylen met CSS (en dat idee heb ik eigenlijk wel, dat veel mensen dat vergeten).

Eeehhhrrr, "zoveel mogelijk divs"...? Waar haal je dat vandaan? Ik zeg alleen dat de slice functie in PS tables genereert en geen divs. Verder hoef je mij niet de les te lezen over semantische of accessible HTML, thank you very much

[Verwijderd]

Avalaxy schreef op maandag 21 februari 2011 @ 20:06:
Slicen is gewoon het opdelen van je lay-out in kleinere vakjes, en ik zie écht niet in wat daar mis mee is?

Terug je hok in dan. Ik daag je uit eens eerst alle nodige markup te schrijven en dan met CSS alles op zijn plaats te krijgen en dan als laatste de afbeeldingen toe te voegen. Je zult zien dat dat heel anders gaat dan hakhakhakhakhak.

[jmxd]

De slice tool gebruik ik nooit nee, maar als ik een ontwerp in Photoshop heb gemaakt dan crop ik wel het nodige er uit natuurlijk als dat moet.

Maar ontwerp de laatste tijd eigenlijk nog enkel in de browser en vrij weinig in photoshop.

[Gomez12]

Wat verstaat iedereen precies onder slicen? Want volgens mij praten er meerdere langs elkaar heen.

Persoonlijk doe ik nog wel eens het volgende :
- Klant komt met een opzet op een kladje
- Dit gooi ik even snel in illustrator zodat de klant een beeld heeft
- Dat "slice" ik even in stukjes zodat ik snel met eigen css een "werkend" html-prototype heb
- Als de klant hiermee akkoord is, dan wordt de rest bepaald en uiteindelijk zit er in het eindresultaat geen enkel plaatje meer vanuit het "geslicede" illustrator bestand.

Ben ik dan wel of niet aan het "slicen"?

[jmxd]

Ja en nee, maar de hamvraag is wat die je in godsnaam in illustrator?

[Gomez12]

Twylight schreef op maandag 21 februari 2011 @ 20:39:
Ja en nee, maar de hamvraag is wat die je in godsnaam in illustrator?

Ach, CS license hebben en sinds in versie 5 de samenwerking tussen de progs redelijk werkt vind ik het makkelijker om de basis blokken in illustrator op te bouwen om daarna de pics eroverheen te leggen.

Maar dat is puur persoonlijk.

[Bosmonster]

Gomez12 schreef op maandag 21 februari 2011 @ 20:42:
[...]

Ach, CS license hebben en sinds in versie 5 de samenwerking tussen de progs redelijk werkt vind ik het makkelijker om de basis blokken in illustrator op te bouwen om daarna de pics eroverheen te leggen.

Maar dat is puur persoonlijk.

Maar hoe stel je dan de juiste resolutie/dpi in in Illustrator

Heb wat slechte ervaringen met designers die webdesigns aanleveren als Illustrator of PDF Best lastig om vectoren om te zetten naar een strak pixelprecies ontwerp.

[ Voor 16% gewijzigd door Bosmonster op 21-02-2011 20:45 ]

[Avalaxy]

Bosmonster schreef op maandag 21 februari 2011 @ 20:26:
[...]


Prototyping in PS? Verklaar je nader, met name over wat dit met slicen te maken heeft.

Je 'tekent' je lay-out in photoshop om te kijken wat je ongeveer wilt. Als je dan een mooi logo of whatever hebt gemaakt slice je die eruit, sla je op als afbeelding, en voeg je toe in je lay-out/css/html.

Verwijderd schreef op maandag 21 februari 2011 @ 20:30:
[...]

Terug je hok in dan. Ik daag je uit eens eerst alle nodige markup te schrijven en dan met CSS alles op zijn plaats te krijgen en dan als laatste de afbeeldingen toe te voegen. Je zult zien dat dat heel anders gaat dan hakhakhakhakhak.

Uhm... Waarom zou je niet gewoon gelijk met een standaard design beginnen in photoshop (denk aan een 960px width blok) en hier stukje van in je HTML gooien? Op beide manieren komt er bij mij echt hetzelfde uit hoor... En natuurlijk gebruik ik niet al m'n plaatjes uit photoshop, het meeste wat ik getekend heb (eigenlijk vrijwel alles) doe ik daarna opnieuw; maar dan in HTML en CSS.

[Gomez12]

Bosmonster schreef op maandag 21 februari 2011 @ 20:44:
[...]
Maar hoe stel je dan de juiste resolutie/dpi in in Illustrator

Waarvoor zou ik dat nodig hebben? Nogmaals, ik gebruik het enkel om een snelle mockup te krijgen die iets kan doen, dit kost me veelal een kwartiertje werk.

En mijn klanten zitten niet echt in het segment van pixelprecies enzo. Meer inhouse klanten die enigzins een idee mogen geven en daarna maar te slikken hebben wat ze krijgen

Avalaxy schreef op maandag 21 februari 2011 @ 20:45:
[...]
Je 'tekent' je lay-out in photoshop om te kijken wat je ongeveer wilt. Als je dan een mooi logo of whatever hebt gemaakt slice je die eruit, sla je op als afbeelding, en voeg je toe in je lay-out/css/html.

Wmb slice je dan niet meer maar ben je enkel maar 1 afbeelding aan het croppen.
Onder slicen versta ik echt het grootste gedeelte van je layout halen uit PS.

[ Voor 31% gewijzigd door Gomez12 op 21-02-2011 20:55 ]

[Cartman!]

Gomez12 schreef op maandag 21 februari 2011 @ 20:53:
Waarvoor zou ik dat nodig hebben? Nogmaals, ik gebruik het enkel om een snelle mockup te krijgen die iets kan doen, dit kost me veelal een kwartiertje werk.

Jij misschien niet? Serieuze designers die werken wel pixelprecies.

En mijn klanten zitten niet echt in het segment van pixelprecies enzo. Meer inhouse klanten die enigzins een idee mogen geven en daarna maar te slikken hebben wat ze krijgen

Dan ben ik blij dat ik geen klant ben bij jou, misschien is je prijs er dan ook naar...dat zou natuurlijk kunnen.

edit: heb ook weleens een PDF gekregen van een "design-bureau" die dus normaal print doen, klopt echt helemaal geen hout van. Lelijk dat t was ook

[ Voor 10% gewijzigd door Cartman! op 21-02-2011 21:47 ]

[Gomez12]

Cartman! schreef op maandag 21 februari 2011 @ 21:47:
[...]
Jij misschien niet? Serieuze designers die werken wel pixelprecies.

Als je pixelprecies wilt hebben moet je niet aankomen met illustrator

[...]
Dan ben ik blij dat ik geen klant ben bij jou, misschien is je prijs er dan ook naar...dat zou natuurlijk kunnen.

Nogmaals : Meeste klanten zijn inhouse... Ik ben geen prof webdeveloper, enkel inhouse en als iemand die ik ken iets wil.

[Cartman!]

Gomez12 schreef op maandag 21 februari 2011 @ 22:26:
Als je pixelprecies wilt hebben moet je niet aankomen met illustrator

Precies m'n punt, een programma wat niet bedoeld is voor web er toch voor gebruiken vind ik apart.

Nogmaals : Meeste klanten zijn inhouse... Ik ben geen prof webdeveloper, enkel inhouse en als iemand die ik ken iets wil.

Webdeveloper designen doorgaans ook niet, daar heb je webdesigners voor...

[WeeJeWel]

Cartman! schreef op maandag 21 februari 2011 @ 22:31:
[...]

Precies m'n punt, een programma wat niet bedoeld is voor web er toch voor gebruiken vind ik apart.

heb je enig idee waar photoshop voor bedoeld is?

[Gomez12]

Cartman! schreef op maandag 21 februari 2011 @ 22:31:
[...]
Precies m'n punt, een programma wat niet bedoeld is voor web er toch voor gebruiken vind ik apart.

Ach, dan zal je het ook apart vinden dat soms noodpatches via vi lopen. Shit happens learn to live with it
Ik kan in illustrator enigszins werken dus waarom niet.

[...]
Webdeveloper designen doorgaans ook niet, daar heb je webdesigners voor...

Tja, webdesigners mogen dan een mooi plaatje aanleveren en hebben met hun takken weer af te blijven van dingen als slicen

[Saven]

Bosmonster schreef op maandag 21 februari 2011 @ 20:18:
"slicen" = opsnijden

Over het algemeen snij je niet je ontwerp op, maar bouw je je ontwerp op middels CSS en knip je wat afbeeldingen uit die je nodig hebt.

dat dus.

maar dan heb je ook nog van die 13-in-een-dozijn types/webdesignbedrijfjes die het 'basen' noemen

[rhodium]

Ik heb het nut van slicen nog nooit gezien.

Aan de hand van het ontwerp maak je een kale htmlpagina en voeg daar de benodigde css aan toe. De plaatjes snij je op het laatst eruit met de selectie-tool. Met een beetje puzzelen hoef je geen afbeelding van 100kB te gebruiken als header, maar 3 losse afbeeldingen van 5/10kB.

Het kost je alleen een middagje coden en fine-tune. Als je er een beetje handig in bent kan je meteen rekening houden met de verschillenden browsers. Hoef je niet achteraf het recht te gaan zetten in ie7 en ie8.

Als webdesigner leer je maar hoe je nette html en css moet schrijven.

[ Voor 6% gewijzigd door rhodium op 22-02-2011 00:17 ]

[svdplas]

Bosmonster schreef op maandag 21 februari 2011 @ 20:44:
[...]


Maar hoe stel je dan de juiste resolutie/dpi in in Illustrator

Heb wat slechte ervaringen met designers die webdesigns aanleveren als Illustrator of PDF Best lastig om vectoren om te zetten naar een strak pixelprecies ontwerp.

Dit is de reden waarom development niet aan ontwerp zou moeten komen.

Zelf gebruik ik niet de 'Slice' tool.
Ik select mijn onderdelen met Ctrl+C/V CTRL+N en save ze als pngs indien nodig en dan knal ik ze in css.

Jullie slingeren met allemaal kak termen ipv "vak termen" door elkaar heen, dat jullie door t bos de boompjes niet meer kunnen zien.

Daarnaast het uitzetten van Layers is normaal bij PSD > HTML
Omdat een goede ontwerper georganiseerd werkt met mappen bij een Website template, Zo niet slap his face.

WeeJeWel schreef op maandag 21 februari 2011 @ 22:34:
[...]


heb je enig idee waar photoshop voor bedoeld is?

Photoshop is origineel bedacht als Photo editer en editer voor grafisch beeldmateriaal
Illustrator is gemaakt voor Illustraties cq drukwerk, photoshop kan dit ook alleen moet je dan 300 res documenten maken

Fireworks is ontwerpen voor Webbased designs.

[ Voor 19% gewijzigd door svdplas op 22-02-2011 02:10 ]

[MuisM4t]

Een goed ontwerp begint met -verassing! - een ontwerp. Daarna ga je die shit omzetten naar semantische htm/css/javascript funky click menu dinges . First things first.

[ Voor 87% gewijzigd door MuisM4t op 22-02-2011 02:34 ]

[rhodium]

@hierboven^^ Een goed ontwerp begint met een stapel schetsen...

[mrFoce]

Avalaxy schreef op maandag 21 februari 2011 @ 20:06:
Wat is er mis met slicen? Ik maak altijd een soort prototype in photoshop, 'slice' de nuttige dingen eruit (zoals de header, meer is het uiteindelijk meestal niet ), ik doe save for web, en ik sla puur de afbeeldingen op. De HTML typ ik volledig zelf (met CSS). Maar dat heeft niet veel meer met slicen zelf te maken. Slicen is gewoon het opdelen van je lay-out in kleinere vakjes, en ik zie écht niet in wat daar mis mee is?

Precies, ik gebruikte het altijd voor http://gfx.invisionize.com/index.php/f/1951/ achtige functionaliteit.
Slicen is niets mis mee, handige feature!

Save for web zal ik niet gebruiken daar in tegen

[Bosmonster]

mrFoce schreef op dinsdag 22 februari 2011 @ 06:25:
[...]
Save for web zal ik niet gebruiken daar in tegen

Mag hopen van wel

[kwaakvaak_v2]

Ik hoop het ook, want standaard save as png is niet echt optimaal in photoshop, zelfde geld ook voor jpg

[jmxd]

rhodium schreef op dinsdag 22 februari 2011 @ 06:09:
@hierboven^^ Een goed ontwerp begint met een stapel schetsen...

Nee hoor

[Flowmo]

mrFoce schreef op dinsdag 22 februari 2011 @ 06:25:
[...]

Precies, ik gebruikte het altijd voor http://gfx.invisionize.com/index.php/f/1951/ achtige functionaliteit.
Slicen is niets mis mee, handige feature!

Save for web zal ik niet gebruiken daar in tegen

Slicen mag misschien wel handig zijn, in een hele hoop gevallen is het gewoon niet de juiste manier van werken. Plaatjes zijn niet zaligmakend en al helemaal niet als het op bandbreedte en laadsnelheid aankomt. Dat je een hoop plaatjes uitknipt om hier bijvoorbeeld een CSS sprite van te maken heeft in mijn ogen weinig te maken met "slicen", aangezien de associatie daar vaak mee is dat een designer de complete layout opsnijdt in plaatjes om er vervolgens via Save for Web dan html vol met tables mee te genereren.

Daarnaast is het wel van belang dat je save for web gebruikt, want de gewone Save functie van Photoshop heeft een veel slechter compressie algoritme. Sla een foto of afbeelding maar eens op via Save en via Save for Web, dan zal je het verschil in bestandsgrootte wel zien, met name met JPEG en PNG.

Twylight schreef op dinsdag 22 februari 2011 @ 08:57:
[...]
Nee hoor

Mag het hopen van wel. In ieder geval ruwe mockups qua layout.

[ Voor 7% gewijzigd door Flowmo op 22-02-2011 09:08 ]

[418O2]

Ligt er een beetje aan wat je met slicen bedoelt natuurlijk. Als je ermee bedoelt dat je met de slicetool aan de slag gaat; nee dat doe ik nooit.

Als je er mee bedoelt dat je een meerlaags-PSD uitelkaar trekt en daaruit de afbeeldingen knip, fonts checken, kleuren checkt etc, dan wel.

Maar echt keihard met de slicetool een JPG uitelkaar trekken; nee.

[Bartaz]

Als ik een website ontwerp in Photoshop zorg ik dat er overal smart guides zijn waaronder het ontwerp perfect uitgelijnd staat.
Dan met de marquee tool alles uitknippen wat ik achter een CSS regel wil zetten en that's it. Slicen werkt naar mijn mening niet zo accuraat als de marquee tool.

En slicen + vervolgens omzetten naar HTML via Save for Web en daarna alleen nog de inhoud van de HTML versie aanpassen dat kan tegenwoordig echt niet meer...

EDIT: zelfde als hierboven dus!

[ Voor 3% gewijzigd door Bartaz op 22-02-2011 10:05 ]

[Flowmo]

418O2 schreef op dinsdag 22 februari 2011 @ 10:03:
Ligt er een beetje aan wat je met slicen bedoelt natuurlijk. Als je ermee bedoelt dat je met de slicetool aan de slag gaat; nee dat doe ik nooit.

Als je er mee bedoelt dat je een meerlaags-PSD uitelkaar trekt en daaruit de afbeeldingen knip, fonts checken, kleuren checkt etc, dan wel.

Maar echt keihard met de slicetool een JPG uitelkaar trekken; nee.

Inderdaad, maar dat zou ik al geen slicen meer noemen. Slicen ("in stukjes snijden") zie ik als inderdaad een JPEG opdelen in vakjes en die losse afbeeldingen gebruiken in je layout. Als je bepaalde lagen e.d. uit een PSD trekt, daar een nieuwe afbeelding voor maakt en via Save for Web opslaat, staat dat in mijn ogen daar totaal los van.

Het "klassieke" slicen zie ik dan ook gewoon als bad practice.

[rhodium]

Je kan ook gewoon lijnen trekken met photoshop. Alleen wil het nog wel eens een rommeltje worden als je veel elementen wilt uitknippen

[mcDavid]

rhodium schreef op dinsdag 22 februari 2011 @ 12:02:
Je kan ook gewoon lijnen trekken met photoshop. Alleen wil het nog wel eens een rommeltje worden als je veel elementen wilt uitknippen

[afbeelding]

De vraag is... wat moet je vervolgens met die lijnen?

Ik zie in dat ontwerp ongeveer 5 plaatjes die als (background-) image in een website gebruikt kunnen worden, maar geeneen daarvan is duidelijk omlijnd. De rest is puur met CSS op te bouwen en heb je dat slicen dus ook niet voor nodig...

[jmxd]

Helemaal nu met @font-face, border-radius en background gradients in CSS3 zijn heel veel dingen waar je 'vroeger' afbeeldingen voor nodig had nu niet meer nodig.

[Spinal]

Bosmonster schreef op dinsdag 22 februari 2011 @ 08:49:
[...]


Mag hopen van wel

Ach, de bestanden worden misschien iets kleiner, maar als je iets als PNGOut of PNGOptimizer gebruikt heb je er al geen voordeel meer van.

Voorbeeld:
- PNG normaal: 124026
- PNG web: 118710
- PNG normaal na PNGOut: 102007
- PNG web na PNGOut: 102054
(Ja oke, dit is gebasseerd op één afbeelding maar ik gok dat dit in het algemeen wel geldt)

[Bosmonster]

Maar er bestaan ook nog dingen als 8bit png's, gifs en JPG's.

Er is 0,0 reden om niet Save for Web te gebruiken.

[ Voor 30% gewijzigd door Bosmonster op 22-02-2011 13:29 ]

[killercow]

Ben ik nou de enige die hoogstens 5 afbeeldingen nodig heeft voor de gemiddelde website?

Sowieso is design iets dat nergens je html raken kan. Design dicteert niet de usability van je applicatie of website. Dat doet usability, en usability samen met de 'business logic' dicteert welke content er op welke pagina komt te staan. aka welke html er waar is.

Design is een sausje er overheen. net als interactie in javascript omdat het ook zonder goed moet werken.

Doordat je de html niet aanpast hoef je de templates niet aan te passen en ook je achterliggende code niet. Geen nieuwe bugs en geen nieuwe problemen waardoor je kunt focussen op nieuwe features waar al je klanten iets aan hebben.

[Bosmonster]

@killercow

Dat is een mooi stramien voor 13-in-een-dozijn websites. Over het algemeen vragen klanten wel iets meer dan dat. Wordt anders ook een lastige post om te verkopen

[ Voor 17% gewijzigd door Bosmonster op 22-02-2011 13:52 ]

[Verwijderd]

killercow schreef op dinsdag 22 februari 2011 @ 13:34:
Ben ik nou de enige die hoogstens 5 afbeeldingen nodig heeft voor de gemiddelde website?

Ik gebruik 3 soorten afbeeldingen (als developer):
1) content (ter verduidelijking van de tekst)
2) design (logo mag best mooi zijn)
3) hackwerk (faux columns e.d.)

Wanneer ik dus een design krijg dan sloop ik eerst alles wat niets te maken heeft met content (toch dynamisch) en design (css werk). En dan houd ik max. 3 afbeeldingen over.

Dan haal ik alle design afbeeldingen op en verwerk die in de CSS (logo's, icoontjes ed.). Met uitzondering natuurlijk van de visuals, al valt dat half onder content.


Wat betreft slicen (om toch ontopic te blijven); ik gebruik het nooit. En wanneer ik wil weten of iets kan (voornamelijk bij e-mail templates) dan gebruik ik de hulplijnen. Past het niet, dan krijgt de designer het bestand 2x zo hard weer terug

[mrFoce]

Bosmonster schreef op dinsdag 22 februari 2011 @ 13:29:
Maar er bestaan ook nog dingen als 8bit png's, gifs en JPG's.

Er is 0,0 reden om niet Save for Web te gebruiken.

Gebruikte die wel (bedoelde dat ik niet de HTML output gebruikte ). Gebruik tegenwoordig eigenlijk helemaal geen Photoshop meer (te prijzig voor mij) maar Microsoft Expression Design 4 o.i..d

[ZpAz]

Verwijderd schreef op maandag 21 februari 2011 @ 19:13:
Ik, en iemand van mijn groep, hadden daarstraks een discussie over het slices van websites. Hij beweerde dat alle professionele webontwerpers slicen (= layout opdelen en omzetten naar XHTML/CSS) in Photoshop/Fireworks.

That's how I do it, en het veel wordt gedaan, eerst een ontwerp in Photoshop maken, dan deze slicen en hier HTML voor bakken. Niet de Photoshop HTML uitput gebruiken uiteraard.

Even je andere layers onzichtbaar maken? Dat zijn er soms honderden. Lijkt me makkelijker die la(a)g(en) er even uit te trekken en op te slaan (en dus wederom geen slicing).

Weet niet hoe jij je PSD's aangeleverd krijgt, maar die zou ik linea recta terugsturen naar waar die vandaan kwam, je hebt folders in Photoshop Dan kan je complete blokken in en uitschakelen in één keer.

---

Zie hier dat er mensen zijn die eerst met de HTML bezig gaan en aan de hand daarvan een ontwerp maken? Mja beats me, maar hoe wil je het dan doen als je een ontwerper hebt die geen HTML kent?

De ontwerper moet zich enkel bezig houden met het ontwerpen, in een omgeving die hij kent, bijvoorbeeld Photoshop, e moet hem niet gaan lastig vallen met HTML en CSS, dat is werk voor de front-ender die het ontwerp pixelprecies mag overzetten.

Uiteraard gebruik makende van 'repeat' e.d waar nodig om zo er voor te zorgen dat je geen gigantische plaatjes hoeft te laden als dat niet nodig is

[ Voor 56% gewijzigd door ZpAz op 22-02-2011 19:13 ]

[Verwijderd]

Daar zijn layer compositions voor bedoel je. Folders hebben een andere taak.

[ZpAz]

Verwijderd schreef op dinsdag 22 februari 2011 @ 19:10:
Daar zijn layer compositions voor bedoel je. Folders hebben een andere taak.

Misschien ben ik met de naam in de war, je kan in ieder geval layers ordenen, en dan het hele groepje in één keer met het oogje uitdrukken.

[Bosmonster]

Als ik een mix van een aantal lagen en effecten vrijstaand wil hebben bijvoorbeeld, is het handiger die even te selecteren en eruit te slepen dan om de rest allemaal uit te klikken, of het nu in folders zit of niet. Zeker als het toch al naar een ander bestand, zoals een css-sprite moet.

En layer comps zijn wel iets anders dan folders. Een PSD tegenwoordig zonder layer comps gaat wel linea recta retour afzender Anders ben ik de half dag bezig lagen en mapjes aan en uit te klikken...

De ontwerper moet zich enkel bezig houden met het ontwerpen, in een omgeving die hij kent, bijvoorbeeld Photoshop, e moet hem niet gaan lastig vallen met HTML en CSS, dat is werk voor de front-ender die het ontwerp pixelprecies mag overzetten.

Een beetje kennis van hoe html/css werkt (zeker nu met steeds meer css3), is toch wel redelijk noodzakelijk in elke webdesigner.

[ Voor 67% gewijzigd door Bosmonster op 22-02-2011 19:39 ]

[ZpAz]

Een beetje kennis van hoe html/css werkt (zeker nu met steeds meer css3), is toch wel redelijk noodzakelijk in elke webdesigner.

Hij moet bijvoorbeeld weten 'wat mogelijk is' of wat niet, maar niet hoe dat gerealiseerd hoeft te worden. Tuurlijk het is mooi meegenomen, maar zeker geen must om een goede ontwerper te zijn.

[Verwijderd]

ZpAz schreef op dinsdag 22 februari 2011 @ 21:22:

Hij moet bijvoorbeeld weten 'wat mogelijk is' of wat niet, maar niet hoe dat gerealiseerd hoeft te worden. Tuurlijk het is mooi meegenomen, maar zeker geen must om een goede ontwerper te zijn.

Eens, maar als een ontwerper die kennis niet heeft, heeft de ontwerper dus niet het laatste woord en is het aan de interpretatie van de frontend developer om er iets van te maken.

[Bosmonster]

ZpAz schreef op dinsdag 22 februari 2011 @ 21:22:
[...]


Hij moet bijvoorbeeld weten 'wat mogelijk is' of wat niet, maar niet hoe dat gerealiseerd hoeft te worden. Tuurlijk het is mooi meegenomen, maar zeker geen must om een goede ontwerper te zijn.

Het wordt verdomd lastig om je aan planningen, budgetten en deadlines te houden als de webdesigner continu dingen aan het designen is die lastig te implementeren (en dus tijdrovend) zijn. Of dat ie uberhaupt niet weet hoeveel tijd dingen kosten die hij/zij ontwerpt. Kennis van de techniek voorkomt dat en zorgt ervoor dat designs meer aansluiten bij de praktijk (en dus je planning/budget).

Daarnaast kun je niet verwachten dat een designer de laatste mogelijkheden benut als hij/zij niet weet wat die zijn, zoals CSS3.

Van een printdesigner verwacht je ook kennis van druktechnieken, papiersoorten, drukkleuren, etc. Zodat ie niet een folder ontwerpt van 100 euro voor een klant met een budget van 2 euro.

Maar goed, dan hebben we het misschien eerder over ervaring en het verschil tussen een junior designer en een ervaren senior designer. Het zijn dingen die je op school niet leert, maar komen met de tijd.

[ Voor 18% gewijzigd door Bosmonster op 22-02-2011 21:37 ]

[OkkE]

rhodium schreef op dinsdag 22 februari 2011 @ 12:02:
Je kan ook gewoon lijnen trekken met photoshop. Alleen wil het nog wel eens een rommeltje worden als je veel elementen wilt uitknippen

Natuurlijk gebruik je zulke hulplijnen om te zorgen dat dingen uitgelijnd staan, maar iemand die zijn vak een beetje serieus neemt haalt daarna zelf de benodigde images uit de PSD. Je laat dat niet automatisch door Photoshop doen.

---

Voor een goed eindresultaat moet je inderdaad wel een webdesigner hebben die weet wat er mogelijk is qua technieken, om te voorkomen dat je óf onmogelijke designs krijgt óf het buiten budget/planning loopt. Maar de front-end developer zal altijd meer kennis hebben dan de designer.

Hangt ook van het project af natuurlijk. Voor een simpel "online visitekaartje" zijn er hele andere eisen/wensen dan voor een complete webshop.

[ Voor 13% gewijzigd door OkkE op 23-02-2011 08:57 ]

[Twan V]

Bosmonster schreef op dinsdag 22 februari 2011 @ 21:33:
[...]

Kennis van de techniek voorkomt dat en zorgt ervoor dat designs meer aansluiten bij de praktijk (en dus je planning/budget).
...

...en zorgt ervoor dat je alleen maar 13-in-een-dozijn-websites krijgt.

In het creatieve proces is het veel beter (en leuker) als een designer niet teveel beperkt is in hetgeen hij/zij tekent. Dat maakt het voor de devver juist een leuke uitdaging om het design mogelijk te maken.

Hierin geldt, terecht opgemerkt, dat de wil van de designer geen ijzeren wet kan zijn. Designproblemen zijn meestal op te lossen door een kort overleg tussen designer en devver.
Afhankelijk van budget en wensen komt er altijd een oplossing of een compromis uit.

[MueR]

Twan V schreef op woensdag 23 februari 2011 @ 10:48:
...en zorgt ervoor dat je alleen maar 13-in-een-dozijn-websites krijgt.

Onzin.

In het creatieve proces is het veel beter (en leuker) als een designer niet teveel beperkt is in hetgeen hij/zij tekent. Dat maakt het voor de devver juist een leuke uitdaging om het design mogelijk te maken.

Die leuke uitdagingen betekenen vrijwel altijd dat je onnoemelijk veel trucjes moet gaan uithalen, wat een hell is om cross-browser werkend te krijgen.

Voorbeeldje: Dropshadows en roudned corners op elementen van variabele breedte, op een gradient background. Succes in IE (IE9 daargelaten), zonder je toevlucht te nemen tot het introduceren van extra elementen in je DOM. Nu kan je zeggen: boeit die extra span nou? Ja. Het is een loos element wat je puur gaat introduceren om IE compatibility te krijgen omdat de ontwerper te stom/arrogant/eigenwijs is om fatsoenlijke websites te tekenen.

[Bosmonster]

Twan V schreef op woensdag 23 februari 2011 @ 10:48:
[...]


...en zorgt ervoor dat je alleen maar 13-in-een-dozijn-websites krijgt.

In het creatieve proces is het veel beter (en leuker) als een designer niet teveel beperkt is in hetgeen hij/zij tekent. Dat maakt het voor de devver juist een leuke uitdaging om het design mogelijk te maken.

Die uitdaging haal je uit samen het maximale uit de techniek halen, niet door de designer maar met oogkleppen op z'n ding te laten doen.

Tuurlijk moet er een bepaalde mate van creatieve vrijheid zijn, maar uiteindelijk ben je een product aan het ontwerpen dat ontwikkeld en gebruikt moet gaan worden, niet iets dat je in de vitrinekast zet.

Het zorgt dus niet voor 13-in-een-dozijn-websites, het voorkomt 13-in-een-dozijn-Flash-websites.

[ Voor 6% gewijzigd door Bosmonster op 23-02-2011 11:08 ]

[Twan V]

Ik ben het deels met je eens. Het hangt een beetje van het doel af.

Bij sommige websites is de usability belangrijk, bij anderen wat minder. (Design over function versus Function over design).

Sommige websites dienen niet het doel om informatie te verstrekken, maar zijn er puur om mooi te zijn. Ik weet niet of je de Web Design Index-boeken kent, maar veel van de designs daarin zijn een goed voorbeeld van Design over function.

In geval van Function over design ligt er als het goed is een functionele specificatie, voordat er gestart wordt met designen / devven. De designer kan (lees: moet) dan rekening houden met deze funcspec, maar heeft wel de vrije creatieve ruimte om daar iets leuks mee te doen.

Het is wel handig als een designer ongeveer weet hoe html en css ruikt, maar hoe meer ze daar vanaf weten, des te meer ze zich gaan beperken in creativiteit (is mijn ervaring). Een creatief proces werkt beter als je eerst 'van god los gaat' en je creatie later terug brengt naar wat mogelijk is, dan dat je bij voorbaat begint met te klein denken.

_{Van Flash-websites krijg ik trouwens ook jeuk, dat hebben we volgens mij gemeen}

[OkkE]

Twan V schreef op woensdag 23 februari 2011 @ 10:48:
...en zorgt ervoor dat je alleen maar 13-in-een-dozijn-websites krijgt.

Dat gebeurd wanneer je webdevelopers laat designen. Een goede webdesigner kan binnen de technische restricties voldoende uiteenlopende en creatieve websites ontwerpen.

Twan V schreef op woensdag 23 februari 2011 @ 11:37:
Ik ben het deels met je eens. Het hangt een beetje van het doel af.

Bij sommige websites is de usability belangrijk, bij anderen wat minder. (Design over function versus Function over design).

In het eerste geval (design > function) heb je het niet over websites, maar over kunst / entertainment, als je het mij vraagt.

[ Voor 38% gewijzigd door OkkE op 23-02-2011 11:40 ]

[InZane]

Ik krijg gewoon keurig PSD bestanden van één van onze designers. De beelden die ik daar evt. uit nodig heb haal ik eruit en verder schrijf ik alles zelf. Ben het niet anders gewend eigenlijk.

Programma's en/of designers horen geen code/opmaak te schrijven.

[Twan V]

OkkE schreef op woensdag 23 februari 2011 @ 11:38:
[...]

In het eerste geval (design > function) heb je het niet over websites, maar over kunst / entertainment, als je het mij vraagt.

Sales-technisch zijn onze producties allemaal kunstwerken

[Verwijderd]

Photoshop voor prototyping? Gebruiken jullie soms ook allemaal vorken om je brood mee te snijden en messen om soep mee te eten? Iedereen natuurlijk zo'n gereedschap, maar ik heb zelf nooit kunnen wennen aan PS als tool om websites mee te ontwerpen.

Ik ben zelf ooit begonnen met Fireworks, en heb nooit de overstap kunnen maken naar PS. De manier waarop Fireworks met shapes om gaat is wat mij betreft 10 keer makkelijker dan Photoshop.

[ Voor 27% gewijzigd door Verwijderd op 23-02-2011 16:13 ]

[Bosmonster]

Het is de facto standaard in de industrie, of je het nu wilt of niet

[Flowmo]

Ik denk dat Prototyping ook verkeerd gekozen is als term, aangezien waarschijnlijk "wireframing" bedoeld wordt. Dat kunnen inderdaad plaatjes zijn in PS. Prototyping zie ik als een wireframe als plaatje omzetten naar semi-productie HTML tbv het testen van klikpaden, usability, klikmodel naar klant sturen, etc.

[Bosmonster]

Voor wireframing zou ik gewoon een prototyping tool pakken, desnoods iets als Visio.

[mcDavid]

Wat mij betreft maakt het eigenlijk niets uit hoe iemand een ontwerp maakt. Een schets op een A4-tje zou ook voldoen. Uiteindelijk maakt de developer toch alles "opnieuw", alleen echt grafische elementen kopieer je.

[ Voor 3% gewijzigd door mcDavid op 23-02-2011 16:01 ]

[dimako_]

Wel leuke discussie dit, zou het niet leuk zijn om een redelijk lastig ontwerp te ''slicen'' cq om te zetten naar html/css.
Ieder doet het zelfde ontwerp en post het in het topic om te laten zien hoe ze het gedaan hebben.

Word er gebruikt gemaakt van een free template of iemand (ik) stelt een ontwerp beschikbaar die hiervoor gebruikt kan worden.

[OkkE]

Wat ze hier ook hebben gedaan dus: http://css-tricks.com/css-off-results/

[mcDavid]

Ik denk nu ik het topic een beetje doorkijk, ook dat we met zijn allen veel te veel focussen op een theoretisch ideale situatie, waarin meerdere mensen met verschillende specialiteiten een website ontwikkelen.

Maar we weten natuurlijk allemaal dat een heleboel websites gewoon eenmans(hobby)projectjes zijn. Wat doe je dan? Ik zou zeggen... van begin af aan opbouwen in dreamweaver of soortgelijk pakket...

[Phydomir]

mcDavid schreef op woensdag 23 februari 2011 @ 16:35:
Maar we weten natuurlijk allemaal dat een heleboel websites gewoon eenmans(hobby)projectjes zijn. Wat doe je dan? Ik zou zeggen... van begin af aan opbouwen in dreamweaver of soortgelijk pakket...

Nadat ik een hele tijd geen websites meer had gebouwd ben ik nu ergens aan begonnen. Ik ben totaal geen professional maar heb wel wat ervaring. De laatste site die ik gebouwd heb is denk ik 5 jaar oud en deed toen alles met tabellen en veel plaatjes.
Nu wilde ik het voor mijn huidige project goed doen en ben ik me gaan verdiepen in CSS. Ik had mijn ontwerp al helemaal in photoshop gemaakt en had ook al de verschillende onderdelen uitgeknipt maar doordat ik de kracht van CSS ben gaan ontdekken is er vrij weinig over van het oorspronkelijke ontwerp.
Toch zou ik nog steeds eerst een ontwerp maken in photoshop voor nieuwe projecten. Omdat ik het als amateur fijner vind om de CSS/HTML aan de hand van een voorbeeld op te bouwen dan helemaal kaal te beginnen.

[TheBorg]

Iedereen z'n mening maar wij doen het toch heel anders dan veel andere mensen hier:

1. Prototyping in InDesign

2. Uitwerken in Illustrator (snap to pixel, pixel preview). Hoe krijgen jullie een Photoshop logo van 72 dpi later in een folder van 300 dpi. Schaalt ook lekker, als je die bitmaps ooit eens in Flash nodig hebt. Photoshop is om...juist ja.. foto's te bewerken.

3. Ontwerper sliced helemaal niets. Dat doet de frontend developer. 3/4 van de meeste ontwerpen kan gemaakt worden m.b.v. CSS. De kinky ronde hoekjes kunnen met CSS3. En dat laten we dan backwards compatible werken in IE6, IE7 en IE8 m.b.v. CSS3 Pie.

4. Natuurlijk gebruiken we dan ook nog de HTML5 doctype en een CSS Reset en alles ziet er in elke browser exact hetzelfde uit.

[Cartman!]

TheBorg schreef op woensdag 23 februari 2011 @ 21:46:
2. Uitwerken in Illustrator (snap to pixel, pixel preview). Hoe krijgen jullie een Photoshop logo van 72 dpi later in een folder van 300 dpi. Schaalt ook lekker, als je die bitmaps ooit eens in Flash nodig hebt. Photoshop is om...juist ja.. foto's te bewerken

Uh? Waarom heb je een website nodig in een folder? Dat is een heel ander iets. Het logo wat je aangeleverd krijgt heb je al 300dpi (of vector) en dan kun je in Photoshop gewoon scalen wat je wilt, boeiend als je em daarna nog nodig hebt.. pak je gewoon je origineel weer.

[jmxd]

De helft heeft echt geen idee waar die het over heeft

[mcDavid]

TheBorg schreef op woensdag 23 februari 2011 @ 21:46:
Iedereen z'n mening maar wij doen het toch heel anders dan veel andere mensen hier:

1. Prototyping in InDesign

2. Uitwerken in Illustrator (snap to pixel, pixel preview). Hoe krijgen jullie een Photoshop logo van 72 dpi later in een folder van 300 dpi. Schaalt ook lekker, als je die bitmaps ooit eens in Flash nodig hebt. Photoshop is om...juist ja.. foto's te bewerken.

3. Ontwerper sliced helemaal niets. Dat doet de frontend developer. 3/4 van de meeste ontwerpen kan gemaakt worden m.b.v. CSS. De kinky ronde hoekjes kunnen met CSS3. En dat laten we dan backwards compatible werken in IE6, IE7 en IE8 m.b.v. CSS3 Pie.

4. Natuurlijk gebruiken we dan ook nog de HTML5 doctype en een CSS Reset en alles ziet er in elke browser exact hetzelfde uit.

SRSLY? CSS resets en libraries met IE hacks?
Zelfs ik als amateur zou dan liever even uitzoeken waar ik nou eigenlijk mee bezig ben en het gewoon goed doen.

[TheBorg]

mcDavid schreef op woensdag 23 februari 2011 @ 23:40:
Zelfs ik als amateur

CSS3 Pie is geen IE hack maar een behaviour die functionaliteit toevoegd. Een CSS reset scheelt je naast een hoop hoofdpijn tientallen regels CSS. Als amateur moet je inderdaad eerst uitzoeken waar je mee bezig bent, waarna je de conclusie zal trekken dat smerig soms nodig is. Bij Google gebruiken ze het ook volop (dat is geen reden om het ook te doen maar geeft wel aan dat ook de "pro's" het toepassen).

[Flowmo]

TheBorg schreef op donderdag 24 februari 2011 @ 00:27:
[...]

CSS3 Pie is geen IE hack maar een behaviour die functionaliteit toevoegd. Een CSS reset scheelt je naast een hoop hoofdpijn tientallen regels CSS. Als amateur moet je inderdaad eerst uitzoeken waar je mee bezig bent, waarna je de conclusie zal trekken dat smerig soms nodig is. Bij Google gebruiken ze het ook volop (dat is geen reden om het ook te doen maar geeft wel aan dat ook de "pro's" het toepassen).

CSS3 Pie zorgt voor invalid CSS aangezien er helemaal geen "behaviour" attribuut in CSS bestaat, die is browser specific voor IE. Daarnaast is het toevoegen van "behaviour" aan oudere browser in mijn ogen wel een "hack" aangezien je er dingen aan toevoegt die er normaal niet in zaten. En wees nou eerlijk, is het toevoegen van 60kb aan je pagina nou de moeite waard voor die rounded borders in IE?

Bij Google zie je de "pro's" ook geen CSS3 hacks voor IE gebruiken, daar heeft IE gewoon pech dat het geen rounded borders gebruikt.

De beste reset in mijn ogen is nog altijd niet meer dan een paar regels lang:

Cascading Stylesheet:

* {
margin:0;
padding:0;
border:0;
font: normal 12px/16px Arial, sans-serif;
outline:0;
}

Maar dat staat dan weer verder los van de discussie over slicen. Het gaat hier een beetje de algemene "wat is nou good practice en wat niet" kant uit. Iedereen heeft zo zijn eigen werkwijze en voelt zichzelf daar prettig bij. Dat de ander het misschien op een wat andere of betere manier uitvoert, maakt in weze niet uit. Als je maar weet waar je mee bezig bent, dat is het belangrijkste.

[jmxd]

Flowmo schreef op donderdag 24 februari 2011 @ 08:11:
[...]

CSS3 Pie zorgt voor invalid CSS aangezien er helemaal geen "behaviour" attribuut in CSS bestaat, die is browser specific voor IE. Daarnaast is het toevoegen van "behaviour" aan oudere browser in mijn ogen wel een "hack" aangezien je er dingen aan toevoegt die er normaal niet in zaten. En wees nou eerlijk, is het toevoegen van 60kb aan je pagina nou de moeite waard voor die rounded borders in IE?

Bij Google zie je de "pro's" ook geen CSS3 hacks voor IE gebruiken, daar heeft IE gewoon pech dat het geen rounded borders gebruikt.

De beste reset in mijn ogen is nog altijd niet meer dan een paar regels lang:

Cascading Stylesheet:

* {
margin:0;
padding:0;
border:0;
font: normal 12px/16px Arial, sans-serif;
outline:0;
}

Maar dat staat dan weer verder los van de discussie over slicen. Het gaat hier een beetje de algemene "wat is nou good practice en wat niet" kant uit. Iedereen heeft zo zijn eigen werkwijze en voelt zichzelf daar prettig bij. Dat de ander het misschien op een wat andere of betere manier uitvoert, maakt in weze niet uit. Als je maar weet waar je mee bezig bent, dat is het belangrijkste.

En preciés die hack moet je nooit toepassen

Daarmee vertraag je een 'grote' website aanzienlijk. Veel te zwaar voor de browser.

[Bosmonster]

Idd, progressive enhancement vs IE-hacks.

Een CSS reset scheelt je naast een hoop hoofdpijn tientallen regels CSS.

Een CSS reset gaat je vaak ook een hoofdbrekens opleveren (zeker in combinatie met wysiwyg-editors, waar je alles opnieuw voor mag gaan stylen). En die paar regels CSS zijn niet zo boeiend als een gemiddelde website er misschien 3000+ bevat.

CSS resets zijn vooral voor als je eigenlijk niet goed weet wat default styling is van elementen. Het argument dat daar heel veel verschil in zit tussen browsers snap ik sowieso niet zo. In standardsmode is die default styling praktisch gelijk in alle browsers, op kleine variaties in dingen als lists na.

Verder tja.. "prototyping" (je bedoelt waarschijnlijk wireframing) in een DTP-programma en webdesignen in een vector-illustratie-programma (en dan vind je photoshop niet geschikt ).

Als het voor jou werkt, prima, dan moet je dat gewoon doen. Maar echt gebruikelijk is het niet.

[ Voor 18% gewijzigd door Bosmonster op 24-02-2011 08:41 ]

[OkkE]

mcDavid schreef op woensdag 23 februari 2011 @ 16:35:
Maar we weten natuurlijk allemaal dat een heleboel websites gewoon eenmans(hobby)projectjes zijn. Wat doe je dan? Ik zou zeggen... van begin af aan opbouwen in dreamweaver of soortgelijk pakket...

En omdat iemand een freelancer is of eenmanszaak hoeft hij/zij geen kwaliteit te leveren? Dan mogen er weer tabellen gebruikt? Vind ik niet. Dat het gebeurd weet ik ook wel, maar zulke amateurs verpesten wel het web.

TheBorg schreef op woensdag 23 februari 2011 @ 21:46:
2. Uitwerken in Illustrator (snap to pixel, pixel preview). Hoe krijgen jullie een Photoshop logo van 72 dpi later in een folder van 300 dpi. Schaalt ook lekker, als je die bitmaps ooit eens in Flash nodig hebt. Photoshop is om...juist ja.. foto's te bewerken.

Euhm, sorry maar Illustrator is niet geschikt voor pixel precies ontwerpen voor het web. Natuurlijk maak je het logo (en andere huisstijl elementen) in een vector programma, maar een website ontwerp doe je in een pixel based programma.
Zo vaak al ellende gehad met Illustrator files dat een vlak een anti-aliased vlak had, waarbij het niet duidelijk was of die nu 175px of 176px moest zijn.

3. [...] De kinky ronde hoekjes kunnen met CSS3. En dat laten we dan backwards compatible werken in IE6, IE7 en IE8 m.b.v. CSS3 Pie.

Het enige dat IE, over het algemeen, van me kan krijgen is een CSS file via Conditional Comments. Niks geen behavior of javascript van enkele kilobites die alles alleen maar traag maken.

Cartman! schreef op woensdag 23 februari 2011 @ 21:52:
Uh? Waarom heb je een website nodig in een folder? Dat is een heel ander iets. Het logo wat je aangeleverd krijgt heb je al 300dpi (of vector) en dan kun je in Photoshop gewoon scalen wat je wilt, boeiend als je em daarna nog nodig hebt.. pak je gewoon je origineel weer.

Dit inderdaad.

Twylight schreef op woensdag 23 februari 2011 @ 22:55:
De helft heeft echt geen idee waar die het over heeft

Dat is helaas nog steeds één van de grote problemen in de webdevelopment industrie. Dankzij van die Photoshop slice mogelijkheden en Dreamweaver drag'n'drop programma's denkt iedereen dat ze website kunnen maken.

Flowmo schreef op donderdag 24 februari 2011 @ 08:11:
De beste reset in mijn ogen is nog altijd niet meer dan een paar regels lang:

Cascading Stylesheet:

* {
margin:0;
padding:0;
border:0;
font: normal 12px/16px Arial, sans-serif;
outline:0;
}

Deze vind ik wel erg grof. Het hangt een beetje van het project af, maar ik gebruik vaan die van Eric Meyer, die geeft bepaalde elementen (zoals UL en OL) nog wel wat style.

[Flowmo]

Hij is inderdaad erg grof, maar je trekt er wel in een keer alles cross-browser recht mee. Daarna kan je alsnog de styling gaan instellen voor de basic elementen als ul, ol, a, a:hover, :focus, etc.

[Bosmonster]

Sowieso:

Cascading Stylesheet:

* {
   outline: 0
}

Als ik dat een developer bij ons zie doen bitchslap ik hem

Verder met de * {border:0} breek je direct alle default OS-styling van form-elementen. En dat krijg je NOOIT meer terug.

Dit soort dingen krijg ik echt kippevel van...

[ Voor 47% gewijzigd door Bosmonster op 24-02-2011 08:52 ]

[mcDavid]

Hmm 't was niet mijn bedoeling hier een "to reset or not to reset" discussie van te maken, die hebben we al vaak genoeg gehad...

[Flowmo]

Bosmonster schreef op donderdag 24 februari 2011 @ 08:49:
Sowieso:

Cascading Stylesheet:

* {
   outline: 0
}

Als ik dat een developer bij ons zie doen bitchslap ik hem

Verder met de * {border:0} breek je direct alle default OS-styling van form-elementen. En dat krijg je NOOIT meer terug.

Dit soort dingen krijg ik echt kippevel van...

Daar kan ik me wel in vinden inderdaad.

outline:0 is inderdaad niet altijd nodig. Kwam het wel eens tegen dat IE6 problemen gaf met strakke float layouts en de outline op bepaalde element die layout verknalde.

En de designers die bij ons werkten, gingen in hun designs al niet eens uit van standaard OS form-elementen maar van eigen styling, vandaar dat ik die regel vaak toepaste. Gebruik het ook niet overal, alleen bij designs waar het nodig is.

De enige broodnodige resets uit die regel zijn margin:0 en padding:0. De rest hangt af van het design.

[mcDavid]

Flowmo schreef op donderdag 24 februari 2011 @ 10:14:
[...]


De enige broodnodige resets uit die regel zijn margin:0 en padding:0. De rest hangt af van het design.

Ook die is onzinnig, breekt al je lists en zorgt dat je compleet opnieuw moet beginnen met het uitlijnen van alle content. En voor je ontwerp gebruik je sowieso elementen zonder margin en padding.

[MueR]

Bosmonster schreef op donderdag 24 februari 2011 @ 08:49:
Sowieso:

Cascading Stylesheet:

* {
   border:0;
   outline: 0
}

Als ik dat een developer bij ons zie doen bitchslap ik hem

FTFY Verder inderdaad helemaal eens. Outline mag imho echt alleen gereset worden als je op 1 specifiek element absoluut geen outline wil hebben (linkjes die onclick ergens achter verdwijnen bijv). Borders resetten moet je op tagname doen. Fieldsets e.d. prima, inputs nooit.