Permalänk

Designs hemsida, Storlek?

Då jag sökt och alla säger olika vilken storlek man ska ha när man börjar med att designa en hemsida i Photoshop så skriver jag här..

Vilken storlek ska jag använda mig utav när jag gör sidan i photoshop?

1920x1080??

Skickades från m.sweclockers.com

Visa signatur

Chassi: Cooler Master HAF 912 Plus Svart Processor: i5 3570K (Ivy Bridge) RAM: 8 GB Grafikkort: GeForce GTX 670, Kepler PSU: 550W Hårddisk: 120GB SSD + 2TB HDD Ned/Uppkoppling: 100/50 Skärm: Acer LED 27'' Headset samt Tangentbord: Razer Megalodon och Razer Lycosa

Permalänk
Medlem

800 pixlar i bredd om du vill att den ska fungera på telefoner och tablets.
1200 för vanliga skärmar.
För jag har aldrig sen 1024x768 tiden sett folk som faktiskt surfar i fullskärm
Och en sidoscrollbar är ungefär det värsta etikettsbrottet som finns vad gäller webdesign, strax efter popups.

Permalänk
99:e percentilen

Om du har möjlighet är det oftast bättre att göra sidan i ren HTML och sedan styla den med CSS, dvs skriva koden själv utan någon form av WYSIWYG.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Inaktiv
Skrivet av Svensktiger:

Och en sidoscrollbar är ungefär det värsta etekettsbrottet som finns vad gäller webdesign, strax efter popups.

Det är mycket värre än popups.

Permalänk
Medlem

Undvik frames då sidor med frames blir oanvändbara i smartphones. Gör text/innehålls spalten 800 pixlar bred. Med sidomenyer och annat kan du gå upp till 1366 pixlar. Bakgrundsbilder designar du så att du fungerar i alla upplösningar dvs upp till 2560 i bredd för säkerhets skull.

Visa signatur

Stationär: I5 2500K, Noctua NH9, Gigabyte Z77MD3H, Corsair Vengeance 1600 mhz 8 GB, Sapphire Radeon HD 7870, Crucial M4 256 GB, Seagate Barracuda 250 GB, WD My Book usb 3 2TB, Samsung DVDRW, Fractal Design Define Mini, Corsair TX 650 W, Fläktar: Fractal Design 1300 RPM 2st, Scythe Gentle Typhoon 1150 RPM 2 st.
Laptop: Asus Zenbook UX31

Permalänk
Medlem

Det beror helt på.

Är hemsidan för datorer, mobiler eller tablets?
Om du är ute efter en hemsida som är kompatibel med alla upplösningar måste du antingen använda dig utav procent, det vill säga att hemsidans bredd/höjd/alla element har en x procent bredd/höjd. Om du är ute efter en hemsida som är mer static men ändå stödjer olika upplösningar ska du kolla på något som heter media queries (http://webdesignerwall.com/tutorials/css3-media-queries) vilket betyder att vid x min width eller x min height ändras css:en så att olika element ändrar bredd/höjd efter egna önskemål.

I ditt fall, om du bara ska göra en hemsida för "endast?" datorer generellt så öppna upp ett dokument i 1920 x 1080 pixlar och gör en hemsida inom med en bredd på runt 960 pixlar.

Det jag beskriver ovanför texten är att det krävs mycket mer än bara ett dokument/bredd/höjd för att göra en hemsida om du vill att den ska stödja fler enheter. (det kräver en hel del CSS)

Mvh
Fredrik

Visa signatur

Prylhögen: Nexus 7, iPhone 5, MBPr 2013

Permalänk

Tack ska ni ha allihopa men jag gör alltså ett dokument i 1920x1080p sedan innehålls-boxen ska vara 960p..

Visa signatur

Chassi: Cooler Master HAF 912 Plus Svart Processor: i5 3570K (Ivy Bridge) RAM: 8 GB Grafikkort: GeForce GTX 670, Kepler PSU: 550W Hårddisk: 120GB SSD + 2TB HDD Ned/Uppkoppling: 100/50 Skärm: Acer LED 27'' Headset samt Tangentbord: Razer Megalodon och Razer Lycosa

Permalänk
Medlem

Man brukar sitta och design i mellan 1100-1400px bredd, sedan "innehållet" på 960-1000px brett.

Visa signatur

Hänger på Sweclockers när jag blir köpsugen.

Permalänk
Medlem
Skrivet av FreppyCTRL:

Tack ska ni ha allihopa men jag gör alltså ett dokument i 1920x1080p sedan innehålls-boxen ska vara 960p..

960p betyder ju att höjden är 960 pixlar, du menar 960 pixlar i bredd?

Visa signatur

Prylhögen: Nexus 7, iPhone 5, MBPr 2013

Permalänk
Skrivet av QRS5:

960p betyder ju att höjden är 960 pixlar, du menar 960 pixlar i bredd?

Japp! Men har fått det att funka nu!

Visa signatur

Chassi: Cooler Master HAF 912 Plus Svart Processor: i5 3570K (Ivy Bridge) RAM: 8 GB Grafikkort: GeForce GTX 670, Kepler PSU: 550W Hårddisk: 120GB SSD + 2TB HDD Ned/Uppkoppling: 100/50 Skärm: Acer LED 27'' Headset samt Tangentbord: Razer Megalodon och Razer Lycosa

Permalänk
Medlem

Väl i Photoshop brukar jag ta 2000px, sen blir det aldrig så stora sidor såklart men det är en helt annan sak.
Jag kan ge dig ett tips och det är att ha något för dem med större skärmar, där inkluderar även 1920 som syns vid sidan av sidan eller tex en bar som går längst upp som går i all oändlighet (repeat), just det är sjukt smidigt också då det krävs 1px bred bild för att skapa en bar som blir oändligt lång. Mycket grafik för storleken på filen med andra ord! Om du använder en bakgrund som täcker allt så är det väl bäst att den också isf blir strechad för dem som har större skärmar eller att den fadear av efter låt oss säga 2000 pixlar till genomskinlig så kommer även dem med större skärmar va nöjda (även om det bara är ett fåtal besökare som kommer ha det, men sen om några år kanske många fler sitter på större skärmar!)

Läste nu vad andra har svarat och vissa har sagt samma sak med bakgrundsbilden, så det får bli en upprepning och kanske ett övertalande ifall du inte hade tänkt göra så ifrån början.

Permalänk
Medlem

http://gs.statcounter.com/#resolution-ww-monthly-201106-20120...

Max 1024px på bredden för själva innehållet.
Helst <1000px så att de med 1024px får lite bakgrund på sidorna.

Själv brukar jag använda http://960.gs/ mall, hjälper till att hålla en bra struktur + blir enklare att koda efteråt.

Skrivet av Zuggmate:

Om du har möjlighet är det oftast bättre att göra sidan i ren HTML och sedan styla den med CSS, dvs skriva koden själv utan någon form av WYSIWYG.

...

Photoshop är ingen WYSIWYG.
Och vadå ren HTML och styla med CSS?
Vad annars?

Visa signatur

Programmerare -> PHP | HTML | CSS | JS | Java.

Permalänk
Medlem
Skrivet av Sony?:

Häst <1000px så att de med 1024px får lite bakgrund på sidorna.
Vad annars?

Häst?

Permalänk
99:e percentilen
Skrivet av Sony?:

Photoshop är ingen WYSIWYG.
Och vadå ren HTML och styla med CSS?
Vad annars?

Jag anser att det är "en form av WYSIWYG", då man får vad man ser.

Med att göra sidan i ren HTML och styla den med CSS menar jag att man ska skriva HTML-koden först och sedan skriva CSS-kod utan att ta hjälp av någonting i stil med Photoshop.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk

Men brukar man inte använda photoshop för att göra designen på hemsidan? Hur ska man annars göra en sån här sida typ? http://www.ps3opticgaming.net/index.html Enkel och stilren..

Visa signatur

Chassi: Cooler Master HAF 912 Plus Svart Processor: i5 3570K (Ivy Bridge) RAM: 8 GB Grafikkort: GeForce GTX 670, Kepler PSU: 550W Hårddisk: 120GB SSD + 2TB HDD Ned/Uppkoppling: 100/50 Skärm: Acer LED 27'' Headset samt Tangentbord: Razer Megalodon och Razer Lycosa

Permalänk
Medlem
Skrivet av FreppyCTRL:

Men brukar man inte använda photoshop för att göra designen på hemsidan? Hur ska man annars göra en sån här sida typ? http://www.ps3opticgaming.net/index.html Enkel och stilren..

HTML5+CSS 3

Visa signatur

Kom ihåg att ALLTID citera mig om du vill ha svar!

|CPU: Intel Core i7 4790K Kyld av: Corsair H80 GPU: ASUS GTX 970 4GB Chassi: Phanteks Enthoo Evolv MOBO: MSI Z97M Gaming Nätagg: XFX 750W Silver SSD: Kingston 120GB SSDNow V300 HDD: Samsung Spinpoint F3 1TB 7200RPM + 1TB|

Permalänk
Medlem

Den som börjar med att koda utan att veta vad man ska göra har nog ramlat med huvudet före i trappen.

Självklart tas en skiss eller layout fram först, sen om det görs på baksidan av kalsongerna eller i photoshop är ju orelevant, förutom att den i photoshop går snabbare att lägga kod på, än att i efterhand göra grafik för ett specifikt område.

Bara för att man ritar t.ex. en ram i photoshop så innebär ju inte det att man gör ramen i form av bilder väl i koden, utan i CSS.
Öppnar man Pico eller Notepad++ och börjar hamra html så tar det en jäkla tid att visuellt tänka sig vad man håller på med, än mindre försöka se en helhet innan koden väl är skriven och de olika elementen på sidan ska få sin form i CSS.

Visa signatur

Mitt modermodem är trimmat!

Permalänk
Skrivet av HCP:

Den som börjar med att koda utan att veta vad man ska göra har nog ramlat med huvudet före i trappen.

Självklart tas en skiss eller layout fram först, sen om det görs på baksidan av kalsongerna eller i photoshop är ju orelevant, förutom att den i photoshop går snabbare att lägga kod på, än att i efterhand göra grafik för ett specifikt område.

Bara för att man ritar t.ex. en ram i photoshop så innebär ju inte det att man gör ramen i form av bilder väl i koden, utan i CSS.
Öppnar man Pico eller Notepad++ och börjar hamra html så tar det en jäkla tid att visuellt tänka sig vad man håller på med, än mindre försöka se en helhet innan koden väl är skriven och de olika elementen på sidan ska få sin form i CSS.

Bra svar Tack

Visa signatur

Chassi: Cooler Master HAF 912 Plus Svart Processor: i5 3570K (Ivy Bridge) RAM: 8 GB Grafikkort: GeForce GTX 670, Kepler PSU: 550W Hårddisk: 120GB SSD + 2TB HDD Ned/Uppkoppling: 100/50 Skärm: Acer LED 27'' Headset samt Tangentbord: Razer Megalodon och Razer Lycosa

Permalänk
Medlem
Skrivet av Zuggmate:

Jag anser att det är "en form av WYSIWYG", då man får vad man ser.

Med att göra sidan i ren HTML och styla den med CSS menar jag att man ska skriva HTML-koden först och sedan skriva CSS-kod utan att ta hjälp av någonting i stil med Photoshop.

WYSIWYG är enligt mig ett program där man drar och släpper element och så skriver programmet koden åt dig.
Photoshop skriver ingen kod åt dig. Du designar en bild som visar hur hemsidan ska se ut så att programmeraren sedan kan göra exakt som
designer har tänkt sig.

Och visst, gör man designen + koden själv kan det räcka att rita upp hemsidan i sitt huvud. Men resultaten blir bättre om man först gör sidan i ett program och hela tiden kan se samma mål framför sig.

Nästan alla hemsidor (alla?) designas först

Skrivet av FreppyCTRL:

Men brukar man inte använda photoshop för att göra designen på hemsidan? Hur ska man annars göra en sån här sida typ? http://www.ps3opticgaming.net/index.html Enkel och stilren..

Ja, man ritar alltid upp designen först. Om man inte gör det i ett program så gör man det i huvudet. Man har alltid en bild av hur slutresultatet ska bli.
Annars har du ju ingen aning om vad för HTML kod och CSS kod du ska skriva.

Visa signatur

Programmerare -> PHP | HTML | CSS | JS | Java.

Permalänk
99:e percentilen
Skrivet av Sony?:

Nästan alla hemsidor (alla?) designas först

Ja, man ritar alltid upp designen först. Om man inte gör det i ett program så gör man det i huvudet. Man har alltid en bild av hur slutresultatet ska bli.
Annars har du ju ingen aning om vad för HTML kod och CSS kod du ska skriva.

I Webbdesign A låg det väldigt mycket fokus på att man ska skriva endast HTML-koden först och sedan styla den med CSS. Man ska alltså först skapa sina rubriker, menyer och textstycken med endast deras semantiska betydelse i åtanke, för att sedan styla dem med CSS och lägga till eventuella divar där det behövs. Allt för att sidan ska vara så semantiskt uppbyggd som möjligt, bl.a. för att underlätta för synskadade personer och i SEO-syfte.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

För egen del ritat jag upp allt i illustrator så jag har en klar bild av vad jag vill producera. Först därefter bygger jag upp sidorna. CSS läggs till sist.

Visa signatur

Stationär: I5 2500K, Noctua NH9, Gigabyte Z77MD3H, Corsair Vengeance 1600 mhz 8 GB, Sapphire Radeon HD 7870, Crucial M4 256 GB, Seagate Barracuda 250 GB, WD My Book usb 3 2TB, Samsung DVDRW, Fractal Design Define Mini, Corsair TX 650 W, Fläktar: Fractal Design 1300 RPM 2st, Scythe Gentle Typhoon 1150 RPM 2 st.
Laptop: Asus Zenbook UX31

Permalänk
Medlem
Skrivet av Zuggmate:

I Webbdesign A låg det väldigt mycket fokus på att man ska skriva endast HTML-koden först och sedan styla den med CSS. Man ska alltså först skapa sina rubriker, menyer och textstycken med endast deras semantiska betydelse i åtanke, för att sedan styla dem med CSS och lägga till eventuella divar där det behövs. Allt för att sidan ska vara så semantiskt uppbyggd som möjligt, bl.a. för att underlätta för synskadade personer och i SEO-syfte.

Exakt. Du har en bild i ditt huvud som du börjar strukturera med HTML först och sedan lägger till utseendet med CSS.
Men tyvärr kan man inte skicka tankar till andra, så när en eller flera designar och andra kodar så behöver man få ner designen på bild.

...vänta ett tag, lärde ni inte er att cutta ner en design (bild) och sedan koda upp den?
När ska ni lära är det? Det behöver man ju kunna för att arbeta flera.

Visa signatur

Programmerare -> PHP | HTML | CSS | JS | Java.

Permalänk
99:e percentilen
Skrivet av Sony?:

...vänta ett tag, lärde ni inte er att cutta ner en design (bild) och sedan koda upp den?
När ska ni lära är det? Det behöver man ju kunna för att arbeta flera.

Jo, men bara en enkel HTML-sida utan CSS för att vi skulle lära oss head, body, h1, h2, p, a och img (vilket jag dock redan kunde då jag har hållit på med webbdesign i några år).

Visa signatur

Skrivet med hjälp av Better SweClockers