conversie van grafisch ontwerp naar werkende website

[Verwijderd]

Hallo Allemaal,

Ik heb zojuist een grafisch ontwerp voltooid dat ik wil gebruiken als website. Ik ben nieuwsgierig wat de juiste aanpak zou kunnen zijn, ik heb wel ervaring met programmeren etc... maar eigenlijk niet met het bouwen van websites. Bekijk hier trouwens het ontwerp wat ik wil gebruiken http://i.imgur.com/jLGUI.jpg .

Wat ik probeer uit te zoeken is of het mogelijk is om bovenstaand ontwerp te converteren naar een werkende website met behulp van alleen CSS/HTML. En als dat zo is welke tags en methodes specifiek zou ik daar dan voor moeten leren, zijn er ook voorbeelden beschikbaar die ik kan gebruiken als referentie ? Ik zou dit waarschijnlijk erg simpel in elkaar kunnen zetten met Flash maar volgens mij is dat tegenwoordig niet echt een optie meer voor serieuze web development.

Ik ben niet echt op zoek naar commentaar op het ontwerp op zich zelf, ook al ben je natuurlijk altijd vrij om je mening te geven. Ik ben specifiek op zoek naar en geïnteresseerd in de technische kant van het verhaal, hoe layer ik de menu's .. kan ik ook een custom scrollbar maken zoals te zien in het ontwerp ?

Ik hoop dat iemand me wat verder kan helpen !

Alvast bedankt,
Roy.

[NMe]

Je komt niet echt ergens als je zoekt "welke tags en methodes specifiek" nodig zijn voor het maken van deze site. Je zal gewoon HTML en CSS moeten leren, of anders inderdaad een achterhaalde techniek zoals Flash moeten gebruiken. Een laatste optie is sleur en pleur met behulp van Dreamweaver ofzo, maar daar heb ik geen ervaring mee.

Er is hier geen middenweg. Je kan niet "een beetje" HTML/CSS leren. Je zal een gedegen basiskennis moeten opbouwen, want zonder is een vrij ingewikkeld ontwerp om om te zetten naar markup zoals dit gedoemd om te mislukken.

[Nilsepils]

Als ik jou was zou ik deze serie eens helemaal doorkijken, zo veel is t niet en dan kom je al een heel end

YouTube: XHTML and CSS Tutorials Playlist

[Verwijderd]

Bedankt voor je snelle reply,

Ik had ook niet anders verwacht dat ik behoorlijk wat tijd zou moeten investeren, en dat is verder ook geen probleem. ik was zowiezo in de 1e plaats benieuwd of het überhaupt mogelijk zou zijn en in de 2e plaats welke richting ik een beetje uit zou moeten denken en of er als zoals gezegd bruikbare voorbeelden beschikbaar zouden zijn die direct aansluiten op mijn probleem.

[Verwijderd]

Bedankt Nilsepils,

Ben benieuwd ga het meteen is doorkijken.

[NMe]

Je grootste uitdagingen gaan zitten in het goed stylen van twee unordered lists (<ul>) voor de menu's, het mee-stretchen van de pagina als de tekst langer wordt en gezien het feit dat je een beginner bent: het uitvogelen van welke tag waar hoort. Het is geen super lastig design, maar voor jou als beginner wel een lastig design om semantisch correct te implementeren.

[OkkE]

NMe schreef op dinsdag 26 juni 2012 @ 14:19:
Het is geen super lastig design, maar voor jou als beginner wel een lastig design om semantisch correct te implementeren.

Zonder heel bot te willen zijn; als semantiek (en kwaliteit) echt een issue is (zou zijn), denk ik niet dat de topicstarter het zelf moet gaan proberen, maar gewoon een professional inhuren.

[Verwijderd]

Ik heb redelijk wat ervaring met programmeren, heb bijvoorbeeld deze iPad app gemaakt YouTube: Portfolio APP .

En ben dan ook vastbesloten te leren hoe het maken van een website in zijn werk gaat. Ik doe dit ook weer in opdracht van een ander, als je begrijpt wat ik bedoel.

[Startups]

Verwijderd schreef op dinsdag 26 juni 2012 @ 14:04:
Hallo Allemaal,

Ik heb zojuist een grafisch ontwerp voltooid dat ik wil gebruiken als website. Ik ben nieuwsgierig wat de juiste aanpak zou kunnen zijn, ik heb wel ervaring met programmeren etc... maar eigenlijk niet met het bouwen van websites. Bekijk hier trouwens het ontwerp wat ik wil gebruiken http://i.imgur.com/jLGUI.jpg .

Wat ik probeer uit te zoeken is of het mogelijk is om bovenstaand ontwerp te converteren naar een werkende website met behulp van alleen CSS/HTML.

Ja, dat is mogelijk

En als dat zo is welke tags en methodes specifiek zou ik daar dan voor moeten leren, zijn er ook voorbeelden beschikbaar die ik kan gebruiken als referentie ? Ik zou dit waarschijnlijk erg simpel in elkaar kunnen zetten met Flash maar volgens mij is dat tegenwoordig niet echt een optie meer voor serieuze web development.

Als je 'serieus webdevelopment' wilt, dan gaat dat maanden duren. Zoek op termen als slicing en basing om dit te leren.

Ik ben niet echt op zoek naar commentaar op het ontwerp op zich zelf, ook al ben je natuurlijk altijd vrij om je mening te geven. Ik ben specifiek op zoek naar en geïnteresseerd in de technische kant van het verhaal, hoe layer ik de menu's .. kan ik ook een custom scrollbar maken zoals te zien in het ontwerp ?

Voor een custom scrollbar zou je bijv. javascript kunnen gebruiken. (wel een die ook werkt zonder javascript) Maar in mijn optiek is die scrollbar in je ontwerp onhandig omdat er een menu overheen valt. Ook niet echt handig voor mobiele (kleine) browsers.

Ik hoop dat iemand me wat verder kan helpen !

Alvast bedankt,
Roy.

Als het niet perfect hoeft, gebruik dan een ingebouwde tool van Photoshop of Fireworks.
Of betaal er voor http://www.basing.nl of als het budget kleiner is, zoek dan op een webmasterforum.
Zelf leren kan ook, er zijn genoeg tutorials over slicing/basing.

[TheNephilim]

Als het ontwerp niet heel complex is, gewoon beginnen met een skelet waarin je de ruimte vast legt. Dan zoveel mogelijk vakken een kleur geven met CSS en wat je niet kunt doen met CSS moet je met afbeeldingen doen. Heel simpel gezegd even

Wat is de breedte van de website? Ik houd meestal 980 pixels aan.

Ga bekijken wat de header, content en footer is. Het content gedeelte zal wijzigen bij elke pagina terwijl footer en header gelijk blijven.

Wat ga je trouwens gebruiken om content toe te voegen? Een pakket als Wordpress of heb je zelf een CMS geschreven? Wordpress is wel makkelijk, je hoeft dan alleen een template te maken en je hebt slechts een beetje kennis nodig van PHP. HTML en CSS ga je niet aan ontkomen, ook JS (jQuery) ga je vast nodig hebben op een bepaald punt, al kun je best veel met alleen CSS.

[NMe]

keel schreef op dinsdag 26 juni 2012 @ 14:45:
[...]

Als je 'serieus webdevelopment' wilt, dan gaat dat maanden duren. Zoek op termen als slicing en basing om dit te leren.

Slicing is een "gevaarlijke" term om op te zoeken omdat de feature in Photoshop die zo heet ook bruikbaar is maar complete troep-HTML oplevert, terwijl de slices voor non-table-layouts vaak ook nog eens onbruikbaar zijn. Als je op slicing zoekt, let dan goed op dat ze je niet naar de table-layout toe pushen.

Voor een custom scrollbar zou je bijv. javascript kunnen gebruiken. (wel een die ook werkt zonder javascript) Maar in mijn optiek is die scrollbar in je ontwerp onhandig omdat er een menu overheen valt. Ook niet echt handig voor mobiele (kleine) browsers.

Custom scrollbars zijn eigenlijk altijd een slecht idee. Soms werken ze lekker, meestal niet. Er is altijd wel een browser die er niet lekker mee overweg kan en mobiel is het inderdaad meestal ook een ramp. Ik zou het gebruik ervan afraden en gewoon normale scrollbars gebruiken.

[Verwijderd]

TheNephilim schreef op dinsdag 26 juni 2012 @ 15:37:
Als het ontwerp niet heel complex is, gewoon beginnen met een skelet waarin je de ruimte vast legt. Dan zoveel mogelijk vakken een kleur geven met CSS en wat je niet kunt doen met CSS moet je met afbeeldingen doen. Heel simpel gezegd even

Wat is de breedte van de website? Ik houd meestal 980 pixels aan.

Ga bekijken wat de header, content en footer is. Het content gedeelte zal wijzigen bij elke pagina terwijl footer en header gelijk blijven.

Wat ga je trouwens gebruiken om content toe te voegen? Een pakket als Wordpress of heb je zelf een CMS geschreven? Wordpress is wel makkelijk, je hoeft dan alleen een template te maken en je hebt slechts een beetje kennis nodig van PHP. HTML en CSS ga je niet aan ontkomen, ook JS (jQuery) ga je vast nodig hebben op een bepaald punt, al kun je best veel met alleen CSS.

Ja precies dit is ook wat ik ongeveer bedoel, het is ook een redelijk simpele website qua inhoud er hoeft bijvoorbeeld niet constant nieuwe content aan toe worden gevoegd, zie het meer als een online visite en informatie kaart. Ik kan me niet voorstellen maanden bezig te zijn om een ontwerp als dit te om te zetten
naar een website, en dan heb ik het uiteraard alleen over skelet. Ik begrijp dat je met zaken als PHP en Javascript zoveel kanten uit kunt dat je inderdaad maanden nodig hebt om een gedegen basis te leggen.

Maar goed dat hoeft uiteraard ook niet allemaal in een keer, mijn eerste prioriteit is een 'n werkende layout
en ik denk dat met de informatie betreffende basing/slicing en wat andere zaken ik wel een goed uitgangspunt
heb om van start te gaan.

Wat de scrollbar betreft, het was eigenlijk de bedoeling dat als de scrollbar achter het menu zou verdwijnen je
hem toch nog gewoon zou kunnen pakken zonder dat die ook echt zichtbaar is (mensen met een beetje intuïtie zouden dat toch moeten begrijpen ) maar goed als dat niet werkt kan 't altijd nog anders natuurlijk.

Ik heb een idee nu in ieder geval waar ik moet beginnen en wat verder van belang is. Dank hiervoor.

[_Erikje_]

Er zijn bedrijven die voor erg weinig geld je psd in redelijk goede html vertalen

[NMe]

Redelijk goeie is niet hetzelfde als goeie en sowieso is dit natuurlijk niet echt een probleem om zelf te leren...

[disjfa]

_Erikje_ schreef op dinsdag 26 juni 2012 @ 23:14:
Er zijn bedrijven die voor erg weinig geld je psd in redelijk goede html vertalen

En daar heb je dan uiteindelijk wat aan? Moet je wat aanpassen erna moet je nog steeds onderzoeken hoe de html inelkaar moet zitten. Dan kan je net zo goed zeggen dat hij het gewoon uitelkaar moet slicen (kan dat nog met de huidige adobe zaken?) en gewoon moet gebruiken. Wat ook geen optie is natuurlijk.

Dus gewoon wat de mensen hier vertellen en daarop lekker googlen en inelkaar klussen. Nog een paar keer proberen en je komt een beetje achter hoe je een nette website inelkaar moet kunnen klussen.

Wat je trouwens ook gewoon kan doen is een opensource cmsje pakken en daar kijken hoe thema`s inelkaar moeten gaan zitten. Dan hoef je niet elke pagina aan te passen, als je wat aan gaat passen op de site

[TheNephilim]

_Erikje_ schreef op dinsdag 26 juni 2012 @ 23:14:
Er zijn bedrijven die voor erg weinig geld je psd in redelijk goede html vertalen

Hebben wij in onze begin jaren ook eens gedaan... echter kregen we iets heel anders terug dan we in gedachten hadden. Zonde van het geld! Overigens een vaak gehoorde klacht van designers, dat hun ontwerpen niet pixelperfect omgezet worden naar een website. Ikzelf streef altijd naar pixelperfect omzetten, al schaaf ik dingen soms bij of zet het net even anders neer. Dat moet dan ook weer kunnen. Van design naar code is namelijk niet altijd 100% compatible.

Inmiddels doe ik het helemaal zelf, het is zo simpel. Natuurlijk, je moet ergens beginnen, maar het is gewoon heel simpel. De truc is om dingen uit elkaar te halen, om onderdelen te kunnen onderscheiden van elkaar. Als je dat kan, is het niet zoveel werk meer.

[phex]

Pixelperfectie is absoluut mogelijk. Maar de hoeveelheid tijd die je ergens insteekt moet natuurlijk wel ergens op te verhalen zijn. Zo'n basing partij werkt voor een paar tientjes. Dus het wordt of uitbesteed aan een land waar de lonen laag zijn. Of er zit iemand die heel snel en efficiënt kan werken. Maar als die iets "moeilijks" tegenkomt zoals het rechter menu van de OT dan krijg je gewoon wat plaatjes terug i.p.v. html.

Misschien een beetje flauw achteraf, maar designen voor het web is niet gewoon wat in elkaar photoshoppen en dat op het bureau van de front-ender gooien. Je moet verstand hebben van de limitaties van de onderliggende techniek waarvoor je designt.

Maar voordat ik los ga met een mega rant over mensen die zich (web)designers noemen en het overduidelijk niet zijn, deze tips:

- Vermeid blokken die niet rond of vierkant zijn
- Vermeid verschillende kleurvlakken/exotische gradients binnen 1 element (tekst/menu item/menu zelf)
- Zorg dat je nadenkt dat de tekst die nu in je ontwerp staat misschien niet de uiteindelijke tekst is. Dus hoe ziet het er uit als het kleiner wordt, en hoe ziet het er uit als het groter wordt.
- Websites schalen in de hoogte, probeer dan ook afgekaderde tekst blokken te vermeiden

[Bosmonster]

"Pixelperfect" is de meest overrated term in de industrie als je het mij vraagt...

Ik zie liever flexibiliteit en samenwerking, ipv een arrogante designer die verwacht dat een frontend developer maar pixel perfect zijn design gaat overnemen. Designers weten vaak niet wat (snel en efficient) mogelijk is in front-end en daarnaast heeft pixelperfectie alleen plaats in een ouderwetse waterval-omgeving en niet in een meer agile proces of met schaalbaar/responsive design. Het is simpelweg zonde van de tijd alles op de pixel te gaan uitwerken vandaag de dag.

Een cv/sollicitatie met de term "pixelperfect" erin heeft bij mij een streepje tegen tegenwoordig, want het geeft mij het idee met een ietwat rigide persoon te maken te hebben.

[ Voor 16% gewijzigd door Bosmonster op 27-06-2012 13:30 ]

[TheNephilim]

Pixelperfect is misschien wat overdreven soms, maar als de designer weet wat hij doet, dan kun je alles best heel precies opleveren. Sommige frontend'ers levereren een template op waarbij elementen gewoon niet meer lijnen met elkaar, of hebben font-sizes gebruikt die helemaal niet passen in de praktijk. In die zin is pixelperfect natuurlijk wel handig, je moet toch een beetje een richtlijn hebben.

Pixelperfect en responsive design zijn verschillende dingen. Als de klant geld uit wil geven aan een responsive design, verwacht hij dat het design ook netjes is en niet slordig.

Overigens zijn er nog maar weinig klanten die een responsive website willen. De meeste websites zijn toch puur informatief en dan is er weinig responsive aan te maken.

@Bosmonster: Wat versta jij onder responsive eigenlijk?

[Bosmonster]

Dat klinkt meer als een crappy front-end developer als je het mij vraagt, als die geen zicht heeft op uitlijning e.d.

Wij verkopen tegenwoordig steeds meer responsive en dan gaat het vooral om optimalisatie voor touch, iPad/iPhone (Android is mooi meegenomen, maar is toch praktisch niet te testen met 8 miljoen verschillende devices en versies). Ben het met je eens dat het voor informatieve/corporate sites niet zo heel boeiend is eigenlijk, maar de vraag is er wel (of wordt gecreeerd ).

[ Voor 13% gewijzigd door Bosmonster op 27-06-2012 13:51 ]

[TheNephilim]

Bosmonster schreef op woensdag 27 juni 2012 @ 13:50:
Dat klinkt meer als een crappy front-end developer als je het mij vraagt, als die geen zicht heeft op uitlijning e.d.

Wij verkopen tegenwoordig steeds meer responsive en dan gaat het vooral om optimalisatie voor touch, iPad/iPhone (Android is mooi meegenomen, maar is toch praktisch niet te testen met 8 miljoen verschillende devices en versies). Ben het met je eens dat het voor informatieve/corporate sites niet zo heel boeiend is eigenlijk, maar de vraag is er wel (of wordt gecreeerd ).

Jah, dat vind ik ook, al zie ik het gebeuren bij sommige bedrijven.

Dat is inderdaad wel leuk om mee te spelen, echter zien de meeste klanten het nut er niet van in. Ze willen er dus niet voor betalen. Voor het ene bedrijf is het ook nuttiger dan het andere, dat speelt ook mee.

Af en toe is het leuk om een website te ontwikkelen waar je veel vrijheid hebt en veel creativiteit in kwijt kunt! ^^

[Verwijderd]

phex schreef op woensdag 27 juni 2012 @ 12:30:

- Vermeid blokken die niet rond of vierkant zijn

Dit is ook de reden dat ik besloot om te vragen met betrekking tot het menu in mijn design of dat het mogelijk is om iets dat afwijkt van wat je normaal gesproken ziet ook nog om te zetten is naar een website. Maar goed ik zocht wat aanknopingspunten en die heb ik nu voldoende, ik ga hier verder wel uitkomen. Ik zit me trouwens net te bedenken. Wat zou het handig zijn als er een tool als Flash was die gewoon je site naar html/css/js kon exporteren, gat in de markt mischien ?

phex schreef op woensdag 27 juni 2012 @ 12:30:

- Vermeid verschillende kleurvlakken/exotische gradients binnen 1 element (tekst/menu item/menu zelf)

Overigens heb ik wil vaker deze 'regels' vernomen over het gebruik van kleur etc binnen een website, maar soms begrijp ik dat niet helemaal. Neem bijvoorbeeld een mooie interface in een computerspel, die kunnen er af en toe ook behoorlijk uitbundig uitzien.. geen haan die er naar kraait . Waarom zou dat zelfde absoluut verboden moeten zijn betreffende het een website, het ligt er natuurlijk aan wie je doelgroep is en de keuze die je maakt tussen creativiteit en functionaliteit.

[ Voor 35% gewijzigd door Verwijderd op 27-06-2012 14:36 ]

[OkkE]

TheNephilim schreef op woensdag 27 juni 2012 @ 13:55:
Jah, dat vind ik ook, al zie ik het gebeuren bij sommige bedrijven.

Dat is inderdaad wel leuk om mee te spelen, echter zien de meeste klanten het nut er niet van in. Ze willen er dus niet voor betalen. Voor het ene bedrijf is het ook nuttiger dan het andere, dat speelt ook mee.

Af en toe is het leuk om een website te ontwikkelen waar je veel vrijheid hebt en veel creativiteit in kwijt kunt! ^^

Je kan klanten het nut er van uitleggen / laten zien.

Daarnaast is het (bijna) geen extra moeite om bepaalde CSS even in een extra @media te zetten, of ergens procenten/ems te gebruiken. Op die manier kom je al een heel eind qua Resonsive-ness.

[phex]

Bosmonster schreef op woensdag 27 juni 2012 @ 13:18:
"Pixelperfect" is de meest overrated term in de industrie als je het mij vraagt...

offtopic:
Responsive design is anders ook een goede kandidaat. Tuurlijk kun je specifieke stylesheets bouwen voor devices/resolutie. Maar het feit blijft dat de content die je serveert voor desktop niet 1 op 1 hoeft te zijn voor mobile. Daarnaast kunnen de html templates anders in elkaar zitten. Daarnaast als we ven heel reël zijn, hebben de nieuwste mobile devices resoluties die zeer gangbaar zijn op laptops en ouders pcs. Zodoende lijkt het mij een doodlopende weg om resources te gaan steken om "responsive design" toe te passen op elke website. Beter kun je kijken naar waarom je site voor geen meter draait op mobiel.

Anyway dit was geen persoonlijke aanval en ik ben ook absoluut geen voorstander van "pixelperfect". Maar er is een duidelijk verschil tussen :

- een eigen interpretatie van het ontwerp omdat ik geen flauw idee heb hoe ik dit kan maken
en
- dit ziet er niet in alle browsers hetzelfde eruit maar het functioneert prima en het valt niemand op

Wat ik zie van de OT is een ontwerp dat vreselijk moeilijk schaalbaar is als je het compleet in html/css zou bouwen. Bijvoorbeeld het rechter menu heeft geen ruimte voor langere menu titels, de achtergrond van het menu heeft elementen die uitlijnen met de menu items maar ook "vast zitten" aan de border radius van de container. Daarnaast worden er combinaties van gradients, dropshadow, emboss en patterns gebruikt. Dit is absoluut te bouwen maar waarom zou je het jezelf zo moeilijk maken?

[Daan]

Ik zou even kijken naar wat sites met CSS layout templates (makkelijk te Googlen) en die dan als een basis gebruiken voor je ontwerp. Dan kom je zonder ervaring al een heel eind. Maar voor dat je dat doet even goed inlezen in HTML en CSS zoals hierboven al is aangeraden zodat je weet hoe het in de basis werkt.

Wat betreft het ontwerp, laat ik zeggen dat het echt niet meer van deze tijd is, om het heel voorzichtig uit te drukken. Ik weet dat je meer naar info voor de technische kant zocht maar ik moest het even kwijt

[Verwijderd]

Ik kan me herinneren dat ik vroeger ook wel eens websites heb gemaakt (heel erg lang geleden) met behulp van imagemaps en framesets, ik begrijp dat dat tegenwoordig echt niet meer kan. Maar dat werkte wel redelijk opzich, vooral als je gebruik wilde maken van vele grafische elementen, kon je op die manier wel redelijk de zaken ordenen en tot een geheel maken.

[Verwijderd]

Daan schreef op woensdag 27 juni 2012 @ 15:30:
Ik zou even kijken naar wat sites met CSS layout templates (makkelijk te Googlen) en die dan als een basis gebruiken voor je ontwerp. Dan kom je zonder ervaring al een heel eind. Maar voor dat je dat doet even goed inlezen in HTML en CSS zoals hierboven al is aangeraden zodat je weet hoe het in de basis werkt.

Wat betreft het ontwerp, laat ik zeggen dat het echt niet meer van deze tijd is, om het heel voorzichtig uit te drukken. Ik weet dat je meer naar info voor de technische kant zocht maar ik moest het even kwijt

Ik ben dan ook een zeer nostalgisch mens

[Ivos]

phex schreef op woensdag 27 juni 2012 @ 14:53:
[...]

offtopic:
Responsive design is anders ook een goede kandidaat. Tuurlijk kun je specifieke stylesheets bouwen voor devices/resolutie. Maar het feit blijft dat de content die je serveert voor desktop niet 1 op 1 hoeft te zijn voor mobile. Daarnaast kunnen de html templates anders in elkaar zitten. Daarnaast als we ven heel reël zijn, hebben de nieuwste mobile devices resoluties die zeer gangbaar zijn op laptops en ouders pcs. Zodoende lijkt het mij een doodlopende weg om resources te gaan steken om "responsive design" toe te passen op elke website. Beter kun je kijken naar waarom je site voor geen meter draait op mobiel.

Resolutie is hetzelfde, oppervlakte van het scherm niet Dat een telefoon binnenkort ook 1368x720 pixels is zoals mijn 13" laptop maakt niet dat je op een 4" telefoon met een gelijke resolutie dezelfde site kunt tonen. Dan liever een responsive (noem hoe je het wilt) design dat zorgt dat ipv meerdere kolommen met content het één kolom wordt en daarvoor voor mij leesbaarder

[R4gnax]

Ivos schreef op woensdag 27 juni 2012 @ 21:19:
[...]


Resolutie is hetzelfde, oppervlakte van het scherm niet Dat een telefoon binnenkort ook 1368x720 pixels is zoals mijn 13" laptop maakt niet dat je op een 4" telefoon met een gelijke resolutie dezelfde site kunt tonen.

Sterker nog; het is nu al standaard voor devices met een high density scherm om een schalingsfactor tussen device pixels en CSS pixels te hanteren en daarmee leesbare grootte te handhaven. Al die extra device pixels gaan in de praktijk alleen maar ingezet worden om meer heldere details in scherp gelijnde rondingen (zoals in fonts of vector artwork) te krijgen door het effect van sub-pixel aliasing te minimaliseren.

Voor een website zal je phone naar alle waarschijnlijkheid nog steeds een net zo kleine viewport / client width rapporteren om mee te werken. Alleen de device width zal groter zijn en éénieder die in de media queries voor zijn site design foutief (min/max-)device-width gebruikt waar (min/max-)width bedoeld was, zal daar groots mee tegen de lamp gaan lopen wanneer high density schermen echt doorbreken.

[ Voor 20% gewijzigd door R4gnax op 28-06-2012 12:54 ]

[crisp]

Verwijderd schreef op woensdag 27 juni 2012 @ 14:25:
[...]
Wat zou het handig zijn als er een tool als Flash was die gewoon je site naar html/css/js kon exporteren, gat in de markt mischien ?

Dergelijke tools zijn er wel, maar het resultaat is kwalitatief qua code meestal om te janken Front-end development is niet voor niets een echt vak

[...]
Waarom zou dat zelfde absoluut verboden moeten zijn betreffende het een website

Het is niet verboden maar je maakt het jezelf technisch gezien nodeloos moeilijk, of je krijgt een site waarbij bijna alles uit plaatjes bestaat en absoluut niet schaalt (en vele malen zwaarder is wb totale filesize).

[Bosmonster]

phex schreef op woensdag 27 juni 2012 @ 14:53:
[...]

Responsive design is anders ook een goede kandidaat.

Dat ben ik overigens ook met je eens, maar mijn persoonlijke mening staat soms los van de marketingtechnische of professionele werkelijkheid.

Ik vind, met telefoons die prima volledige sites weer kunnen geven en hier volledig voor geoptimaliseerd zijn, het onzin om een site te gaan downgraden (want dat is in de praktijk waar "responsive" 9 van de 10 keer op neerkomt). Het voelt nogal anno tien jaar geleden.

Apple zelf is een goed voorbeeld hierin. Zij steken heel veel tijd in hun iPhone om hier normaal internet op te kunnen gebruiken. Apple's sites zijn dan ook opzettelijk niet responsive.

Ik heb er persoonlijk ook een hekel aan als ik een "responsive" site tegenkom, waarbij maar vanalles is weggehaald of onder elkaar geknikkerd, zogenaamd om mij te helpen. Geef mij de normale site maar en dan pinch/zoom ik wel lekker, alleen is dat dan niet meer mogelijk...

[ Voor 54% gewijzigd door Bosmonster op 28-06-2012 11:42 ]

[TheNephilim]

OkkE schreef op woensdag 27 juni 2012 @ 14:29:
[...]

Je kan klanten het nut er van uitleggen / laten zien.

Daarnaast is het (bijna) geen extra moeite om bepaalde CSS even in een extra @media te zetten, of ergens procenten/ems te gebruiken. Op die manier kom je al een heel eind qua Resonsive-ness.

Het zegt mij nog niet zoveel, wat je vaak ziet is dat elementen die eerst naast elkaar stonden, dan onder elkaar staan. Betekend dat alle elements float als eigenschap hebben en dat, doordat de container kleiner word, ze automatisch onder elkaar gaan staan?

[Barryvdh]

Vaak heb je iets van een grid, en ga je van een vaste breedte (span3, span6 etc) in desktop resolutie, naar een 100% breedte, dus alles onder elkaar. Zie bijvoorbeeld zoiets: http://twitter.github.com...affolding.html#responsive (Even resizen van grote resolutie naar heel smal, en bijvoorbeeld naar het grid voorbeeld kijken)
Je browser doet het misschien wel goed, maar ik vind het vaak wel prettig als de de tekst zo in 1 keer leesbaar is, en er wat grafische zaken uitgeschakeld worden, waardoor de site sneller laadt.

[Verwijderd]

Referentie voor HTML en een CSS tutorial voor beginners:
W3 HTML ref
CSS tutorial: Beginners

Ik gebruik Firfefox om in te developen en de reden hiervoor is ]en Webdeveloper toolbar. Vergelijkbare tools zijn er ook in IE9 en Chrome. En om te kijken hoe ze bijvoorbeeld ronde hoekjes maken. Dan kan je met FireBug heel het web inspecten hoe het geimplementeerd is in websites.

Ben wel meer een modern mens dan een nostalgisch mens.
Succes met het omzetten naar een website!

Bosmonster schreef op donderdag 28 juni 2012 @ 11:34:
[...]


Dat ben ik overigens ook met je eens, maar mijn persoonlijke mening staat soms los van de marketingtechnische of professionele werkelijkheid.

Ik vind, met telefoons die prima volledige sites weer kunnen geven en hier volledig voor geoptimaliseerd zijn, het onzin om een site te gaan downgraden (want dat is in de praktijk waar "responsive" 9 van de 10 keer op neerkomt). Het voelt nogal anno tien jaar geleden.

Apple zelf is een goed voorbeeld hierin. Zij steken heel veel tijd in hun iPhone om hier normaal internet op te kunnen gebruiken. Apple's sites zijn dan ook opzettelijk niet responsive.

Ik heb er persoonlijk ook een hekel aan als ik een "responsive" site tegenkom, waarbij maar vanalles is weggehaald of onder elkaar geknikkerd, zogenaamd om mij te helpen. Geef mij de normale site maar en dan pinch/zoom ik wel lekker, alleen is dat dan niet meer mogelijk...

offtopic:
Als je alles downgrade en onder elkaar zet, dan lijkt het wel een verkapte app. Responsive design zie ik ook meer als een goede tool om de front-end developer te helpen.

[ Voor 7% gewijzigd door Verwijderd op 28-06-2012 20:54 . Reden: Firebug voorbeeld ]

[OkkE]

TheNephilim schreef op donderdag 28 juni 2012 @ 11:48:
[...]

Het zegt mij nog niet zoveel, wat je vaak ziet is dat elementen die eerst naast elkaar stonden, dan onder elkaar staan. Betekend dat alle elements float als eigenschap hebben en dat, doordat de container kleiner word, ze automatisch onder elkaar gaan staan?

Er zijn verschillende technieken, deze website geeft (vind ik) een mooi beeld: http://mediaqueri.es/

[Verwijderd]

Bedankt nogmaals voor alle informatie.. Ben overigens maar voor een wat eigentijdser design gegaan, ook wat eenvoudiger om uit te werken als eerste project ... http://i.imgur.com/YcNaS.jpg

[Startups]

Verwijderd schreef op vrijdag 29 juni 2012 @ 19:35:
Bedankt nogmaals voor alle informatie.. Ben overigens maar voor een wat eigentijdser design gegaan,

Zou het niet direct eigentijdser willen noemen, maar goed dat is een kwestie van smaak. Duidelijker, dat wel. De header is nog wel wat te hoog.

ook wat eenvoudiger om uit te werken als eerste project ... http://i.imgur.com/YcNaS.jpg

Dit is inderdaad wat eenvoudiger om uit te werken. (wat CSS inspiratie: http://www.csszengarden.com)

[Verwijderd]

Nog wat meer screens .. de afbeelding in het midden moeten soort van overvloeien in een korte loop...

http://i.imgur.com/VV8Ma.jpg
http://i.imgur.com/JAieM.jpg
http://i.imgur.com/8uJ7j.jpg

[MueR]

Ik ga er toch een einde aan maken. Dit topic zat al aardig op het randje van het toelaatbare, maar ondertussen wordt het steeds meer een "geef eens feedback op mijn ontwerp". Dat kan onder bepaalde voorwaarden wel, maar niet op deze manier. Zie Wat vinden jullie van mijn site?