..


Sponsrade länkar

Den grundläggande layouten av en webbplats optimerad för smartphones

Om Web vi är vana att skämma bort oss med oändlig kombination av layout och utrymme, designa webbsidor för smarta telefoner vi ser över vår kreativa ambitioner, eller åtminstone ändra storlek på den begränsade storleken på skärmar som är avsedda för visning av vårt arbete.

Obs: videoupplösning varierar naturligtvis beroende på modell, har de flesta av nästa generations smartphone en display med en bredd som sträcker sig från minst 240 till maximalt 480 pixlar. Den vanligaste upplösningen kan räkna, i stående läge, en bredd på 320 pixlar.

Glöm layout sedan två, tre eller fyra spalter! Från min synvinkel är den enda möjliga lösningen för att säkerställa god användbarhet till innehåll, är den enda kolumnen konstruktion, där allt innehåll är organiserad längs en ​​vertikal ordning kaskad (dvs under varandra). När du skapar en webbsida, alltid komma ihåg, är det viktigaste för att säkerställa god användbarhet, och mer så när skärmen är begränsad till en smartphone, är enkelheten alltid den bästa vägen framåt.

Som du ser är vår struktur mycket enkel och består initialt av tre delar:

  • Sidhuvud: är den övre delen av sidan och är utformad för att rymma webbplatsens logotyp och möjligen några andra delar av första våningen;
  • Sidan kropp: det är utformad för att rymma den centrala delen av det faktiska innehållet i de sidor på vår hemsida;
  • Sidfot: Detta är den sista delen, längst ner, där det är vanligt att sätta några krediter, juridiska referenser, copyright, kontakter, osv.

Navigeringsmenyn

Den centrala delen av sidan, i sin tur, kommer att användas för att hysa andra områden (som varierar beroende på dina behov).
Ett viktigt inslag, är förstås navigationsmenyn genom vilka tillgång till andra sidor / delar av webbplatsen. Om dessa är få (första lösningen) kan direkt skapa ett verktygsfält med nödvändiga länkar, annars - av utrymmesskäl - det är bättre att lägga en enda knapp som när den klickas, visas en lista över alla sidor / områden tillgängliga (andra lösning).

Innehållet

Också, och framför allt för det innehåll du behöver tänka på den lilla skärmen på din smartphone. Återigen därför enkelhet och linjäritet är, enligt min mening det bästa valet.

Undvik onödiga krusiduller grafik är en bra regel för webbdesign och det är ännu mer i att utveckla webbsidor för mobila enheter och för frågor med anknytning till den begränsade storleken på skärmen och av skäl som rör den tillgängliga bandbredden (samt ha en kostnad, 3G-bandbredden är inte alltid snabbt så det är bäst att fokusera på det väsentliga).

Även för innehållet, därför föreslår en kaskad där de olika layout element (text, bilder, video) i en följer varandra:

I nästa lektion kommer vi att se hur man bygger HTML-koden på vår hemsida börjar naturligtvis med <head> (titel, metataggar och CSS).

Hjälp att utveckla webbplatser för mobila enheter
E-Learning
AutoCAD (eBook) AutoCAD (eBook)
Skapande av arkitektoniska strukturer. På endast 29 €.
E-handel med ASP (ebook) E-handel med ASP (ebook)
E-handel och kundvagn med ASP. Endast 35 €.
HTML (kurs) HTML (kurs)
Det märkspråk för webben från 29 €.
Sponsrade länkar