Blog: fonturi corecte, responsive webdesign, aliniere imagini

Trei chestii noi pentru blogurile românești:

tema responsive

Definiția de dicționar e simplă: siteul se redimensionează după rezoluția device-ului pe care îl detectează. Ești pe tabletă? Se face de 7 sau 10 inch. Ești pe telefon? Se face de 3, 4 sau 5 inch. Păstrând designul și eliminând nevoia unei teme speciale de mobil. Foarte mișto

Mai jos vedeți cum se vede acest blog pe un iPad și pe un iPhone, primele două imagini în mod Portrait și a treia în Landscape.

responsive-1 responsive-3 responsive-2 responsive-4 responsive-5 responsive-6

fonturi corecte

A doua chestie mișto la abordarea asta nouă cu responsive webdesign este renunțarea la fonturile urâte și mici, conceptul de webfonts începând să prindă și la noi, mai ales prin copierea site-urilor de afară. Am văzut la varianta beta a Digi24, parcă, ceea ce e un pas pare.

Cum poate un blogger să instaleze așa ceva am explicat aici. Open Sans, Roboto, Lato, Droid Serif sunt câteva din fonturile care suportă diacritice și arată foarte bine.

Mai multe pe tema fonturilor citiți aici.

alinierea imaginilor în articol

Chestia asta e rămasă din presa scrisă: să pui o imagine la început de articol, în partea stângă. Și sunt două probleme cu meteahna asta:

  • e deranjant la citit. mai nou, încadrarea se face în partea dreaptă.
  • imaginea nu e încadrată corect. vedeți mai jos câteva exemple de încadrări greșite, în care imaginea e mai mare sau mai mică decât paragraful pe care ar trebui să îl încadreze. și arată urât.

aliniere-1 aliniere-2 aliniere-3

Mulțumesc că ai citit acest articol.
Dacă vrei să susții acest blog, cumpără un abonament de 3$

26 comentarii

  1. Dezavantajul e ca transmiti aceeasi cantitate de date, iar pe mobil ascunzi o gramada. Si platesti traficul pentru chestii pe care nu le vezi.

    Thumb up 0 Thumb down 0
  2. Există vreun instrument online prin care pot verifica cum se vede pe alte device-uri?

    Thumb up 0 Thumb down 0
  3. Safari-ul are optiunea de a-i schimba user-agent-ul, sa-l faci iPad sau iPhone, dar rezolutia ramane de PC.

    Thumb up 0 Thumb down 0
  4. Şi eu am problema cu imaginea în partea stângă şi ştiu că arată mizerabil. Uneori mai scriu 2-3 rânduri în plus sau şterg, doar ca să nu arate aşa. Există vreun plugin care să îmi facă featured image dar să nu apară în articol ? Aşa cum ai tu la unele posturi de exemplu ? Sau asta ţine de temă şi trebuie un developer bun ?

    Thumb up 0 Thumb down 0
  5. NOU
    #7

    Am instalat plugin-ul. Multumesc de sugestie!

    Thumb up 0 Thumb down 0
  6. Redimensiona-ti dimensiunea ferestrei browser-ului si veti vedea cum se vede tema :)

    Thumb up 0 Thumb down 0
  7. Nu stiu ce m-a facut sa scriu REDIMENSIONA-TI (facepalm)

    Thumb up 0 Thumb down 0
    • @Gorby: citești bloguri de analfabeți. și mie mi se intâmpla acum 4-5 ani, când stăteam juma de oră pe coolgirl.ro.

  8. Revo, Daca n-ai de unde seta, trebe sa doar stergi putin cod din template. Nu trebe un developer bun pt asta. Uitate dupa the_post-200x200nail in single.php.

    Vali, tot vroiam sa te intreb o chestie legata de chacheuire pozelor. Am vazut ca apar in codul sursa linkuri absolute de pe un subdomeniu http://www.zoso.ro. How does it work? E plugin free? Sau?

    Thumb up 0 Thumb down 0
  9. acum ca folosesc mai des quora imi pare ca designul blogului tau seamana la unele lucruri si asta e bine, usor de citit fara chestii inutile, fix ce conteaza :)

    Thumb up 0 Thumb down 0
  10. Responsinator.com

    Thumb up 0 Thumb down 0
  11. Eu te-as intreba altceva. Ai tema asta de 2 ani daca mu gresesc, imi place. Caut o tema la fel de simpla de mult insa nimic nu m-a satosfacut. Cat te-a costat?

    Thumb up 0 Thumb down 0
    • @cKy: n-am tema atsa de 2 ani, o am de câteva luni. o temă din asta, făcută de la zero, te costă de la 300€ in sus. una gata făcută (cum e cea de pe vali.us), care e la fel, responsive, fonturi noi, bla bla, te costă 45$ de pe themeforest.net

  12. Da…tastatura de s2.. nu mai pot da edit :)

    Thumb up 0 Thumb down 0
  13. Ok, dar vezi ca ai o problema cu fotografiile atunci cand incerc sa le vizualizez de pe iphone/ipad. Sau doar la mine e problema?

    Thumb up 0 Thumb down 0
  14. Și atunci care ar fi soluția la mine? Să scriu mai mult în paragraful de început? Să elimin complet poza?

    Thumb up 0 Thumb down 0
  15. Vali, si tu ai o problema pe iOS. Imaginile se incarca la rezolutie 100%. Asta nu ma deranjeaza cand postezi o pisica cu tate mari :)

    Thumb up 0 Thumb down 0
  16. @Madalin Blidaru: http://mattkersley.com/responsive/

    Asta-l foloseam anul trecut, cand am inceput sa fac responsive design. Acu mi-e mai simplu sa dau doar resize la fereastra de browser (sau m-am facut mai lenesa, dracu’ stie).

    Thumb up 0 Thumb down 0
  17. @vali @Madalin Blidaru

    Nu iti trebuie nici o mizerie de browser shots … personal eu folosesc “redimensionarea” ecranului la chrome/safari si uneori Firefox (meh si IE 10) … in 90% din cazuri este precis ca si tool(-uri).

    https://i.imgur.com/7qcF2bY.png

    Thumb up 0 Thumb down 0
  18. Da ma Zoso, da pe iPhone pozele ti se vad naspa cand le deschizi. Rezolva si problema asta si iti dam 10 :)

    Thumb up 0 Thumb down 0

Adaugă un comentariu

Câmpurile marcate cu * sunt obligatorii! Adresa de email nu va fi publicată.

1. Linkurile utile în context sunt binevenite.
2. Comentariile asumate fac bine la blăniță.
3. Șterg comentariile care îmi strică buna dispoziție.

Susținere

Susține acest blog cumpărând de pe eMAG prin acest link sau de la PCGarage prin acest link.