What is the future perspectives for the HTML and CSS standards? At the Future of the Web conference Den Odell started with a definition for responsive web design, somewhat like this:
… the website appears to have been built for that particular device.
Odell talked about what is going to happen with HTML and CSS soon, in the future and the end goal of RWD.
Soon
The new specifications for HTML5.1 and CSS level 4 is in the near future. A great improvement is the pictures tag. Here a new attribute is srcset that will work in the img and picture tags.
<picture
srcset="tiny.jpg 1x, larger.jpg 2x"
src="myPicture.jpg"
alt="Here is my picture" />
In the CSS you will be able to use the images according to media queries. And so you can have responsive images in a more elegant way.
But Odell states, that this is in the near future. By now some 52% of the web browsers support using pictures and images like that.
The future
Here Odell presented ideas for media queries, for instance a webpage might look different from country to country or even from continent to continent. The CSS might look somewhat like this:
@media {
continent: europe;
}
Perhaps the user acitity could be monitored. What if you’re jogging while on the webpage?
@media {
activity: jog;
}
Connection speed is also an important factor, so perhaps you could address the problem thus:
@media {
connection-speed: slow;
}
The end goal
For Odell the end goal is this: the browsers must disappear. So in conclusion Odell asumes, that the GUI will:
… apear to have been built for the user.
From the helicopter perspective Odell’s vision is a movement from a focus on devices to focus on the user.
So you have installed _S. And from here the rest is styling. Styling WordPress can be a daunting task. Especially if you don’t know the relevant ids and classes etc. But there is hope. Have a look here:
PĂ„ nettet kan man – som sĂ„ mange andre steder – sondre mellem grafiske elementer og illustrationer til brug for layout. Grafiske elementer kan vĂŠre smĂ„ billeder, der bruges som baggrunde, streger, knapper eller andre virkemidler. Illustrationer kan vĂŠre fotos, tegninger, grafer og lignende.
Som regel er et lay-out pĂ„ nettet en komposition, hvor streger, kasser, farvekontraster, grafiske elementer mv. skal styre blikket sĂ„ledes at indholdet prĂŠsenteres pĂ„ en overskuelig mĂ„de. Der skal vĂŠre en tydelig angivelse af, hvad der er menuer og knapper – sĂ„ledes at navigationen kan foregĂ„ relativt intuitivt.
NĂ„r du skal lave et nyt weblayout er det lettest at begynde med en hĂ„ndtegnet skitse, der i store trĂŠk viser, hvordan din webside skal se ud. Skitsen kan vĂŠre en wireframe – eller en mockup. Nogle multimediedesignere tegner simpelt hen deres layout i et grafisk program, som GIMP, Inkscape, Photoshop eller Illustrator – alt efter smag og behag.
Baggrunde En vellykket webside mĂ„ ikke vĂŠre for “tung”. Ikke alle har en god webforbindelse, og derfor er det designerens opgave at tĂŠnke sig grundigt om, nĂ„r skitserne skal omsĂŠttes til billeder. Hvert billede tĂŠller, og hvert eneste billede skal optimeres til det medie, som du skal bruge.
Det gĂŠlder om at holde grafikken pĂ„ et minimum. Ikke sĂ„dan at forstĂ„, at du ikke skal bruge grafik – eller forfalde til klicheen om minimalisme. TvĂŠrt imod! Du skal bare tĂŠnke dig om.
OplÞsning Der er ingen grund til at vise billeder i en hÞjere oplÞsning end skÊrmen kan magte. Lige nu er en passende billedoplÞsning til skÊrmen 72dpi. Billeder med en hÞjere oplÞsning bliver ikke bedre pÄ skÊrmen, de fylder bare mere.Hvis du har taget fotos med et digitalkamera, sÄ er det en god ide at tjekke oplÞsningen i Photoshop eller GIMP. SÊt den til 72dpi.
Hvis denne indstilling gĂžr billedet lidt slĂžret, sĂ„ prĂžv med et “sharpen” filter. Hvis dine billeder skal bruges i en tryksag, sĂ„ skal oplĂžsningen naturligvis vĂŠre meget bedre. Som regel er 300dpi passende til tryksager.
Xhtml og CSS
Store ensartede flader farvesĂŠttes lettest ved hjĂŠlp af CSS. Browserens baggrundsfarve kan sĂŠttes i “body”:
body {
background-image:url('../images/bg_footer2.jpg');
background-color:#ba5b22; //#ffb93e;
font-family: Sans-serif;
background-repeat:repeat-x;
background-position:top;
}
I denne body er en lang rÊkke grafiske valg defineret. FÞrste linje definerer et baggrundsbillede. LÊngere nede kan man se, at baggrunden gentages pÄ x-aksen, eller vandret om du vil. Background-position: top betyder, at baggrundsgrafikken er placeret Þverst i billedet. Det kan vÊre praktisk, hvis man Þnsker en effekt med en farveovergang.
Billedet herover ser ikke ud af meget; men hvis det anvendes som en baggrund, der gentages pÄ x-aksen, sÄ kan resultatet blive noget i stil med dette:
Baggrundsgrafik gentages pÄ x-aksen.
Den hvide tekst og logoet er et gennemsigtigt billede, der er lagt ind i en selvstÊndig div-fil. Man kan altsÄ anvende en baggrund og kigge ned gennem flere lag af billeder med transparens.
Hvis koden er skrevet fornuftigt, sÄ behÞver man ikke at lave kÊmpestore grafiske filer som baggrund. Som multimediedesigner skal du kunne vurdere, hvilke elementer, der vinder ved gentagelse.
PĂ„ nettet er det lettest at lĂŠse en sans-serif skrift. Derfor er font-family “sans-serif”.
En grafisk baggrund sĂŠttes som regel ind i div-tags i din html via CSS; men man kan ogsĂ„ definere en grafisk baggrund til body-taggen. Dygtige kan sammensĂŠtte grafiske flader ved hjĂŠlp af smĂ„ grafiske elementer, der nĂŠrmest ligner brikkerne til et puslespil; men nĂ„r elementerne samles via Xhtml og CSS – sĂ„ lever hele den grafiske flade.
Ved hjÊlp af CSS kan du ogsÄ sÊtte baggrund pÄ en div-tag. I dette tilfÊlde er #Info et selvstÊndigt afsnit i koden, og .dekoration er en klasse (class). Xhtml koden kan se sÄdan ud:
Forskellen pÄ id og class er at class kan bruges pÄ mange forskellige elementer; mens id henviser til en navngivet tag.
Koden skal bare virke Som multimediedesigner skal du forene en lang rĂŠkke teknikker. PĂ„ nettet kan du ikke helt vide om din modtager har en god netforbindelse eller ej. Derfor skal grafikken optimeres. En fornuftig grafik krĂŠver planlĂŠgning – og indsigt i mere end Photoshop og GIMP. Hvis en farveflade kan sĂŠttes med en hexkode, sĂ„ er der ingen grund til at lave en stor baggrundsfil.
Paletten NÄr de grafiske flader skal farvesÊttes, sÄ kan det vÊre en fordel at anvende en palette. Hvis alle farver anvendes ukritisk, sÄ vil den grafiske flade fremstÄ rodet og kikset. Derfor prÞver designere at bruge farvepaletter.
Eller andre, der har tÊnkt over farvernes betydning. Der findes en rÊkke programmer, der kan bruges til udvikling af paletten. NÄr jeg arbejder med layout pÄ linux, sÄ bruger jeg som regel Agave. Programmet findes i Ubuntus repositories, og installeres enten via Synaptic eller i en terminal: # sudo apt-get install agave -y
Der findes lignende programmer til Mac og Windows.
Agave – kan lave paletter. Her vises en triade med hexkoder – hvilket er praktisk nĂ„r der skal designes.
PÄ nettet findes ogsÄ en rÊkke nyttige sites til farvesÊtning. Kuler anbefales varmt.
Metode Nu har jeg vist lidt om de elementer, der skal til for at skabe en god webside; men hvordan angribes opgaven sÄ. Til mindre opgaver vil jeg anbefale denne metode:
Lav en rĂŠkke grove skitser.
Tegn designet i Photoshop eller GIMP eller et andet program.
VĂŠlg en farvepalette, der passer til opgaven. (Tandpastafarver til tandlĂŠger og bankfarver til banker, etc.)
Print designet ud – og beslut, hvad der skal laves via grafik, og hvad man kan lave ved hjĂŠlp af html, css og farvekoder.
