responsive webdesign
Ik ben hier nieuw en zou me graag verdiepen in webdesign en zo beetje alles wat errond komt kijken.
Mijn vraag gaat over responsive webdesign, als je een website wil gaan maken die mooi oogt op een pc, ipad, smartfone. Kun je dit op een aantal manieren oplossen. waarnaar gaat jullie voorkeur en waarom?
Ikzelf ben geen voorstander van java omdat er op dit moment toch wat om te doen is omtrend security isseus (wat gebeurt er dan als de bezoeker geen java geinstaleerd heeft?).Als je een fluid grid gaat gaan gebruiken en je werkt met een schermresolutie van 1900/1080 is dit toch ook niet mooi...
zijn er tweaks die je kunt toepassen op de fluid grid of zijn er alternatieven waar ik mss eens kan naar kijken en me in verdiepen? Waar gaat jullie voorkeur naartoe...
alvast bedankt voor de respons
met vriendelijke groet
Davy
Davy Debel op 12/01/2013 12:46:48:
Ikzelf ben geen voorstander van java omdat er op dit moment toch wat om te doen is omtrend security isseus (wat gebeurt er dan als de bezoeker geen java geinstaleerd heeft?).
What is this I don't even ...
Wouter J op 12/01/2013 13:22:25:
toffe link thx :)
Ga alsjeblieft niet kloten met Javascript of Java (aaaargh).
En als je toch begint: begin Mobile-First om het gelijk goed te doen :D
Quote:
En als je toch begint: begin Mobile-First om het gelijk goed te doen :D
Of om gelijk je site compleet te verpesten... De grootste medium waarmee internet bezocht wordt is nog steeds de computer, als je dan de mobiel-first variant gaat proberen doe je hetzelfde als Microsoft in Windows 8 heeft gedaan: Je creëert een geweldige applicatie voor de tablet en smartphone, maar verpest het voor de normale computer.
Davy Debel op 12/01/2013 12:46:48:
Ikzelf ben geen voorstander van java omdat er op dit moment toch wat om te doen is omtrend security isseus (wat gebeurt er dan als de bezoeker geen java geinstaleerd heeft?).
Volgens mij maakt je een veelgemaakte fout. 'JavaScript is geen JAVA'.
Voor een 'responsive website' kan je prima uit de voeten met media-queries. Je kan hier gewoon soort statements maken waarin je bepaald wat voor styling er moet worden gebruikt bij een bepaalde resolutie die hoger/lager is dan....
groetjes
Http://www.webdesignerwall.com/demo/media-queries/
Oranje 900px is een tablet/pc (ik zit daar nu namelijk op(galaxy 10.1 tab2)
Roze 600px (ik denk ipad mini en zulk soort apparaten)
Blauw 600px - 900px (ook tablet maar dan kleiner dan 10 inch en groter dan ipad mini)
Die laatst spreekt voor zich denk ik (iphone)...
Dit kan je op die site zelf ook testen door je browservenster te verkleinen/vergroten
Oranje 900px is een tablet/pc (ik zit daar nu namelijk op(galaxy 10.1 tab2)
Roze 600px (ik denk ipad mini en zulk soort apparaten)
Blauw 600px - 900px (ook tablet maar dan kleiner dan 10 inch en groter dan ipad mini)
Die laatst spreekt voor zich denk ik (iphone)...
Dit kan je op die site zelf ook testen door je browservenster te verkleinen/vergroten
Gewijzigd op 14/01/2013 23:43:47 door Keizer Webdesign
Wat je doet is het scherm van je browser verkleinen, zodra er iets verspringt en niet helemaal goed meer staat kijk je hoe breed je scherm nu is en maak je dan een 'breakpoint'.
Gridpak om een basis te maken. Moet zeggen dat ik er lekker mee kan werken. Beter dan bijvoorbeeld het 1140 grid.
Het werken met grids is een goed hulpmiddel bij het maken van een responsive website. Wij maken vaak gebruik van Elwin - Fratsloos op 15/01/2013 11:00:11:
Het werken met grids is een goed hulpmiddel bij het maken van een responsive website. Wij maken vaak gebruik van Gridpak om een basis te maken. Moet zeggen dat ik er lekker mee kan werken. Beter dan bijvoorbeeld het 1140 grid.
zal ik zeker eens goed bekijken bedankt voor de link!
:)
het is wel een heel uitgebreid framework, maar wel een goeie tutorial!
bedankt...
@if $responsive == true{
@include media-query(palm){
@include grid-setup("palm-");
}
@include media-query(lap){
@include grid-setup("lap-");
}
@include media-query(portable){
@include grid-setup("portable-");
}
@include media-query(desk){
@include grid-setup("desk-");
het is wss de bedoeling dat de "palm-"; "lap-" ; "portable-" ; "desk-"
ingevult worden met een bepaald px of heb ik het nu mis? ze spreken ook van een _vars.scss heb ik die dan ook nodig samen met die inuit.css?
misschien een stomme vraag, moet nog alles leren en ondervinden
groetjes
Gewijzigd op 16/01/2013 23:00:47 door Davy Debel