Sikkepitje.nl

Sikkepitje.nl

this private cloud

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:

Voorbeelden van responsive webdesign

Meer voorbeelden van responsive webdesign

Technieken

Truc: sticky navigation bar

google "sticky navigation bar"

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

Javascript

Zie Tech.Javascript

Icons

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

LinkEngelshttp://www.entypo.com/http://typicons.com/https://useiconic.com/open/
  SVGfont,SVG,PNGSVG,PNG,WOFF,..
BekijkVieweyeeyeeye
BewerkEditEdit pictogramedit of pencilbrush, pencil
GeschiedenisHistoryarchive of back-in-timetimetimer
BijlagenAttachAttachment of uploadattachmentpaperclip
AfdrukkenPrintprintprinterprint
LogoutLogoutLog out pictogramlock-openaccount-logout, lock-locked
ZoekenSearchmagnifying-glass.svgzoommagnifying-glass
Admin toolAdmin toolcog of toolscog of spannercog, wrench, people
LoginloginLogin pictogramlock-closedaccount-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).''