V půlce července jsem spustil novou verzi mého osobního webu: http://adamjurak.cz/ A když už, tak rovnou responsivní.
Co znamená responsivní web?
Stručně: responsivní web dokáže přizpůsobit svou šířku zařízení, na kterém je zobrazen.
Web se tedy dokáže přizpůsobit jak běžnému monitoru, tak mobilu či tabletu a na všech zařízeních by měl vypadat dobře bez zoomování či skrolování vpravo.
Víc o tématu například v článku Co to znamená, když se řekne responsivní web.
Toto trvalo (adamjurak.cz-v2 story)
12 měsíců přemýšlení, návrhů, kódování a odkládání. Jaký je příběh druhé verze mého webu?
Stará verze webu byla hodně provizorní – bez grafiky, jen jméno, e-mail, dvě věty o mně a pár odkazů. Od 10. 10. 2010, kdy byla první verze spuštěna, jsem rozjel několik projektů a dělal na pár webech, tak proč to ve slušné formě neprezentovat.
V létě 2011 jsem tak začal vymýšlet, co na webu chci a jak by měl vypadat. Inspirován například weby medio.cz a komart.cz (myslím, že tehdá vypadal jinak) jsem se rozhodl pro jednostránkový (one-page) layout.
V srpnu jsem zmastil návrh, který teď působí hodně směšně. Nějak to začít muselo, tak šup s ním Marťasovi, aby mohl přemýšlet o grafice.
V listopadu jsem dostal první grafický návrh, který nebyl to pravé ořechové a smetl ho ze stolu.
V únoru 2012 přišel návrh druhý a to už bylo ono. Z prvního dojmu jsem byl unešený a přesně tak jsem si to představoval.
Hned jsem začal pracovat na základní kostře a ládovat grafiku do kódu. Hlavička, projekty, paráda..
Pak jsem se zasekl.
V původním návrhu jsem nepočítal s referencemi a vyhodil úvodní uvítací kecy. Jak to tam teď všechno narvat? Web i kvůli jiným odkládám.
V červnu jsem si řekl, že už to musím dotáhnout. Udělal jsem si jasno, jak zbytek poskládám a dotáhl web obsahově.
Na začátku července jsem měl hotovo a začal řešit optimalizaci pro různá rozlišení dipleje.
V pondělí 16.07.2012 večer web nahrávám na hosting. Hurá!
Teď už jen otestovat, jestli to na různých zařízeních vypadá tak, jak má. Zatím podle zpětné vazby ano.
Zkoušel jsem na to i různé webové nástroje (responsive.is, studiopress). Nevím proč, ale ty mi to nezobrazují správně. Nevíte proč?
Grafika
Grafický návrh jsem svěřil kamarádovi Martinu Ptaškovi, který mi často pomáhá s grafikou webů, plakátů, log a tak. Bez něj by nová verze na světě nebyla.
Navíc mi vymyslel i logo, takže co dodat. Jen velké díky.
Co web zatím neumí
Poprvé jsem se pustil do responsivního webu, takže má své mouchy. Pomohlo mi hlavně školení responsive webdesignu od Honzy Sládka, které mohu vřele doporučit a o kterém jsem se rozepsal v minulém článku.
Takže co mi zbývá vyřešit?
- Při šířce do 767 px se nezobrazuje menu. Chtěl bych ho nahradit čudlíkem se 3 tečkami, na kterém by menu vyjíždělo. Víte jak na to?
- Do 767 px jsou obrázky u projektů pouze schované. Takže se načítají a kradou data.
Budu rád, když mi poradíte, jak tyto 2 mouchy zabít.
Jak se zobrazuje vám? Pomozte s testováním
Pomůžete mi prosím web otestovat? Pusťte si adamjurak.cz na mobilním zařízení a dejte vědět, jestli se zobrazuje správně. Klidně sem do komentářů nebo na mail kontakt@adamjurak.cz
Tady jsou obrázky, jak by to mělo na daném rozlišení správně vypadat, takže klidně porovnávejte.
Otestováno na:
Samsung Galaxy S: OK
iPad: OK (díky @piromancz a @strakamichal)
HTC Desire: OK (díky @paveljasek)
Napsat komentář