[Website maken] "Standaard" breedtes websites*

[Anoniem: 472734]

Hallo,
ik ben momenteel 1e jaar student van een DTP opleiding,
nu moeten we bij Web een website maken,
alleen had ik een vraagje,
hoe breed is momenteel een website,
want ik zie vaak 1024x768 staan, maar dit zijn vaak post van 1-2 jaar geleden
ik zelf heb een retina display 2800x1800
en of iemand goede/handige tips/topics heeft ik zelf gebruik nu:
http://designbeep.com/201...o-convert-psd-to-htmlcss/

trouwens is het slim om in photoshop 1e een website te maken en dan als div boxen in dreamweaver te gooien? want dit lees/hoor ik ook vaak

[Anoniem: 26306]

Stop met het denken in grootte van schermen. Begin met het denken in relatieve eenheden, zoals %, em, ex. Pixels (px) en punten (pt) zijn enigszins gevaarlijk. Zeker nu met die retina displays ga je interessante problemen krijgen als je daar aan vasthoudt.

[Anoniem: 472734]

Anoniem: 26306 schreef op woensdag 20 maart 2013 @ 20:08:
Stop met het denken in grootte van schermen. Begin met het denken in relatieve eenheden, zoals %, em, ex. Pixels (px) en punten (pt) zijn enigszins gevaarlijk. Zeker nu met die retina displays ga je interessante problemen krijgen als je daar aan vasthoudt.

ok, dankjewel
ik zei dat ook al tegen de leeraar van moeten we niet in % werken zodat alles in grote mee rekt etc, en dat alles gewoon op je scherm blijft staan, maar die zei dat dat niet klopte. ben blij dat ik dit dus even na vraag.

trouwens die site die ik mee link te is die is wel goed?

en is het trouwens dan niet juist fijn om een retina te hebben omdat ik dan alles op hoogste zie/afstel en dat iemand met lager het dan ook altijd juist goed ziet?

[R4gnax]

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 20:03:
trouwens is het slim om in photoshop 1e een website te maken en dan als div boxen in dreamweaver te gooien? want dit lees/hoor ik ook vaak

Nee. je PSD op die manier 'slicen' en rechtstreeks overzetten is een techniek uit de late jaren 90 ofzo en was al achterhaald het moment dat het op de markt gezet is door de prutsers bij Adobe die er verantwoordelijk voor waren. Je leest/hoort het inderdaad nog vaak, maar op dezelfde manier kun je ook nog steeds overal ruk advies voor PHP krijgen; onkruid vergaat niet. Als je dit echter daadwerkelijk op je opleiding te horen krijgt, dan is het tijd om te gaan zoeken naar andere scholing...

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 20:33:
trouwens die site die ik mee link te is die is wel goed?

De '38 fantastische tutorials' zijn fantastisch achterhaald. Ze zijn zo te zien allemaal gedateerd op 2009 of eerder. Ga je weinig aan hebben als je een website op een moderne manier in elkaar wilt steken. Een aantal basiszaken kun je er misschien nog wel uit op halen, maar er zit ook verschrikkelijk veel oude rommel in.

[ Voor 30% gewijzigd door R4gnax op 20-03-2013 20:50 ]

[Anoniem: 472734]

ok, dank u wel ik had de websites van me zus die had ze van de leeraar, maar die moest vorige week weg van de school,dat verklaart dan een hoop..
"normaal kijk ik altijd naar de datums maar op deze site stonden ze niet"

maar, weten jullie dan wel up to date websites en of hoe ik het dan het beste kan maken?

[ Voor 13% gewijzigd door Anoniem: 472734 op 20-03-2013 21:13 ]

[stane]

Tegenwoordig is responsive design de standaard, dus gewoon de website aanpassen naar de schermgrootte. Hiervoor zijn wat trucjes te vinden op internet.

[Anoniem: 452691]

Ik maak de container van een website meestal max. 1000px. Fits all screens. ;-)

En anders zoals Stane al zei, maar dat is nogal lastig voor een beginner, denk ik...

Toevoeging:

Ik 'design' meestal een website in photoshop en probeer deze dan in HTML/CSS 'na' te maken om zo min mogelijk images te gebruiken. De nodige images die cut ik uit de layer en plaats ik op de juiste plaats.. Very easy to do met basis kennis photoshop, html en css.

[ Voor 45% gewijzigd door Anoniem: 452691 op 20-03-2013 21:29 ]

[Kobus Post]

Kijk anders eens naar de Twitter Bootstrap, hiermee heb je een goede basis voor een 'responive design' -> http://twitter.github.com/bootstrap/

[Anoniem: 472734]

stane schreef op woensdag 20 maart 2013 @ 21:16:
Tegenwoordig is responsive design de standaard, dus gewoon de website aanpassen naar de schermgrootte. Hiervoor zijn wat trucjes te vinden op internet.

ah ok, dus dan zet ik iets in de codering, en dan past die het gewoon voort gelijk aan?
maar ik moet dus eigenlijk gewoon alles in dreamweaver maken? en dan png's/tiffs met 70dpi
er in linken en dan komt het goed?

weten jullie meschien zo iemand die up te date blogs schrijve voordat ik weer iets nutteloos zit te leren,
want ik weet eigenlijk nog bijna niks van dreamweaver, de leeraar daar we les van kregen is door omstandigheden dood gegaan, en die we nu hebben legt niks uit.

[Anoniem: 472734]

Anoniem: 452691 schreef op woensdag 20 maart 2013 @ 21:27:
Ik maak de container van een website meestal max. 1000px. Fits all screens. ;-)

En anders zoals Stane al zei, maar dat is nogal lastig voor een beginner, denk ik...

Toevoeging:

Ik 'design' meestal een website in photoshop en probeer deze dan in HTML/CSS 'na' te maken om zo min mogelijk images te gebruiken. De nodige images die cut ik uit de layer en plaats ik op de juiste plaats.. Very easy to do met basis kennis photoshop, html en css.

zoiets als dit? http://vimeo.com/search?q=ricardo+creemers

[Anoniem: 472734]

Kobus Post schreef op woensdag 20 maart 2013 @ 21:30:
Kijk anders eens naar de Twitter Bootstrap, hiermee heb je een goede basis voor een 'responive design' -> http://twitter.github.com/bootstrap/

dankjewel, maar ik wil proberen in dreamweaver te blijven.
we moeten het in dreamweaver maken, school doet daar best wel moeilijk over ( sintlucas)

[pingwings]

Best vreemd dat de school moeilijk doet over een editor, zeker aangezien de editor juist wordt vermeden door de "pro's" (nouja, in elk geval de developers die ik ken).
Als je kan aantonen dat je met een andere editor (sublimetext bijvoorbeeld) eenvoudiger websites kan maken, krijg je wellicht zelfs bonuspunten.

Twitter bootstrap is een goede basis om een responsive website op te zetten.

[stane]

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 21:42:
[...]


dankjewel, maar ik wil proberen in dreamweaver te blijven.
we moeten het in dreamweaver maken, school doet daar best wel moeilijk over ( sintlucas)

Twitter Bootstrap kan gewoon bewerkt worden via Dreamweaver (dat is de bedoeling). Je hoeft alleen maar die libraries in te voegen (zie hier hoe dat stap voor stap werkt, Sublime Text 2 is soortgelijk aan Dreamweaver, maar Dreamweaver is daarentegen toch uitgebreider en heeft een ander likje dan Sublime Text 2).

[SandaX]

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 21:42:
[...]


dankjewel, maar ik wil proberen in dreamweaver te blijven.
we moeten het in dreamweaver maken, school doet daar best wel moeilijk over ( sintlucas)

Bootstrap is niks anders dan een aantal vooraf geprepareerde css, html en js files. Deze kun je met bijvoorbeeld dreamweaver aanpassen en uitbreiden. Voordeel is dat je site op de meeste devices goed bruikbaar is aangezien het automatisch schaalt. Er zijn trouwens meer van dit soort frameworks die met andere groottes en methoden gebruik maken. Doe eens een Google search op "responsive design". Toch wel de trend van het moment.

[Anoniem: 472734]

pingwings schreef op woensdag 20 maart 2013 @ 21:51:
Best vreemd dat de school moeilijk doet over een editor, zeker aangezien de editor juist wordt vermeden door de "pro's" (nouja, in elk geval de developers die ik ken).
Als je kan aantonen dat je met een andere editor (sublimetext bijvoorbeeld) eenvoudiger websites kan maken, krijg je wellicht zelfs bonuspunten.

Twitter bootstrap is een goede basis om een responsive website op te zetten.

klopt,
ik zou het voorstellen, we moeten ook ieder jaar nieuwste adobe cs kopen,
"ze willen dat we het nieuwste van het nieuwste leren en alles zelf kunnen scripten"
ook moet ik volgend jaar stage gaan lopen, in het begin van het jaar, en wil toch niet overkomen dat ik niks weet, trouwens met de dingen die ik leer van die builder die jij zei leer ik gewoon handiger basis en kan ik ook de info die ik daar leer overnemen naar dreamweaver? ( ik leer alles redelijk snel als ik bijv tuts volg na 1-2x doen weet ik het vaak al)

trouwens sorry voor mijn typ fouten ik heb dislexy

[Anoniem: 472734]

SandaX schreef op woensdag 20 maart 2013 @ 21:57:
[...]

Bootstrap is niks anders dan een aantal vooraf geprepareerde css, html en js files. Deze kun je met bijvoorbeeld dreamweaver aanpassen en uitbreiden. Voordeel is dat je site op de meeste devices goed bruikbaar is aangezien het automatisch schaalt. Er zijn trouwens meer van dit soort frameworks die met andere groottes en methoden gebruik maken. Doe eens een Google search op "responsive design". Toch wel de trend van het moment.

ok, dankjewel zou het zo even doen

[Anoniem: 472734]

stane schreef op woensdag 20 maart 2013 @ 21:53:
[...]

Twitter Bootstrap kan gewoon bewerkt worden via Dreamweaver (dat is de bedoeling). Je hoeft alleen maar die libraries in te voegen (zie hier hoe dat stap voor stap werkt, Sublime Text 2 is soortgelijk aan Dreamweaver, maar Dreamweaver is daarentegen toch uitgebreider en heeft een ander likje dan Sublime Text 2).

ok, dan ga ik morgen even der na kijken.

[KeRsTmAnNeKe]

Hier wordt ook nog vaak 1000px aangehouden, al is meen ik 1152px ook een 'standaard' breedte.
Sinds de iPad begint op te komen neemt de 1024x768 resolutie weer toe, toch wel fijn als je site daar ook leuk op werkt (en anders kan je met responsive en andere technieken aan de gang).

Persoonlijk vind ik dat ook nog een aardige breedte, bij hele brede sites krijg je snel een rommel of teksten die slecht te lezen is omdat het te breed is.

[EvilWhiteDragon]

Even een vraag tussendoor als halve noob, waarom zou een min-width in px en width in procenten niet redelijk werken? Voor smartphones e.d. snap ik dat het niet ideaal is, maar voor PC's, tablets, laptops en dergelijke zou dat prima moeten werken, dunkt mij?

[Booster]

Veel websites zijn nogsteeds ontworpen op een 960 pixels brede 'grid'. Zie ook http://960.gs/ - of dit een goede keuze is hangt af van het type website dat je bouwt natuurlijk.

De opmerking van Cheatah is belangrijk voor de toekomst, dus ik zou als ik jou was je goed inlezen (lastig met dyslexie) over de verschillende units die je kunt gebruiken. Werken met procenten is methode die in browsers vaak verkeerd afloopt dit komt door allerlei afrondingsverschillen tussen browsers o.a.

Kijk naar hoe bestaande responsive-systemen het aanpakken genoeg over te vinden.

[ Voor 8% gewijzigd door Booster op 20-03-2013 22:17 ]

[Anoniem: 472734]

KeRsTmAnNeKe schreef op woensdag 20 maart 2013 @ 22:11:
Hier wordt ook nog vaak 1000px aangehouden, al is meen ik 1152px ook een 'standaard' breedte.
Sinds de iPad begint op te komen neemt de 1024x768 resolutie weer toe, toch wel fijn als je site daar ook leuk op werkt (en anders kan je met responsive en andere technieken aan de gang).

Persoonlijk vind ik dat ook nog een aardige breedte, bij hele brede sites krijg je snel een rommel of teksten die slecht te lezen is omdat het te breed is.

ja klopt, zelf dacht ik aan zo iets,
http://www.onelasttour.com/home/
(de bovenkant is wat rommelig die wat strakker maar dat het boven stuk blijft staan enzo,
maar wil 1e de basis goed kennen dan kan je ook meer der in knutselen

trouwens ik heb sinds vorige week een macbook ret maar dit moet ook niet veel uitmaken.

ik heb de bootstrap gedownload dit zijn allemaal css files en js,

dus moet ik dit eigenlijk gewoon zien als "bestaande templates" die ik aanpas aan me eigen voorkeuren,
dat heb ik trouwens wel al vaker gedaan, ook heb ik al gewerkt met js slide shows

[Anoniem: 472734]

Booster schreef op woensdag 20 maart 2013 @ 22:16:
Veel websites zijn nogsteeds ontworpen op een 960 pixels brede 'grid'. Zie ook http://960.gs/ - of dit een goede keuze is hangt af van het type website dat je bouwt natuurlijk.

De opmerking van Cheatah is belangrijk voor de toekomst, dus ik zou als ik jou was je goed inlezen (lastig met dyslexie) over de verschillende units die je kunt gebruiken. Werken met procenten is methode die in browsers vaak verkeerd afloopt dit komt door allerlei afrondingsverschillen tussen browsers o.a.

haha ja, nou ja me begrijpend lezen is gelukkig wel goed, alleen mijn grammatica zelf zuigt best wel,
volgens mij kan ik het beste gewoon een website maken op rond de 1000 px die in het midden zetten, zodat die altijd in het midden staat) en daar in werken. maar als ik goed begrijp zitten die coderingen al in de bootstrap van twitter, en daar van uit werken.


zo iets wil ik gaan maken,
alleen dan als portfolio site, met slideshows etc, filmpjes,
http://www.onelasttour.com/home/

[RM-rf]

In plaats van vaste maten is het beter als basisconcept te denken aan een 'viewbox' als medium tussen je informatie-aanbod (je website) en de gebruiker/bezoeker.


een scherm is een soort van 'mask' dat geplaatst wordt waarbij schermen veel verschillende verschijningsvormen kunnen hebben:
- de ouderwetse desktop met 'vensters' op een of twee schermen afgebeeld, waarbij dit venster fullscreen geplaatst kan zijn en dus de hele breedte en een groot deel van de hoogte (scherm minus navigatiebalken en evt, taskbar/dock)
- tablets, schermen tussen de 7 en 11 inch die meestal op de schoot of hooguit armafstand gehouden worden, met touchscreen bediend en die zowel verticaal of horizontaal gehouden kunnen worden.
- smartphones met schermen vaak tussen de 4,5-5 inch, welke ook breed en juist in de lengte gehouden kunnen worden.

Bij je website is het vervolgens ook zo dat er een groot verschil kan zijn in hoeveel informatie je aanbid, of je deze redelijk lineair aanbied, of juist een zeer gefragmetariseerde navigatiestructuur waarbinnen de bezoeker zich eenvoudig kan bewegen..

bv lineaire websites kunnen soms informatie in een kort verhaaltje aanbieden welke ook afgebeeld wordt bij het 'scrollen' door de informatie..
sommige zeer diepgaande website's kiezen ook voor en meer lineaire presentatie (veel weblogs, maar ook bv de standaard feed van facebook, en ook twitter kent die basis (en daarme ook bootstrap)).

[RobIII]

@timewatch:

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 21:33:

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 21:40:

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 21:42:

---

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 22:04:

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 22:05:

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 22:06:

---

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 22:16:

Anoniem: 472734 schreef op woensdag 20 maart 2013 @ 22:26:

Gebruik de edit-link (rechtsbovenaan je post) als je iets toe te voegen hebt; je topic herhaaldelijk omhoogschoppen is niet nodig en die melding staat er niet voor niets:

Verder stellen we 't op prijs als je wat eigen inzet toont in je topicstart (zie onze Quickstart) maar ook nadat je reacties hebt gekregen. We zijn hier niet zo heel happig op "handjes houden"; het zou dus fijn zijn als je iets meer zoek/lees/studeer/whatever-werk zou verzetten voordat je een (vervolg)vraag post. En als je dan ook nog een beetje let op spelling, gebruik van hoofdletters, alinea's, interpunctie en andere zaken die we als ABN'ers allemaal een paar honderd jaar geleden met elkaar hebben afgesproken om zaken leesbaar te houden dan maak je mij en velen met mij helemaal happy

[ Voor 21% gewijzigd door RobIII op 21-03-2013 10:12 ]

[Bosmonster]

Ik verbaas me er wel een beetje over dat iemand die nog nooit een website heeft gebouwd, geadviseerd wordt om gelijk alles responsive te bouwen. Er is, zelfs nu, nog niks mis met een website op basis van een standaard 960 breedte bijvoorbeeld, zeker als je nog niet zoveel ervaring hebt. Zelfde voor Bootstrap, wat het leerproces nu ook niet echt vergemakkelijkt.

Of responsive noodzakelijk is hangt volledig van het doel van de site af. Bovendien is responsive meer dan "je site schaalbaar maken". Het is een designfilosofie die begint bij een goed content- en interactieplan, niet bij de bouw van een website. Als je het mij vraagt volledig overkill voor de schoolopdracht van TS.

Samengevat: Begin gewoon eens met een basisopzet in 960, want dat was je originele vraag over de tegenwoordig gebruikelijke breedte.

[ Voor 4% gewijzigd door Bosmonster op 21-03-2013 11:21 ]

[Barryvdh]

Inderdaad gewoon 960 als je hem niet responsive maakt.
Maar ik denk dat een grid wel handig is, als je eenmaal door hebt hoe dat werkt. En dan zou ik toch eerder naar Twitter Bootstrap (de basis, niet responsive dus) kijken, dan naar 960gs. (Want tegenwoordig meer gebruikt, en kan je makkelijk overstappen naar wel responsive)

[Bosmonster]

Gridsystemen zijn vooral handig om snel een basis op te zetten voor een verder redelijk generieke website, met name als je als developer ook verantwoordelijk bent voor het design.

In een professionele omgeving, waar je werkt in teamverband en met designers die niks van code snappen, heb je over het algemeen niks aan gridsystemen. De naamgeving is vaak ook te generiek om code goed onderhoudbaar te houden (classnames als "span9" en "offset12").

Twitter gebruikt niet voor niets hun eigen gridsysteem niet. Het werkt te beperkend in een complexere omgeving. Waar je het daarom wel veel ziet is in de budget- en hobby-sectoren.

Al met al, prima voor de TS om een gridsysteem als basis te gebruiken, maar het voegt weinig relevante kennis toe. Sterker nog, door kant-en-klare code-brokken te gaan gebruiken mis je juist een belangrijk leermoment in het zelf opzetten van een degelijke scaffolding.

[Barryvdh]

Designers snappen vaak niet zoveel van code, maar dat is geen reden om het niet te leren
Wij leren onze (design/front-end) stagiairs ook altijd meteen met een grid werken, en ook hoe ze daar in hun design mee om moeten gaan. Ik zou niet zeggen dat een grid beperkend werkt (want je kan het grid altijd breken), maar eerder een goede basis geeft, wat onderhoud/samenwerking juist een stuk makkelijker maakt. (Maar wij gebruiken dan inderdaad ook wel semantische naamgeving ipv span3).

Dat je misschien wat belangrijke basis-onderdelen mist zou inderdaad kunnen, maar dat hangt er ook een beetje vanaf wat het doel is van de opdracht.

[Jenovski]

my 2ct..
"eerst leren lopen voordat je gaat rennen."

css framworks etc dus nog maar even links laten liggen en eerst de basis van css goed onder knie krijgen voordat je los gaat met @media's en _sassy templates etc.

[Bosmonster]

Barryvdh schreef op donderdag 21 maart 2013 @ 15:35:
Designers snappen vaak niet zoveel van code, maar dat is geen reden om het niet te leren
Wij leren onze (design/front-end) stagiairs ook altijd meteen met een grid werken, en ook hoe ze daar in hun design mee om moeten gaan.

Het laatste wat ik wil is de designers vertellen hoe ze moeten designen en dat ze dat moeten doen volgens code-standaarden. Dan ben je mijns inziens de verkeerde kant op aan het redeneren.

Maar goed, dit begint op topic-kaping te lijken met een grid-discussie

[Barryvdh]

Bosmonster schreef op donderdag 21 maart 2013 @ 15:39:
[...]
Het laatste wat ik wil is de designers vertellen hoe ze moeten designen en dat ze dat moeten doen volgens code-standaarden. Dan ben je mijns inziens de verkeerde kant op aan het redeneren.

Maar goed, dit begint op topic-kaping te lijken met een grid-discussie

Naja, sowieso leg ik het ze niet uit, maar onze designer. En niet dat ze doen voor een bepaald css grid, maar dat een grid handig is voor hen zelf om aan te houden met ontwerpen.

Maar terug on topic, moet je het met met de 'what you see is what you get'-editor doen van Dreamweaver (als dat nog bestaat) of met de code editor?
Hopelijk het 2de dan, en dan maakt het inderdaad niet zoveel uit of je nu in Dreamweaver/NetBeans/phpStorm/SublimeText werkt, dus kan Dreamweaver ook best.

Iets wat wel actueel is en bijgewerkt wordt, is http://docs.webplatform.org
Maar dat is wel engels en misschien wat uitgebreid.

Enneh, als het voor school is, dan krijg je toch gewoon uitleg over hoe het moet?

[Anoniem: 472734]

Barryvdh schreef op donderdag 21 maart 2013 @ 15:49:
[...]

Naja, sowieso leg ik het ze niet uit, maar onze designer. En niet dat ze doen voor een bepaald css grid, maar dat een grid handig is voor hen zelf om aan te houden met ontwerpen.

Maar terug on topic, moet je het met met de 'what you see is what you get'-editor doen van Dreamweaver (als dat nog bestaat) of met de code editor?
Hopelijk het 2de dan, en dan maakt het inderdaad niet zoveel uit of je nu in Dreamweaver/NetBeans/phpStorm/SublimeText werkt, dus kan Dreamweaver ook best.

Iets wat wel actueel is en bijgewerkt wordt, is http://docs.webplatform.org
Maar dat is wel engels en misschien wat uitgebreid.

Enneh, als het voor school is, dan krijg je toch gewoon uitleg over hoe het moet?

De Web lessen slaan nergens op, de andere lessen zijn wel goed, ( slechte leeraar)
Als de klas druk is legt ze niks uit, het is meer van zoek het maar uit, en helpt ze iedereen 1 voor 1,
en we zitten er met 30 man+, dus komt het er op neer dat je het echt zelf moet uitzoeken leeraar is dus google/forum

we hebben geleerd met html hoe je links moet maken zoals div's etc ze willen ons leren dat we echt kunnen coderen, en dingen kunnen linken, de opmaak is er nog niet echt aangekomen dat zouden we nu krijgen,
-we kregen een website met links die gebroken waren zodat we leerde hoe we ze werkent moesten maken
-toen hebben we de template moeten aanpassen aan de kleuren hoe we wauwe,
-we hebben daarna geleerd hoe je plaatjes kon invoegen, welke bestanden der in konden etc
-hoe je "icone-links" kunt maken zoals facebook icone daar op clicken en dat je dan door wordt gelinkt,
-zelf geleerd hoe ik een Js slideshow moes invoegen, hoe ik daar plaatjes in kon zetten etc.

ik zit nu rond te kijken op de website die je stuurde, hij ziet er goed uit en legt duidelijk uit,
ik vond het trouwens ook juist handig dat alles in het engels was, we leren op school ook alles in het engels

op school werken we met adobe cs6

[Bosmonster]

Misschien heb je hier wat aan:
http://learn.shayhowe.com/advanced-html-css/

Een van de nieuwere/betere guides.

[geert1]

Zoals hierboven aangegeven: Gebruik voor een eerste website 960 pixels als breedte, om mee te beginnen. Daarmee pak je zo goed als alle desktop computers en het overgrote deel van de tablets mee. Smartphones zullen wellicht moeten zoomen, maar dat is voor een beginner nog even niet zo'n probleem lijkt me. Later zul je een deel van de opgedane kennis moeten bijstellen als je meer van het responsive principe leert kennen.

Naast de link van Bosmonster hierboven zou ik zelfs beginnen met de basislessen van dezelfde site:

http://learn.shayhowe.com/html-css/

Je kunt deze beide links een stuk meer vertrouwen dan alles wat je docenten zeggen. Opleidingen die je iets proberen te vertellen over web design lopen altijd achter de feiten aan en hebben over het algemeen een compleet verkeerde insteek. Het enige wat je kunt doen is heel veel lezen (van de juiste bronnen), veel oefenen en enorm nieuwsgierig zijn. Wat ik heb geleerd, komt hooguit voor 5% van mijn opleiding. En ook de meeste bedrijven en freelancers in de branche ontwerpen en ontwikkelen websites op verkeerde of verouderde manieren. De branche verandert zo snel, en er zijn zoveel factoren om rekening mee te houden tijdens het ontwikkelen (zoals laadtijd, semantiek, webstandaarden, onderhoudbaarheid, schaalbaarheid, browsers, toekomstbestendigheid, schermonafhankelijkheid, enz) dat niemand het echt helemaal "goed" doet. Misschien geeft je dat enigszins een beeld.

[TheNephilim]

Bosmonster schreef op vrijdag 22 maart 2013 @ 09:35:
Misschien heb je hier wat aan:
http://learn.shayhowe.com/advanced-html-css/

Een van de nieuwere/betere guides.

Thanks, dat ziet er goed uit! ^^

Wat me trouwens meteen weer opvalt, is dat het gebruiken van het 'beste' en 'snelste' niet meteen tot een werkbare situatie lijd. Veel dingen zijn achteraf niet praktisch, zo simpel niet, kosten teveel tijd en daarom moet bij dergelijke guides altijd in het achterhoofd gehouden worden dat je vooral gezond verstand moet gebruiken.

[Bosmonster]

TheNephilim schreef op woensdag 27 maart 2013 @ 13:21:
[...]


Thanks, dat ziet er goed uit! ^^

Wat me trouwens meteen weer opvalt, is dat het gebruiken van het 'beste' en 'snelste' niet meteen tot een werkbare situatie lijd. Veel dingen zijn achteraf niet praktisch, zo simpel niet, kosten teveel tijd en daarom moet bij dergelijke guides altijd in het achterhoofd gehouden worden dat je vooral gezond verstand moet gebruiken.

Helemaal mee eens. Hier opteer ik altijd voor transparantie boven alles. Daarom heb ik ook abstracties als LESS de deur uit gedaan. Misschien leuk tijdens development, maar onderhoud is een ramp en er werden teveel fouten mee gemaakt (editing in geparsete css bijvoorbeeld ). Uiteindelijk levert het veel meer op om het niet te doen in een complexere/grotere ontwikkelomgeving.

Zelfde voor bijvoorbeeld overmatig gebruik van CSS-sprites. Goed om af en toe verschillende statussen in 1 file samen te voegen, maar sommige developers maken er een sport van de hele site in 1 afbeelding te willen stoppen... De volgende developer die een uitbreiding mag doen is dan de sjaak

[ Voor 14% gewijzigd door Bosmonster op 27-03-2013 15:14 ]

[Barryvdh]

Bosmonster schreef op woensdag 27 maart 2013 @ 15:11:
[...]


Helemaal mee eens. Hier opteer ik altijd voor transparantie boven alles. Daarom heb ik ook abstracties als LESS de deur uit gedaan. Misschien leuk tijdens development, maar onderhoud is een ramp en er werden teveel fouten mee gemaakt (editing in geparsete css bijvoorbeeld ). Uiteindelijk levert het veel meer op om het niet te doen in een complexere/grotere ontwikkelomgeving.

Ik vind juist dat LESS het makkelijker maakt om de site te onderhouden, vooral door het gebruik van mixins en variabelen. En als je structureel LESS gebruikt, zou iedereen dat toch wel door moeten hebben. (Bij ons doen stagiairs het ook wel eens de eerste keer fout, maar als ze een paar uur werk kwijt zijn, leren ze het wel af )