Náhled webu pro klienta
Úvaha a praktické tipy, jak posílat náhledy webů klientovi.
David uveřejnil na svém blogu článek Jak posílat klientům náhledy webů – jestliže jste ho ještě nečetli, tak si ho běžte přečíst a potom se vraťte sem :-).
Davidovo řešení je jednoduché a pro většinu projektů dostačující. Tedy v případě, že máte bílé pozadí webu a zároveň se vám na něm nic neopakuje přes celou šířku prohlížeče. V opačném případě budete potřebovat daný soubor editovat, abyste předešli klientovým dotazům typu: „A tady to bude useklý?“… popř. přidat alespoň dvě další proměnné a trochu si s náhledem pohrát.
K náhledům webů mám ještě tři další poznámky:
Když exportujete návrh webu, vytvořte si PNGčko. JPG zkreslí výsledný dojem kompresí a komprimované gradienty či text jsou pěkně hnusná záležitost.
Jestliže nevěříte svému klientovi, že vám návrh neukradne, tak proč s ním vůbec spolupracujete? Ty nejhorší návrhy, které jsem měl tu čest vidět, byly diagonálně překryty © úchvatnýwebdesigner, což sráželo předchozí už tak dost strašný dojem ještě více dolů..
Text je nevyhlazený. A to i v případě, že klient přešel na IE7+. Je to nejjednodušší způsob, jak dát koderovi vědět, že TOTO bude text. Jestliže máte v rozpočtu peníze navíc, tak si klidně udělejte verzi s vyhlazeným (a co si budeme povídat – díky photoshopu zcela JINAK vyhlazeným) písmem pro klienta a nevyhlazeným pro kodera. Po pár drobných úpravách vás to beztak přestane bavit a buď si vychováte kodera, nebo klienta :-)… a ač si kóduju weby sám, písmo nevyhlazuji.
Komentáře
Vzpomněl jsem si jak mi říkal jeden klient, že mám chybu v textu. „Je takový kostrbatý a hranatý, vůbec ne jako na obrázku“. Od té doby – co návrh, to kostičky! Nechci klientům vysvětlovat ClearType :)
Ja to riešim tak, že pripravím jednoduchú CSS šablonu s blokovým elementom uprostred, ktorý má nastavené rozmery a na jeho pozadí je samotný náhľad webu. Plus do pozadia stránky vložím opakujúci sa obrázok pozadia, ak je to pre daný design nutné.
Užitočný článok. Budem naň odkazovať každého grafika po ktorom budem robiť layout…
Tak jsem článek rozšířil ještě o tři typy.
ad vyhlazení: náhled by měl odpovídat tomu, co pak klient dostane, takže titulky vyhladit, malé písmo nechat nevyhlazené.
a čo takto riešenie vo forme flashového prehrávača náhľadov?
swf roztiahnute na fullscreen. Hračičkári si vytvoria imitáciu monitora a v ňom virtuálny prehliadač so zobrazeným náhľadom webu. Extrémisti dokonca môžu pomocou nasnímaných obrazoviek urobiť interaktívnu prechádzku dizajnom.
Ak sa vytvorí univerzálny prehrávač, tak do neho stačí nasypať niekoľko obrázkov a máte efektnú prezentáciu webu pričom okrem klientom zaužívanej konfigurácie prehliadača uvidí aj viacej kombinácii – ak mu ich ponúknete (čojaviem ako to vyzerá na handhelde, ako na papieri, ako na menšom monitore, ako na 16:9 ako v okne bez maximalizácie, ako fungujú mouseover efekty, ako sa mení hover u linkov atď.).
[7] univerzální přehrávač by možná šel, ale ty další vylomeniny, to už by člověk strávil více času vytvářením náhledu než pozdějším kódováním :-D
Osobně to řeším tak, že vytvořím náhled s velkými rozměry tak, aby i při vyšším rozlišení nedošlo k oříznutí pozadí webu a ten pak vložím do stránky do DIVu, v kterém je tento náhled jako IMG (pro zachování možnosti snadného tisku) vystředěný a oříznutý na šířku stránky (aby člověka nerušil horizontální scrollbar). Zatím s tímto řešením nebyl žádný problém.
Ja jsem se nyni setkal s klientem, kteremu jsem poslal navrh webu jako PNG obrazek. Navrh odsouhlasil, ale problem nastal po nakodovani webu (prohlizec obrazku mu design zmensil) a klient mel predstavu, ze to bude vsechno mensi a vsechny elementy budou videt bez nutnosti skrolovani, od te doby radsi posilam navrh jako vlozeny obrazek v html a je po starostech.
Musím také přidat svůj postřeh. Je velmi důležité při náhledu udělat buď opakování pozádí (pokud se s ním v návrhu počítá) a nebo předem klienta upozornit, že pozadí se opakuje. Hodněkrát jsem se setkal s tím, že jsem vytvořil design v šířce 1100px. Obsah optimalizován na 990px. Grafika, která přetéká zmíněných 990px je už pozadí, které se má opakovat. Spousta lidí tohle nepochopí a pokud je neupozorníte, tak design zprasí nebo se vyptávájí proč není design optimalizováný pro 1024px.
Posílám klientům standartní JPG soubor. Asi mám štěstí na lidi, ale za posledních 7 let jsem nemusel řešit problémy tohoto typu. Moji klienti se zaměřují na celkový dojem z webdesignu. Drobnosti typu vyhlazování a velikost textů nechají naštěstí zcela na mně.
Občas je také vhodné návrh usadit do okna prohlížeče (Firefox) a ofocenou obrazovku vyexportovat do PDF.
Jsem na tom stejne, jeste se me nestalo ze by s tim nekdo mel problem.
Napada me otazka jestli je vhodne aby lidi co nedokazi rozpoznat zmenseny nahled
obrazku spravovat vlastni web :-))
[5] Davide, v obou MS sytémech je na to správné zobrazení v prohlížeči obrázků tlačítko. U XP funguje i klávesová zkratka CTRL+A.
Několikrát tu zaznělo „tento problém se mě naštěstí netýká.“
Tak nevím, sedíte svým klientům za zadkem, když otevírají váš e-mail, nebo jste jen zoufale nepochopili smysl Filosofova a mého článku? Tento problém se netýká jen těch, kteří o něm ví a NEposílají náhled jako obrázek e-mailem.
Dobrý článek, dobrý tip. Já to dělám taky tak už dlouho a rozhodně to doporučuji i ostatním!
[4]: Přesně, html stránka s opakovaným pozadím, do které je umístěn obrázek, je nejlepší řešení…
[13] Náš grafik se taky vyjádřil, cituji „zatim jsme se s takovym problemem asi nesetkali“. Mno nevim, jak k tomu došel, každopádně to zavedu.
Dík za radu =)
Tohle řešení jsem začal používat už tak před 5 lety, tedy neposílat přílohy ale vše dát na web, dokonce každý klient měl vlastní stránky, kde byly i třeba kontakty na mne, e-mail form na komunikaci a tak dale…
[10] Pokud tohle kodér nepozná, tak nevím co si o něm mám myslet :-)
@Roman: Resim to tak, ze exportuju pozadi a dam ho na background stranky a doprostred (dle navrhu) pak dam jen samotny obsah. Pokud je vic stranek navrhu, davam odkaz na cely obrazek, ktery nacte dalsi stranku navrhu.
K univerzalnimu (asi JS) prohlizeci se porad chystam, ale nikdy na to neni ta spravna volna chvile
[5] Asi budu rychle zadupán do země, ale osobně si myslím, že rozdíl mezi nevyhlazeným písmem ve Photoshopu a písmem v prohlížeči je stejný jako mezi písmem vyhlazeným ve Photoshopu (při volbě nejostřejší) a písmem v prohlížeči. (Způsob jakým nevyhlazuje Photoshop je přeci drastický)
Není to přesné, ale proč klientovi ukazovat návrh s písmem nevyhlazeným, které Photoshop v zápalu nevyhlazování citelně zmrzačil, když posun od následné skutečnosti je stejný jako u vyhlazování? A argument „Klient musí vidět nejhorší možnou variantu, aby to pak bylo už jen lepší“ neberu v úvahu. Klient musí vidět návrh který bude co nejblíže výsledku. A pro mě jak nevyhlazené písmo, tak vyhlazené je stejně daleko od tohoto výsledku. Proto použiju to co podle mne vypadá lépe.
Jako poznávací znak pro kodéra to zní dobře, ale skoro vždy když je použit jeden z tzv. webových fontů (nevím jestli je to správné pojmenování, myslím tím Arial, Verdanu, Georgii atd.) tak není důvod nahrazovat obrázkem nebo jinou technikou. Naopak když je použit jiný font, tak kodér použije sIFR a jiné techniky nahrazování písma. Tím mi ve většině případů odpadá i tato výhoda nevyhlazování.
To samé, export pozadí a fláknutí obrázku. Je lepší vidět jak to bude vypadat zhruba v prohlížeči. Je z toho i jasný, jaká část webu bude vidět na různých rozlišeních.
My to řešíme tak, že PNG obrázek webu v plné šířce dáme jako pozadí stránky. Mrkněte na ukázku http://www.2mstudio.cz/…dispa-design