Webdesign, struktur, tillgänglighet, användarvänlighet

PHPportalen Forum Index » Diskutera webbutveckling
Lägg ett bokmärke på hela tråden
Skapa nytt inlägg   Svara på inlägget Gå till sida 1, 2  Nästa
Visa föregående ämne :: Visa nästa ämne  
Startad av: Meddelande
Saurid
Moderator



Medlem i: 5362 dagar
Från: Karlshamn
Status: Offline



#276906
Inlägg Skrivet: 2005-03-17 23:18      Ämne: Webdesign, struktur, tillgänglighet, användarvänlighet Citera

Det är många därute som har vettiga och intressanta idéer om hur en hemsida ska designas och programmeras (HTML/CSS). Min tanke med denna tråden är att alla kan ge sina tips om vad man bör göra och inte göra i ämnen som webbdesign, användarvänlighet, tillgänglighet, standarder m.m.

En sorts checklista som man kan titta igenom för att försäkra sig om att de gjort sitt allra yttersta för att upplevelsen av sin sida blir den bästa. Fyll på med era egna synpunkter.

Och vad som är viktigt:
Exclamation Motivera era punkter åtminstone kortfattat så att andra kan förstå varför man ska undvika något eller göra något på ett visst sätt!
Exclamation Kommentera gärna andras inlägg, men undvik tyngre diskussioner. Låt var och en avgöra vad som känns viktigt eller mindre viktigt att lägga tyngdpunkten på (förutsätter att du motiverat din synpunkt tydligt nog).



Låt mig börja med några tankegångar:



Undvik detta:

  • Använd inte ramar/frames. Det finns fördelar med ramar, men nackdelarna är fler. Det blir exempelvis svårt att länka till din sida, och sökmotorerna blir förvirrade, det kan bli problem med utskrifter från din sida, för att nämna några.

  • Använd inte bilder som ersättning för texter. Det tar längre tid att ladda ner för besökaren och det är svårare för dig att uppdatera. Det tar bort möjligheten för besökaren att ändra teckenstorleken, vilket är väldigt viktigt för tex. de med nedsatt syn.

  • Använd inte bredband som ursäkt att börja använda omotiverat många bilder eller dåligt optimerade bilder på sidan. En snabb sida för modemanvändare är ännu snabbare för bredbandsanvändare, vilket aldrig är fel.

  • Stäng inte vissa webläsare från din sida. Se till att det går att se sidan oavsett webläsare. Upplys dem istället om fördelarna med den ena eller den andra webläsaren.

  • Använd inte webbläsarspecifik CSS eller HTML om den fyller en viktig funktion på hemsidan. Låt inte besökaren gå miste om något pga webbsläsarspecifik kod.

  • Undvik animerade bilder och blinkande texter. De leder av uppmärksamheten och är störande för besökaren. Låt besökaren själv avgöra vad som är viktigt för dem. Vill du markera ett extra viktigt textstycke, gör det med andra medel. Byt färg, teckensnitt eller markera med en ikon exempelvis.

  • Undvik popupfönster i den mån det går. Det förvirrar ovana besökare och de vana besökarna blir irriterade på ständigt nya fönster.



Sträva efter detta:

  • Försök att använda tabeller/tables endast till det de är till för. Tabeller är traditionellt sett ett lättanvänt layoutverktyg. Men det gör koden mycket mer oöverskådlig och "tung", dvs mycket kod för lite utseende och funktionalitet. Det medför också längre nedladdningstider.

  • Styr utseendet på din HTML med en extern CSS-fil. Fördelarna med CSS blir uppenbara då man börjat använda den. Ändra bara i en fil och utseendet på dina HTML-märken ändras utöver hela din sida. Det blir mindre oreda i HTML-koden, lättare att uppdatera och läsa.

  • Använd samma utseende på hela sidan. Det är viktigt att besökaren hela tiden känner igen sig, och förstår att de är kvar på samma sida. Det ökar också personligheten (eller rent av varumärket) på din sida och gör att man lättare lägger den på minnet.

  • Se till att sidan fungerar i de flesta upplösningar. Använd en "flytande" layout om det är möjligt. Det gör det möjligt för alla att se sidan eller använda den storlek som passar. Inte alla maximerar webbläsaren när de läser en sida.

  • Använd HTML-märkena till det de ska användas till. Hitta inte på egna "märken" genom att använda class och id i CSS. Om en överskrift ska skrivas ut - använd h-märket. Undvik att använda exempelvis b- och i-märkena som inte säger något om innehållet. Kanske det är strong, em eller blockquote du ska använda istället?

  • Använd en godkänd doctype och validera din kod. Om webbläsaren ges rätt förutsättningar är chansen större att den visar din sida korrekt i alla olika webbläsare. Du upptäcker felaktigheter i koden och lär dig lättare att skriva bättre kod.

  • Se till att din sida är läsbar i alla stora webbläsare. Det gör inget att utseendet inte är exakt likadan i alla webbläsare, men informationen på sidan måste kunna gå att läsas och navigationen ska alltid fungera oavsett vilken som besöker sidan.

  • Välbekant utseende och funktionalitet är inte bara av ondo. Menyspalt i vänsterkant och underlinjerade länkar må vara tråkigt, men igenkänning kan vara viktigt om informationen på sidan är viktig.

  • Använd sidtiteln i HTML och använd den rätt. Ge varje unik sida en bra titel, använd inte samma över hela hemsidan. Kom ihåg att det är sidtiteln som används som namn på bokmärken/favoriter i webbläsare.

  • Skriv riktig svenska (eller det språket sidan är på) och med korrekt grammatik. Använd inte slanguttryck om det är viktigt att alla ska förstå. Blanda inte två språk på samma sida.

  • Intendera (använd indrag i) koden för ökad läsbarhet. Du vinner på det genom att du lättare ser vilket startmärke som hör ihop med slutmärket, framförallt när du använder tabeller.

  • Funktionalitet och användavänlighet är viktigare i navigation än utseende. och innehållet är viktigare än utseendet. Låt inte utseendet och layouten på sidan spela en så stor roll, eller vara så förvirrande att det inte går att hitta informationen på din hemsida.

  • Se till att det är tillräckligt stor kontrast mellan bakgrund och förgrund (texter). För liten kontrast gör texter svårlästa. Tänk på att andras bildskärmar inte visar färger exakt likadant som din. Ta det säkra före det osäkra.

  • Tänk på vad färgpsykologi innebär. Rött i vår kultur står oftast för varning, grönt för okej. Använd således rött när du vill göra besökaren uppmärksam på något viktigt eller något gått fel.

  • Använd inte enbart symboler/ikoner om det inte står helt klart för alla besökare vad de innebär. Testa dem mot en testgrupp för att vara säker på att ditt budskap går igenom. Kombinera helst med texter, låt de inte ta för stor del av navigeringen, bygg inte upp ett helt menysystem på endast bilder.

  • Tänk på vad olika radlängder, marginaljusteringar och radmellanrum gör för läsbarheten. En för lång radlängd blir svårläst då det är lätt att missa nästa rad då man läser. Vänsterjustering (standard) är mest lättläst, centrering är mest svårläst. Både höger- och vänsterjustering (justify i CSS) ser bra ut i tryckt media, men kan tyvärr vara svårläst i webbläsaren. Radmellanrum kan med fördel ökas med mellan 30-60% med CSS för ökad läsbarhet.


Senast ändrad av Saurid den 2009-08-10 18:10, ändrad totalt 3 gånger
 

_________________
waljefors.se :: waeke.se :: GitHub :: SoundCloud
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
spdy



Medlem i: 5589 dagar
Från: Lund
Status: Offline



#276914
Inlägg Skrivet: 2005-03-17 23:42      Ämne: Citera

  • Navigation är A & O, så gör sidan lättnavigerad. Det är bättre att överdriva (om man nu tycker att man kan det) än att man hela tiden måste leta efter rätt länkar att klicka på. Några exempel:

    • Om du har en logotyp så ska denna vara en länk till startsidan.
    • Är din sida stor och har många sidor & undersidor, då är en trädstrukturerad meny ett ovärderligt verktyg för att uppnå enkel navigation.
    • Beskriv länkar med title-attributet, detta är speciellt viktigt om det är en länk som går till en annan utomstående sida. Man vill veta vart man kommer.
    • Har du mycket information så att man får scrolla för att se allt, tveka inte att använda länkar med name-attribut för att direkt komma längre ner eller längst upp.
    • Markera distinkt länkar besökaren klickat på förut med a:visited i CSS-koden. Hittade man något intressant en tidigare gång man besökte sidan är dessa markerade länkar en förutsättning för att man lätt ska hitta tillbaka. Görs förslagsvis med en mörkare färg än de obesökta länkarna.
    • Markera också tydligt vilket menyval man just för tillfället befinner sig på.



Kommer absolut att uppdatera den här posten allt eftersom. Väldigt bra initiativ Saurid!
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
md2perpe
Ex-Moderator



Medlem i: 5836 dagar
Från: Hallonbergen, Kungsbodarna
Status: Offline



#276928
Inlägg Skrivet: 2005-03-18 00:16      Ämne: Citera

Autarks webbplatskritik innehåller mycket bra information om dålig webbteknik och olika företeelser inom webbteknik.
 

_________________
6 + sqrt(64) = 10
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
paq
Ex-Moderator



Medlem i: 5889 dagar
Från: 59° 19' 6" N, 18° 3' 26" Ö
Status: Offline



#276929
Inlägg Skrivet: 2005-03-18 00:22      Ämne: Citera

  • Less is more. Sträva efter att hålla sidan ren så att fokus ligger på innehållet och inte "det där extra".

  • Kill your darlings. Vem har inte tänkt "Wow, vilken tuff flashig grej, den måste jag ha!". I slutändan handlar det dock inte om vad man själv gillar utan om vad som går hem hos besökaren.

  • Keep it simple, stupid. Se ovan, varför göra det svårt när det kan vara enkelt?

  • Simplicity is beautiful. (Enkelt är vackert) Visst finns det advancerade häftiga flashsidor men ska besökarna återvända ska sidan vara enkel, det blir vackert i längden till skillnad från den där flashsidan man såg och tappade hakan till en gång.


Relevant artikel

Senast ändrad av paq den 2008-09-17 20:34, ändrad totalt 1 gång
 

_________________
Moderator Kolla Hemsidan
http://www.oscarb.se
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
solomon



Medlem i: 5235 dagar
Från: Solen
Status: Offline



#277027
Inlägg Skrivet: 2005-03-18 12:33      Ämne: Citera

Citat:

Tänk på att andras bildskärmar visar färger exakt likadant som din. Ta det säkra före det osäkra.


Det är väl snarare så att dom _inte_ behöver se färgerna precis som du gör på din skärm.

En klassiker på jobbet efter att man har stått och pratat varmt om t.ex. Canons färgåtergivning på digitalkameror och kunden undrar varför hennes bilder ser ut som skit..

Jag vet inte många människor som faktiskt installerar sin skärm med tillhörande färgprofil och sen dessutom kalibrerar den som man skall. Visst fungerar det för det mesta ändå och därför skiter dom flesta i det.

Min slutsats: Det behöver inte alls se likadant ut i färgerna på alla datorer.
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Teddy!



Medlem i: 5220 dagar
Från: Norrtälje
Status: Offline



#277048
Inlägg Skrivet: 2005-03-18 14:31      Ämne: Citera

Jag tror nog just det där citat var ett misstag och själv skickade jag ett PM om det och lite annat.

Bra lista/listor i övrigt, ska bidra om jag kommer på något som inte redan är med Smile
 

_________________
Teddy! rekommenderar: 456 Berea Street & SitePoint.com
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Wedge
Administratör



Medlem i: 6019 dagar
Från: Järfälla
Status: Offline



#277058
Inlägg Skrivet: 2005-03-18 15:28      Ämne: Citera

Med risk för att glida utanför spelplanen för tråden, men en teknisk sak som definitivt påverkar design och upplevelse är mallar/templates.
Använd sådana, även om det känns som overkill. Det räcker kanske med att ha en eller ett par filer man gör include på, det jag anser är viktigt är att man placerar sajtens huvudsakliga design och gemensamma delar i en enkelt återanvändbar struktur. Menyer, logo, sidfot etc som ska synas på alla sidor ska inte behöva redigeras på alla sidor, det gör man en gång.
 

_________________
I am Groot
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
Saurid
Moderator



Medlem i: 5362 dagar
Från: Karlshamn
Status: Offline



#277137
Inlägg Skrivet: 2005-03-18 19:53      Ämne: Citera

solomon skrev:
Citat:

Tänk på att andras bildskärmar visar färger exakt likadant som din. Ta det säkra före det osäkra.

Det är väl snarare så att dom _inte_ behöver se färgerna precis som du gör på din skärm.

Självklart är det så, det var ett skrivfel av mig och det är ändrat. Tack för att du och Teddy uppmärksammade det!
 

_________________
waljefors.se :: waeke.se :: GitHub :: SoundCloud
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Robert Smith



Medlem i: 5090 dagar

Status: Offline



#277239
Inlägg Skrivet: 2005-03-19 10:37      Ämne: Citera

Suverän lista!!!

Jag håller på med att göra en sida för min DVD samling. Använder idag en egen utv. VB appl. Men det finns många fördelar med att göra en hemsida.

Hoppas det är ok att "låna" CSS m.m. från denna sida. php Portalen är enl. mig ett exempel på "ren" och "snygg" design dvs simplicity (giller inte popup, rörliga bilder, störande reklam m.m.). Bland internetbutiker anser jag att Discshop är överlägsen och den har en liknande sturktur/layout som denna sida.

Jag har några frågor ang. struktur. Kanske har frågorna kommit fel men...

Jag är nybörjare på detta men vill gärna komma rätt från början när det gäller struktur och standard. Jag vill också kunna validera sidan på http://validator.w3.org/

Se gärna sidan som är under uppbyggnad:
http://cinemaattic.no-ip.info/index.php
p.s Logan är gräsligt ful men jag lovar den är tillfällig... d.s

1. Generell struktur

Min Default.htm innehåller enbart en redirect till Index.php

PHP:
1:
 <html>
2:
<head>
3:
<meta http-equiv="Refresh" content="0;url=index.php"
4:
</head>
5:
</html


Jag har två gemensamma "delar"
Left Menu and Top
Bottom

Samtliga sidor ser ut enl. följande:
PHP:
1:
<?php
2:
require('LeftAndTop.php');
3:
?>
4:
 
5:
//HTML och PHP kod
6:
 
7:
<?php
8:
require('Bottom.php');
9:
?>


Nackdelen med detta sätt är att t.ex. Title blir samma på samtliga sidor (mindre betydelse i mitt fall). Det vore intressant att höra av Er proffs hur ni anser att en enkel struktur ska se ut.

2 Doctype
Hur ska en godkänd Doctype skrivas? Räcker det med:

Jag använder EditPlus den lägger till följande Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Jag har även följande meta
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida MSN Messenger ICQ-nummer
Saurid
Moderator



Medlem i: 5362 dagar
Från: Karlshamn
Status: Offline



#277252
Inlägg Skrivet: 2005-03-19 11:41      Ämne: Citera

Robert Smith:
Det du pratar om nu är ju egentligen enkla templates som wedge tipsade om. Jag tycker att du ligger helt rätt till. Kanske du skulle dela upp även left och top, men det är kanske inte nödvändigt i ditt fall.

Det finns en mycket enkelt sätt att få sidtiteln att stämma trots att du använder includes. Sätt en variabel innan du inkluderar sidhuvudet, och använd den variabeln i den inkluderade filen. Då kommer du att uppnå både den lättarbetade strukturen och du uppfyller bättre kraven på en väldefinerad sida. Tex. att alltid använda en relevant sidtitel. Och det är ett mycket bra sätt att ta sig ur frames-träsket för de som är fast i det.

index.php:
PHP:
1:
<?php
2:
$title 'Sidtitel';
3:
require_once('LeftAndTop.php');
4:
...



LeftAndTop.php:

PHP:
1:
<?php
2:
echo <<< HERE
3:
 
4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
5:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6:
<html>
7:
<head>
8:
<title>Cinema attic :: {$title}</title>
9:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
10:
</head>
11:
<body>
12:
 
13:
HERE;
14:
?>


Vilken Doctype du använder kanske är av mindre betydelse så länge du tänker följa reglerna för den. Både HTML4 och XHTML1.0 är lika rätt att använda. Men XHTML ställer lite större krav på dig, speciellt om du använder Strict. Du kan läsa lite mer om doctypes här:
http://www.alistapart.com/articles/doctype/
 

_________________
waljefors.se :: waeke.se :: GitHub :: SoundCloud
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Robert Smith



Medlem i: 5090 dagar

Status: Offline



#277259
Inlägg Skrivet: 2005-03-19 12:14      Ämne: Citera

Tack Saurid,

Templets var ordet!! jag ska genast fixa ändringarna enl. ditt tips.

Sidorna har paserat http://validator.w3.org och med lite små justeringar så gick det bra.

"This Page Is Valid HTML 4.0 Transitional!"

så det är man på rätt spår i alle fall Smile

Det är alltid tryggt men en bra start. Struktur/design/standard är på plats. Nu kan man gå vidare och fylla på med information.

Även om jag som sagt är nybörjare så lär man sig väldigt mycket på att följa "regler" även när man bara gör en hemsida för mer [JAG ÄR ORDBLIND OCH TAPPAR DE FLESTA BOKSTÄVERNA NÄR JAG SKRIVER] mindre privat bruk. Kunskapen från detta har jag nytta av i jobbet (det går lättare att förstå o prata med Er proffs i tjänsten om man har lite susning om vad det handlar om)
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida MSN Messenger ICQ-nummer
yrvaken2



Medlem i: 5846 dagar

Status: Offline



#277261
Inlägg Skrivet: 2005-03-19 12:27      Ämne: Citera

En kommentar angående <title>:
För att en sida ska hamna högre ibland sökmotorerana ska väl en title innehålla typ 5-10 ord med dom viktigaste sökorden?
Sedan är ju då frågan om man vill ha en lättnavigerad sida eller en sida som är lätt att navigera till?
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Robert Smith



Medlem i: 5090 dagar

Status: Offline



#277264
Inlägg Skrivet: 2005-03-19 12:45      Ämne: Citera

x

Senast ändrad av Robert Smith den 2005-03-19 13:26, ändrad totalt 1 gång
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida MSN Messenger ICQ-nummer
Saurid
Moderator



Medlem i: 5362 dagar
Från: Karlshamn
Status: Offline



#277268
Inlägg Skrivet: 2005-03-19 13:06      Ämne: Citera

Robert Smith: Nu hamnade vi mycket off-topic i denna tråden, vilket jag gärna undviker. Frågan lämpar sig nog bättre i en annan del av forumet.

yrvaken2 skrev:
En kommentar angående <title>:
För att en sida ska hamna högre ibland sökmotorerana ska väl en title innehålla typ 5-10 ord med dom viktigaste sökorden?
Sedan är ju då frågan om man vill ha en lättnavigerad sida eller en sida som är lätt att navigera till?

En titel ska vara som det låter, en titel på sidan. Den kan vara en mening lång, men ska inte innehålla en lista med lösryckta ord. Det är meta-märket som ska användas för det syftet. Tyvärr har tidigare webmakare missbrukat meta-taggarna för att hamna högre upp på sökmotorerna, vilket gjort att sökmotorerna fått ändra på sina sökmetoder. Title ska beskriva vilken sida du är på, och var för någonstans du är på sidan.

Men nu pratar vi inte om sökmotorer, utan sund struktur på sidor (vilket bör leda till en lättnavigerad sida). Det är fortfarande så att en orginell sida med intressant innehåll och bra struktur är den sidan som är lättast att navigera till. Det ger återbesök och sprider ordet om sidan.
 

_________________
waljefors.se :: waeke.se :: GitHub :: SoundCloud
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Saurid
Moderator



Medlem i: 5362 dagar
Från: Karlshamn
Status: Offline



#282645
Inlägg Skrivet: 2005-04-09 20:26      Ämne: Citera

En komplettering till en av mina tidigare punkter om språket:

  • Använd skiljetecken (punkter, komman, frågetecken, utropstecken). Texter blir mycket svårlästa utan dem, och missuppfattningar är nästan ofrånkommliga. Skriv inte för långa meningar utan pauser.

  • Glöm inte rubriker i texter. De blir naturliga pauser i läsningen och läsaren för tid att låta tidigare text sjunka in. Det gör det lättare att hitta tillbaka till information för återbesökare. Skriv dem så att de kortfattat återger vad som väntas i kommande stycken. Gör inte överskrifterna för korta.

  • Skriv det viktigaste först i ett textstycke, använd ingresser. Det är inte fel att skriva en slutsats först och sedan förklara hur du kom fram till den. Det får snabbt läsaren att förstå vad resten av texten kommer att handla om och väcker intresset. Men avslöja inte allt.

    Lite snabbinfo om rubriker och ingresser:
    http://webnews.textalk.com/se/article.phtml?id=13610

  • Om inte sidan har en mycket riktad målgrupp, skriv så att människor förstår. Förvänta er inte att andra ska besitta samma kunskaper som ni. Använd ett enkelt språk och var överdrivet tydlig om det behövs. Man vill inte bli missuppfattad om man inte kan försvara sig.


Tips!
En mycket trevlig bok om ämnet "Att skriva för webben" är denna:
http://kornet.nu/kompendium_korn.shtml



Och ytterligare en sak:

  • Fotografin och illustrationer på sidan bör ha någon koppling till innehållet på sidan. Bilderna ska framhäva och komplettera det som texten säger, underlätta läsaren att förstå, eller presentera något. En bild som inte är hämtat ur rätt sammanhang förvirrar bara besökarna. Undantaget är givetvis rena gallerier där själva bilderna ÄR syftet.
 

_________________
waljefors.se :: waeke.se :: GitHub :: SoundCloud
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Visa tidigare inlägg:   
Skapa nytt inlägg   Svara på inlägget Gå till sida 1, 2  Nästa
PHPportalen Forum Index » Diskutera webbutveckling
Hoppa till:  
Du kan inte skapa nya inlägg i det här forumet
Du kan inte svara på inlägg i det här forumet
Du kan inte ändra dina inlägg i det här forumet
Du kan inte ta bort dina inlägg i det här forumet
Du kan inte rösta i det här forumet
Du kan inte bifoga filer i detta forum
Du kan inte ladda ner filer från detta forum
Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic