Vägen till en lyckad responsiv webbdesign.

Transkript

1 Vägen till en lyckad responsiv webbdesign. Tänk mobilt först! Utgå ALLTID från den mista skärmen och jobba dig uppåt. Man brukar räkna med att 320px är i minsta laget idag. Korrekt ViewPort är mycket viktig, en sida kan annars bli konstig i vissa webbläsare. Skippa tabeller! Dessa fungerar dåligt eller inte alls med responsivitet, använd div-boxar istället. Försök att använda relativa mått, procent (%) fungerar nästan alltid. Dölj det onödiga med: display: none; och trolla fram det med MediaQuery när du behöver eller lägg det i en meny. Bilder kan du också dölja med: display: none; och ladda med jquery när det behövs. Separat css-fil eller i huvudet eller formatera direkt i koden? Sidan laddar snabbast med separat fil, sen i huvudet och sist direkt i koden. Ska du köra med html5 så bör du veta att vissa koder inte gäller längre från 4.01 & har blivit ersatta. Det kan därför vara klokast att ha CSS i separat fil. Bilder är lite speciella, i synnerhet om man ska ha bakgrundsbilder och dessutom täcka hela sidan (mera om bilder längre fram). Hemsidor över huvud taget ska ha korrekt grammatik men det räcker inte, de ska vara snyggt uppställda rent linjärt också. Planera, planera och planera! Det är ofta viktigare att med gammal hederlig penna och papper rita upp sidor och kopplingar mellan länkar än att lägga tid på att googla fram finesser. Krångla inte till det i onödan. En enkel sida kan också vara väldigt snygg om man gör rätt från början. (det finns gratis teman som är otroligt vackra och har finesser) för den som vill. Ha kul när du programmerar. Att inbilla sig att vissa saker är möjliga eller omöjliga bygger oftast på dålig research från första början. Kör du fast så lägg ner programmeringen ett tag och gör något annat en stund. Nu går vi in på djupet! MediaQuery kan vara nödvändigt att ta till när relativa mått inte hjälper och designen faller ihop och börjar överlappa andra saker. Hur ser det ut? Min variant ser ut så här, och fungerar till det mesta.

2 .exempel { font-family: Arial, 'sans serif', Serif; font-size: 180%; font-weight: bold; text-align: center; color: (min-width: 769px) and (max-width: 1024px) {.exempel { font-size: (min-width: 481px) and (max-width: 768px) {.exempel { font-size: (min-width: 321px) and (max-width: 480px) {.exempel { font-size: (max-width: 320px) {.exempel { font-size: 100%; Här anropar vi den påhittade klassen exempel och minskar dess textstorlek med 20% per brytpunkt. All annan formatering låter vi vara. Detta betyder att vi får 4 brytpunkter förutom originaltextens storlek på 180%. Det är på det här sättet man bygger upp responsiva hemsidor. Vissa menar att man ska anpassa brytpunkterna efter sin egen design och inte efter de mått som olika mobiler & surfplattor redan har. Detta är en smaksak, jag hävdar att man ska anpassa designen efter fasta mått som redan finns. Anta att vi bygger en meny med fyra länkar som vi centrerar, sen när problem börjar uppstå så letar vi upp en brytpunkt som passar. Om då denna brytpunkt ligger mellan 481px & 768px någonstans runt 667px så kan det bli problem på ANDRA plattor och mobiler, än det test du gör på din dator. Marginaler kan man också använda för att göra så det blir följsammare. Detta behöver man sällan sätta in i MediaQuery. Man kan göra så här:.exempel { margin-left: 3%; margin-right: 9%; I exemplet ovan så täcker vi sidan med 88% text på brädden. 3% + 9% = 12%, 12% - 100% = 88%. Det man bör tänka på är proportionalitetsprincipen, dvs något förskjutet till vänster, typ ett 46/54 förhållande, ungefär som det vertikala gula fältet i korset på en svensk flagga, det sitter inte absolut centrerat. Detta kan man använda när det passar.

3 Hur gör man med separata CSS-Filer? Inte så svårt som du tror. Man sätter in en kod i sidans huvud mellan taggarna: <head> <link href=''index.css'' rel=''stylesheet'' type=''text/css''> // andra koder, meta osv. </head> Sedan gör du en fil du döper till index.css och där behöver du ENBART skriva formatet rätt upp och ner: body { background-color: #006400; color: #FFFFFF;.exempel { //koder // #exempel { // koder // Man behöver alltså INTE sätta in style-taggar som man gör när man vill ha CSS i dokumenthuvudet. Då sätter man ut style så här: <head> <style> body { background-color: #006400; color: #FFFFFF;.exempel { //koder // #exempel { // koder // </style> </head> Detta gör att sidan blir lite långsammare än om du kör med separat fil, men med bredband så lär ingen märka så stor skillnad om dokumentstorleken inte är allt för massiv, det är då bättre att ha just en separat fil. Det finns en bestämmande-lag också, det är så att format direkt i sidans html-kod bestämmer sedan i huvudet & sist i separat fil. Med bestämma i det här fallet har med vilken modell som styr, det har inget med laddtider på sidan att göra. 1. Direkt i koden <div style=''font-family: Arial;'' ''// formatering// ''> (Vilken laddar sidan lite trögare.) 2. I huvudet. (Vilken laddar sidan lite snabbare.) <head> <style>.exempel { font-family: Arial; </style> </head> 3. I separat fil vi gått igenom redan, vilken laddar sidan snabbast. Det finns flera fördelar med att ha separata CSS-mallar, de styr, inte användaren, han/hon får hålla sig till det DU bestämmer. Dessutom så behöver du bara ha EN mall till flera sidor även om dessa ligger på andra domäner. Man skriver då ut hela adressen: <link href='' rel=''stylesheet'' type=''text/css''> Då blir alltså formatet som någon har på sin sida fjärrstyrt från mallen DU har på ditt webhotell, så det finns för... & nackdelar.

4 Bilder Bilder är lite hopplösa som du märker när du programmerar. Trixet är som så mycket annat att köra med procent OCH blanda det med pixlar samt lite andra finesser. En av finesserna är min-width & max-width. Använder man det rätt så har det sina fördelar. Html: <img src=''bild1.jpg'' class=''a01''> Css:.a01 { width: 325px; max-width: 75%; height: auto; På det viset så blir inte bilderna bredare än 75% men kan bli mindre, höjden är satt till auto vilket gör att bilder skalar proportionerligt dvs. höjden hakar på och anpassar sig, då får du inga cropps så att bilden klipps eller förvrängs. Tvärt om går också bra om du vill, men då kommer bilden att bete sig helt annorlunda. Html: <img src=''bild2.jpg'' class=''a02''> Css:.a02 { width: 325px; min-width: 50%; height: auto; Då kommer bilden att bli 50% STÖRRE men INTE mindre. Oftast så använder man bara max-width av förståeliga skäl då man oftast vill att en bild ska bli MINDRE för att passa på olika plattformar. Detta fungerar även på div-boxar då man vill att en box ska stanna i växten på brädden så man kan få den att flytta sig med flit dit man vill. Man kan på detta sätt stoppa ett objekt från att krympa för mycket. Vilket kan vara bra då man vill slippa fenomenet när man har 4 objekt. Man kan även använda sig av min-height & max-height för att få vissa finesser då man tycker att höjden ska bestämma.

5 Bakgrundsbilder. Dessa är nästan värst att hålla på med. Här får man acceptera att bilder croppas dvs. att vissa delar klipps. I det här fallet så ska man inte köra med procent & tänka 100% X 100% på både höjd & brädd eftersom en bild mycket sällan är en helt liksidig kvadrat, det blir då fel och vi får en bild som ser ut att ha en konstig gummisnodd i sig & stretchar. Det blir förvrängt! Ett av sätten är att köra med cover & center center osv. Html: <body> // behövs ingen klass, vi anropar body rakt av istället. Css: body { background-image: url(bilder/bgstor.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover; // övriga format // OBSERVERA -??-background-size: cover; växlarna som är nödvändiga för att koden ska renderas rätt på de flesta förekommande webbläsarna samt att man ALLTID sätter standard-parametern längst ner, det är viktigt. Givna saker som div, span, p, img och body kan man anropa direkt, man behöver inte göra en klass för t. ex. body: <body class=''test''> +.test { color: red; för att få röd text. Man kör bara med <body> + body { color: red; Ett annat sätt är att göra en div-box med brädden 100% & höjden auto samt att lägga in bilden fixerat och bestämma att den också ska följa samma system. Här får du räkna med att bilden croppas dvs. klipps av. Html: <div class= b03 > <img src= bg2.jpg class= b04 > </div>

6 Css:.b03 { position: fixed; top: 0; left: 0; width: 100%; height: auto;.b04 { position: fixed; top: 0; left: 0; width: 100%; height: auto; Observera att du då kommer att få en bild som inte automatiskt skalar rätt på höjden, du är tvungen att jaga nedre högra hörnet på bilden med hörnet på sidan. Gör du sidan långsmal så kommer du alltså att få tomrum under bilden. Som du märker så är bilder lite bökiga att hålla på med. Detta beror på att bilder inte är helt kvadratiskt liksidiga, så icke heller en bildskärm. Detta hänger dock inte ihop fullt ut. Vissa bildskärmar är till sin proportion oftast bredare än de är höga. Vissa skärmar är 16:9 & vissa är 16:10 till sitt format osv. Detta gör det bökigt att anpassa bilder då bilder inte heller håller givna format & storlekar. Vissa fotograferar i vertikalt läge men ibland också i horisontellt läge. Det gör att det kan bli rätt hopplöst då man ska tvinga en bild som är tagen i porträtt-läge dvs. långsmal att synka ut på brädden som en landskaps bild gör per automatik. Den bilden kommer då att bli väldigt stor på höjden & vice versa. ViewPort ViewPort? Vad är det? Det är mycket viktigt för att en sida ska fungera rätt på olika plattformar. Här visar vi 2 st: <meta name=''viewport'' content=''width=device-width, initial-scale=1.0''> Den är vanligast & tillåter att användaren zoomar sidan. <meta name=''viewport'' content=''initial-scale=1.0, user-scalable=no''> Denna är också rätt vanlig men tillåter INTE att användaren zoomar sidan, den används då man vill lägga fokus på att sidan ska vara till för mobiler och surfplattor då man vill förhindra användaren att zooma sidan. Varning om ViewPort Du ska INTE använda ViewPort om sidan inte är responsiv. Fel ViewPort kan göra att en sida INTE ser lika ut på mobilen som den gör på datorn. Prova att ta bort den helt så märker du direkt om du ska använda den över huvud taget.

7 Vad är egentligen ViewPort? Svårt att förklara, men det handlar om att innehållet på sidan ska anpassa sig till storleken på skärmen. Det vanligaste är att ha skalan 1.0 då det fungerar bäst. Då man anger att något ska vara 200% så kommer det att bli 200% av ViewPorten som är 1.0. Innehållet kommer alltså att få rätt skala. Det är därför den är så viktig! Det finns ett sätt till att använda ViewPort och det är att göra det med CSS istället, i huvudet eller i separat fil är valfritt: { zoom: 1.0; width: { width: extend-to-zoom; zoom: 1.0; Detta har jag provat med varierande resultat, får man det att fungera på sin egen design så är det bra, men det verkar som att alla webbläsare inte tar emot detta, så denna får du prova dig fram med. På nästa sida börjar vi med JavaScript som vi använder tillsammans med biblioteket jquery. Det är sätt att styra funktioner snarare än format.

8 jquery (Nu går vi ännu djupare!) jquery är en samling javascript i en ända stor fil som heter.js på slutet. Med hjälp av jquery kan man göra saker som inte går med vanlig HTML eller CSS. Man kan få innehåll att försvinna helt eller dyka upp, man kan flytta innehåll till olika positioner (även z-index, att gömma bakom ett ovan-liggande lager) Man kan bland annat förladda bilder så de visas snabbare. Man får då använda sig av både CSS & jquery. HTML: <html> <head> <meta name=''viewport'' content=''width=device-width, initial-scale=1.0''> <link href=''index.css'' rel=''stylesheet'' type=''text/css''> <script src=''index.js'' type=''text/javascript''></script> <script src='' type=''text/javascript''></script> </head> <body> <p> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p> <p> Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p> <br> <div class=''swap''> <a nohref=''#'' class=''b01''><img src=''bg1.jpg'' class=''a01''></a> <a nohref=''#'' class=''b02''><img src=''bg2.jpg'' class=''a01''></a> <a nohref=''#'' class=''b03''><img src=''bg3.jpg'' class=''a01''></a> <a nohref=''#'' class=''b04''><img src=''bg4.jpg'' class=''a01''></a>  <a nohref=''#'' class=''c01''><img src=''large/bg1.jpg'' class=''a02''></a> <a nohref=''#'' class=''c02''><img src=''large/bg2.jpg'' class=''a02''></a> <a nohref=''#'' class=''c03''><img src=''large/bg3.jpg'' class=''a02''></a> <a nohref=''#'' class=''c04''><img src=''large/bg4.jpg'' class=''a02''></a> </div> </body> </html>

9 Vi antar nu att vi har 4 mindre bilder som laddas direkt när sidan visas men vid klick på någon av dessa bilder så ska ALLA mindre döljas, sedan så ska motsvarande stora bild visas OCH vice versa. Nu får vi ta till djärva knep! Som du ser så är länkarna lite speciella <a nohref= # etc. a nohef= # gör att sidan inte laddas om vilket är en klar fördel. Nackdelen är att muspekaren inte ändras, den blir inte en hand som pekar, men det går att ändra på, (vi visar det längre ner markerat med en sol ). CSS-FILEN:.swap { position: fixed; top: 0; left: 0; width: 100%; height: auto; text-align: center;. a01 { width: 325px; max-width: 75%; height: auto;. a02 { width: 1080px; max-width: 75%; height: auto; display: none; Okej, vackert så långt. Nu har vi en div-box för bilderna att röra sig i. Vi har också format på bilderna. Men som du ser så har vi inom klassen för de stora bilderna (.a02) lagt till parametern display: none;. Detta gör att de inte syns alls men går att trolla fram när vi behöver dem och det gör vi med jquery. jquery kan du både ladda ner och länka till lokalt eller så kan du göra som i exemplet ovan, länka in det utifrån, i detta fallet direkt från tillverkaren. Motsatsen till display: none; heter display: block; Det som är knepet med detta att dölja bilder är att de redan finns på ditt webbutrymme men visas & döljas inom sidan utan att du behöver vare sig iframes eller undersidor. Då vi inte vet i vilken ordning besökaren kommer att klicka för att se en större bild så måste vi ha dubbla funktioner för varje enskild bild. Vi måste i varje sådan också ta med ALLA bilder.

10 OBS!! Man kan INTE använda bara EN uppsättning bilder, för döljer vi bg1.jpg så är den borta! Vi måste ha både stora & små bilder ELLER lägga samma bilder i en annan mapp som i exemplet. De vanligaste funktionerna är:.show.hide.fadein &.fadeout, men det finns massor att läsa om på jquery.com. Det kommer att bli mycket koder så det gäller att vara konsekvent. JS-Filen: (som kommer att vara ganska lång!) $(document).ready(function() { $(''.b01'').click(function() { $(''.c01'').fadein(2000); $(''.b01'').hide(); $(''.b02'').hide(); $(''.b03'').hide(); $(''.b04'').hide(); ); $(''.c01'').click(function() { $(''.c01'').hide(); $(''.b01'').fadein(2000); $(''.b02'').fadein(2000); $(''.b03'').fadein(2000); $(''.b04'').fadein(2000); ); $(''.b02'').click(function() { $(''.c02'').fadein(2000); $(''.b01'').hide(); $(''.b02'').hide(); $(''.b03'').hide(); $(''.b04'').hide(); ); $(''.c02'').click(function() { $(''.c02 '').hide(); $(''.b01'').fadein(2000); $(''.b02'').fadein(2000); $(''.b03'').fadein(2000); $(''.b04'').fadein(2000); ); $(''.b03'').click(function() { $(''.c03'').fadein(2000); $(''.b01'').hide(); $(''.b02'').hide(); $(''.b03'').hide(); $(''.b04'').hide(); );

11 $(''.c03'').click(function() { $(''.c03'').hide(); $(''.b01'').fadein(2000); $(''.b02'').fadein(2000); $(''.b03'').fadein(2000); $(''.b04'').fadein(2000); ); $(''.b04'').click(function() { $(''.c04'').fadein(2000); $(''.b01'').hide(); $(''.b02'').hide(); $(''.b03'').hide(); $(''.b04'').hide(); ); $(''.c04'').click(function() { $(''.c04'').hide(); $(''.b01'').fadein(2000); $(''.b02'').fadein(2000); $(''.b03'').fadein(2000); $(''.b04'').fadein(2000); ); ); Som du ser så är det mycket upprepningar så man behöver inte skriva mer än en uppsättning som man sedan upprepar och redigerar om lite. Funktionsförklaring till jquery-anrop: $(''.b01'').click(function() { $(''.c01'').fadein(2000); $(''.b01'').hide(); $(''.b02'').hide(); $(''.b03'').hide(); $(''.b04'').hide(); ); $(''.c01'').click(function() { $(''.c01'').hide(); $(''.b01'').fadein(2000); $(''.b02'').fadein(2000); $(''.b03'').fadein(2000); $(''.b04'').fadein(2000); ); Som du ser så kommer vissa funktioner att avfyras när vi gör vissa saker. Klickar vi på bilden länkad till funktionen.b01 så kommer.c01 som är länkad till den större bilden att avfyras och då visas bilden. Samtidigt så döljs alla små bilderna. Samma sak gäller för klick på den stora bilden, då får vi en växling av funktionerna, mycket smidigt!

12 Detta fungerar även på div-boxar med text eller på paragrafer <p>text</p>. Man kan i princip visa eller dölja vilken class eller id som helst och även ändra position med mera, jquery är kraftfullt. Det är på detta vis man bygger upp EN sida där man kan växla innehåll utan att ha vare sig iframes eller undersidor. Som angivits i texten tidigare så kommer muspekaren inte att ändras när man kör med a nohref= # För att råda bot på även det lilla fenomenet så får vi ta till CSS igen och formatera länkar. Html: <a nohref=''#'' class=''exempel''>länk 1</a> det går även skriva: <a class=''exempel'' nohref >Länk 1</a> Css: a { text-decoration: none; a:link { color: #ffffff; a:visited { color: #ffffff; a:hover { color: #ffffff; font-style: italic; cursor: pointer; cursor: hand; a:active { color: #ffffff; Alla länkar i exemplet är satta till #ffffff = Vit. Dessutom så har vi tagit bort understrykning med text-decoration: none; Vid hovring så kommer tillägget som gör att muspekaren ändras: cursor: pointer; cursor: hand; I samma veva så lägger vi in att länken ska bli kursiv när vi pekar på den. Har du flera länkar du vill ha annat format på så får vi ta till ett knep till: a.one { text-decoration: none; a.one:link { color: rgb(63,63,63); a.one:visited { color: rgb(63,63,63); a.one:hover { color: rgb(0,0,255); font-size: 150% cursor: pointer; cursor: hand; a.one:active { color: rgb(63,63,63); Man lägger till.ettord i själva css koden OCH man måste anropa en klass i själva länken på sidan också. OBS! Det går INTE med en siffra, måste vara bokstäver! <a href class= one > >Mitt exempel</a> Så det är bara att testa, man kan ha olika färger, typsnitt, storlekar och position. Man behöver bara ha fantasi och tålamod :-) Nu är det dags för lite kaffe! Eller hur?

13 Mera finesser! Det är mycket populärt med små enfärgade platta bilder nu för tiden. Det är inte bilder utan kallas ikon-fonter. I stället för att man får ett formaterat A så får man en ikon! i det här fallet en Dingbats (ett vanligt typsnitt som bygger på ungefär samma princip). Sådana här bibliotek med ico-font's finns att ladda ner, de mest användbara är nog: och På dessa sidor kan man ladda ner färdiga paket eller ladda ner en egen grupp man bakar ihop. Instruktioner hur man gör finns på sidorna och även i en websidesfil som följer med per automatik i det man laddar ner. Det finns ett litet problem även här som kan uppstå på mobiltelefoner, har du satt en icon-font till: position: fixed; så kan den hänga sig när man scrollar på mobilen. Detta beror på att en mobil har för klen processor för att rendera sidan så att ikonen sitter fast. Naturligtvis så finns det en lösning på detta! Ange i koden där du har infogat din ico-font:.ico-font1 { font-size: 135%; color: #ffffff; position: fixed; Detta är problemet! bottom: 8px; Detta är problemet! right: 20px; Detta är problemet! -webkit-transform: translatez(0); Detta löser problemet! -moz-transform: translatez(0); Detta löser problemet! -ms-transform: translatez(0); Detta löser problemet! -o-transform: translatez(0); Detta löser problemet! transform: translatez(0); Detta löser problemet! transform: translatez(0); är ett djärvt knep som tillhör CSS3 som är mycket avancerat. Man kan med CSS3 göra transformeringar mellan olika objekt. Tänker inte gå in djupare på det i den här guiden då man sällan behöver använda det för något annat än vissa tjusiga knappar osv. OBSERVERA att ikon-fonter inte fungerar eller ser konstiga ut i inkompatibla webbläsare

14 Öka läsbarheten med textskugga. Har man en ljus bakgrund och absolut vill ha en ljus passande textfärg så kommer kontrasten att bli dålig, samma sak gäller det omvända. Det finns knep för detta, textskugga, (stroke som är en annan teknik går vi inte igenom här) för den är inte så ofta använd. I css filen så anger du där du har din box eller i body'n : text-shadow: 0 0 1px rgba(0, 0, 0, 0.5); Så får du en svart skugga med 50% genomskinlighet på 1px runt varje bokstav. text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); Så får du en vit skugga med 50% genomskinlighet på 1px runt varje bokstav. Medeltalet för färgen grå är 192,192,192 naturligtvis kan du köra med matchande färger men tänk på att det ska ge kontrast. OBS, för att få skugga runt om hela bokstäverna så sätter vi positionen på skuggan till NOLL i både Z och Y axeln Skugga på div-boxar och bilder (och fotoramar)..photo_border { border-top-width: 12px; border-top-style: solid; border-top-color: #f4f4f4; border-right-width: 12px; border-right-style: solid; border-right-color: #f4f4f4; border-bottom-width: 12px; border-bottom-style: solid; border-bottom-color: #f4f4f4; border-left-width: 12px; border-left-style: solid; border-left-color: #f4f4f4; -webkit-box-shadow: -8px -8px 14px rgba(0, 0, 0, 0.6); -moz-box-shadow: -8px -8px 14px rgba(0, 0, 0, 0.6); -ms-box-shadow: -8px -8px 14px rgba(0, 0, 0, 0.6); -o-box-shadow: -8px -8px 14px rgba(0, 0, 0, 0.6); box-shadow: -8px -8px 14px rgba(0, 0, 0, 0.6); Övre delen är för ramen & den nedre är för skuggan. Observera återigen -webbläsar-tilläggen med standard längst ner. Minus = vänster & uppåt, (plus behövs inte) samt storlek följt av färg. En fotoram är bara en tjock border, inget speciellt med det. Du ser att färg ibland anges i rgba, a står för alfa & gör att man kan få genomskinlighet, 1.0 är homogen 0.5 = 50% osv. OBSERVERA att skuggor på text och bilder / boxar inte fungerar alls eller ser konstigt ut i äldre inkompatibla webbläsare.

15 Google Fonts Google Fonts är också väldigt populärt, då kan man tvinga en webbsida att visa ett typsnitt som inte finns på besökarens dator och ej heller på ditt webbhotell, mycket smidigt då det finns över 600 att välja på. Man går till & väljer det typsnittet man vill & klickar på Quick Use, då får man instruktioner hur man ska göra. Det består i att klistra in 2 saker, en länk i huvudet & en format-kod i body'n eller i css, så här ser exemplet ut för Open Sans: <head> <link href=' rel='stylesheet' type='text/css'> </head> <body style= font-family: 'Open Sans', sans-serif; > eller CSS: body { font-family: 'Open Sans', sans-serif; Google Fonts är väldigt populärt och smidigt sätt att använda typsnitt på. Själv så föredrar jag Sans'er framför Serif'er. Arial är en Sans-serif det känner man igen på att bokstäverna är ganska raka. Times New Roman Känner man igen på att det har så kallade Serifer. Bokstäverna är stukade med snuttar i ändarna. Andra problem H1 H7 Ger oftast ett extra <br> som man ibland inte vill ha, för att råda bot på det så kan man skapa en css regel även för det: h1, h2, h3, [ etc... ] { display: inline; // Så bör det lösa sig.

16 <div><a name="ankare1"></a></div> Ankare Funkar inte som ankare i alla webbläsare, byt det mot: <div><a name="ankare1"> </a></div> // = Mellanslag så bör det funka, anledningen är att vissa webbläsare inte klarar en tagg som är tom, det räcker med att ha ett mellanslag. Observera att man bör sätta ankaret i en div-box för att det ska funger i t. ex. Internet Explorer. OBSERVERA: Kursiv stil (italic) kan ibland se mycket konstig ut i Safari- Browser som finns på Mac, Ipad och Iphone i vissa typsnitt och det verkar inte finnas något annat sätta att fixa till det än att låta bli. Det man kan göra är att köra med något annat typsnitt eller formatering. Så något smart css-knep för detta verkar idag inte finnas. Centrera i höjdled utan tabeller Centrera i höjdled brukar vara förbehållet tabeller. Tabeller funkar inte med responsivitet, man ska köra med div-boxar. Kan man på något sätt få in tabellens egenskaper i en div-box? Ja visst! Html: <div class=''a01''> <div class=''a02''> Hej på dig!! </div> </div> Css:.a01 { position: fixed; top: 50px; left: 50px; width: 50%; height: 50%; font-size: 150%; font-family: Arial; background-color: gray; color: black; display: table;

17 .a02 { display: table-cell; vertical-align: middle; text-align: center; Observera att vi måste ha 2 boxar, en inre & en yttre för att kunna centrera i både x och y-axeln (i alla fall gör jag så) då tabeller är uteslutet. Teman. Tycker man det är svårt att designa från scratch så finns det 100 tusentals med färdiga teman att ladda ner, så väl som responsiva med HTML5 och jquery till mer simpla, vill du ha det senaste så kan du googla på orden: free html5 themes // om du vill ha en vanlig sida. Eller free html5 responsive themes // om du vill ha en responsiv sida. Det finns massor av gratis-teman, men vissa tar ut en engångskostnad.

18 Referenser: ign Hoppas du får en trevlig stund med mina tips även om det finns obegränsat att läsa på nätet, vissa delar har du redan fått återgivit i denna text, med reservation för att det kan förekomma vissa mindre fel.