Responsive Webdesign
zie ook: HTML5Classroom?
Waarin verschillen web sites voor mobiele navigatie?
Oftewel: wat is er anders aan websites geschikt voor tablets en phones?
- een websites voorzien van een vaste minimum breedte is geen goed idee.
- navigatie is bovenaan voor de makkelijkste toegang. Herhaal de navigatie onderaan de pagina, zodat bezoeker na lezen niet terug naar boven hoeft te scrollen.
- veel tablets/phones hebben geen muis; hover-effecten hebben dus geen nut. Voorkom dus rollover-styles.
- vermijd navigatie met behulp van afbeelding; gebruik liever list-gebaseerde navigatiemenus, vormgegeven met CSS.
Media Queries zijn een onderdeel van CSS3. Webbrowser die slechts CSS 2.0 of 2.1 ondersteunen kunnen device-afhankelijke stijlen kiezen via mediaqueries in de head van de html. Deze techniek heet "CSS Filter" en hebben in het algemeen deze vorm.
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
van: http://webdesignerwall.com/tutorials/css3-media-queries
Handige Media Queries
Maak verschil tussen scherm en afdruk
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">
Media Queries for Standard Devices
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Over de iPad
In de browser (Safari; iOS 5.1.1) is de webpagina liefst 980px breed, zowel portrait als landscape. In landscape orientatie is de pagina iets meer ingezoomd of minder uitgezoomd; het is maar hoe je het bekijkt.
met CSS kun je detecteren
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
Zie : http://cloudfour.com/ipad-css/ . Met CSS kun je onderscheid maken tussen landscape en portrait.
Over mijn telefoon HTC Wildfire
Dit ding heeft sinds kort Android 2.3 en de browser hierin ziet alles als 800px breed, zelfs al is het minieme scherm maar 240px breed in portrait en 320px in landscape.
Over ondersteuning van oudere browsers
Deze vent Andy Clarke zat met een dilemma:
wat moet ik met Internet Explorer 6?
Hoe ondersteun je IE6 in je websites. Fixen met een speciaal CSS? Javascript gebruiken? Moet elke website precies hetzelfde eruit zien in elke browser? Nee Ontwerpen voor de betere browsers en dan patchen voor IE6? Totaal blokkeren? Totaal negeren? Er is geen eenduidig antwoord.
Toen kreeg hij een geweldig idee. De reden waarom gebruikers naar een bepaalde website komen is puur vanwege de inhoud. Dus hij maakte een stylesheet speciaal voor IE6 om alleen de inhoud te presenteren op een toegankelijke manier. Dat werd het universele stylesheet voor IE6.
Zie ook:
- Google test mobile friendlyness of your site
- https://testmysite.withgoogle.com
- http://www.w3.org/TR/css3-mediaqueries/
- http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
- http://webdesignerwall.com/tutorials/css3-media-queries
- Wat heeft Jon Hicks te zeggen over CSS filters?
- Universal internet Explorer 6 CSS - De CSS op Googlecode
- Do web sites need to look exactly the same in every browser?
- Ethan Marcotte - Responsive Web Design
- Responsive Web Design: What It Is and How To Use It By Kayla Knight
Voorbeelden van responsive webdesign
- http://hicksdesign.co.uk/ Prachtig voorbeeld van responsive webdesign
- https://www.howsmyssl.com
- http://arduino.cc/
- http://jendryschik.de/
- http://www.shawnhogan.com
Meer voorbeelden van responsive webdesign
- http://www.yod.nl
- http://mattwilcox.net/archives/setting-up-a-secure-home-web-server-with-raspberry-pi/
- http://www.ducky-pond.com/posts/2012/Apr/installing-php-php-fpm-nginx-on-alarm/
- http://www.blastprocessor.co.uk/
- http://www.ziggo.nl/
Technieken
- http://goldilocksapproach.com/
- 960 Grid System
- Unsemantic is a fluid grid system that is the successor to the 960 Grid System.
- Floating elements
- Clearen van elementen met de clearfix class
Truc: sticky navigation bar
google "sticky navigation bar"
- http://www.hongkiat.com/blog/css-sticky-position/
- http://www.jay-han.com/2011/11/10/simple-smart-sticky-navigation-bar-with-jquery/
Top 10 online webdesigntools
uit: F&L Special het Webdesign Boek 2012. De meeste zijn gratis.
- Google Web Fonts
- Initializr startpunt voor HTML5 projecten
- Layerstyles beeldbewerkingprogramma geneert CSS
- pixlr beeldbewerking, a la Photoshop, aantal tools
- Cloud9 IDE schrijf en debug code voor node.js en JavaScript.
- Kuler Kleurschemakiezer van Adobe
- Aviary vectoren, bitmaps, enz
- MockFlow wireframing, webpagina layoutbouwer
- jsFiddle test & debug online JavaScript code, en ook CSS en HTML
- Wufoo opmaakontwerp voor formulieren met CSS. Gratis en registratie vereist.
Tools voor beter ontwikkelen
- HTML5 Mobile Boilerplate basis voor HTML5 webontwerp
- Flexslider plugin voor een responsive imageslider
- Mocking Bird maakt mock-ups van websites, klik-en-sleep op het canvas.
- Normalize.css A modern, HTML5-ready alternative to CSS resets
- Codepen.io online HTML/CSS/Javascript editor Build, Explore, and Teach the Web, Instantly.
- JSFiddle Online klooien met HTML, CSS, javascript.
Javascript
Zie Tech.Javascript
Icons
- icoMoon Mooie gratis icon set
Mobile apps
- Sencha Touch bouw mobiele apps met Sencha Touch; framework voor Android en iPhone.
- jQuery Mobile framework voor alle grote mobiele platformen, ondersteunt layouts en widgets geoptimaliseerd voor touchscreens met graceful degradation voor oudere browsers. http://www.jquerymobile.com/demos/1.0a2
- Phonegap mobiele apps maken met deze bibliotheek voor Android en iOS.
Icon sets
Volg discussie
| Link | Engels | http://www.entypo.com/ | http://typicons.com/ | https://useiconic.com/open/ |
| SVG | font,SVG,PNG | SVG,PNG,WOFF,.. | ||
| Bekijk | View | eye | eye | eye |
| Bewerk | Edit | Edit pictogram | edit of pencil | brush, pencil |
| Geschiedenis | History | archive of back-in-time | time | timer |
| Bijlagen | Attach | Attachment of upload | attachment | paperclip |
| Afdrukken | printer | |||
| Logout | Logout | Log out pictogram | lock-open | account-logout, lock-locked |
| Zoeken | Search | magnifying-glass.svg | zoom | magnifying-glass |
| Admin tool | Admin tool | cog of tools | cog of spanner | cog, wrench, people |
| Login | login | Login pictogram | lock-closed | account-login, lock-unlocked |
PmWiki SVG graphics als Actionbutton
PmWiki moet weten dat SVG een embeddable picture is. Voeg in config.php toe:
$ImgExtPattern="\\.(?:gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG|SVGZ?|svgz?)";
PmWiki vanaf versie 2.2.85 ondersteunt SVG
''This version adds Scalable Vector Graphics (*.svg, *.svgz) as allowed uploads and as embeddable picture extensions (with the <img/> tag).''