GoldenLine
Zaloguj się
Wojciech S.

Wojciech S. BushidoIT.com

Temat: Stosowanie obrazków zamiast tekstu

Witam,

Ostatnio pokazując klientowi wersję testową projektu, stwierdził on że czcionki nie są takie jak na layoucie który nam dostarczył. Dokładnie chodziło o nagłówki które miały być ostylowane Arial Narrowem, nie pozostało nam nic innego jak pozamieniać wszystkie nagłówki na grafiki (oczywiście dodaliśmy odpowiednie alty).

Oczywiście już na samym początku zauważyliśmy całą masę problemów. Jedne nieco mniej związane z usability jak np. utrudnioną edycję nagłówka, większy rozmiar strony, czy obsłużenie każdej wersji językowej, inne nieco bardziej, jak na przykład wygląd takowej strony pod przenośnymi przeglądarkami (opera mini 3.x wyświetla alt, ale już 4.x beta próbuje obrobić grafikę z kiepskim rezultatem), możliwość powiększenia czcionki.

Czy macie podobne doświadczenia? Jak sobie z nimi poradziliście? Czy widzicie jakieś inne wady takich rozwiązań i sposoby na poradzenie sobie z nimi?

pozdrawiam
Link do wypowiedziLink
Lukasz Szymanski

Lukasz Szymanski Head of Marketing
and PR | Consultant

Temat: Stosowanie obrazków zamiast tekstu

jest taka fajna zabawka jak SIFR.
Google (i przegladarki nie czytajace flasha) widzi to jako tekst, uzytkownik jako grafike ;)
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Jest też taka fajna zabawka jak CSS + różnicowanie pod względem mediów (np. odrębny CSS bez grafiki na komórki)...
Link do wypowiedziLink
Wojciech S.

Wojciech S. BushidoIT.com

Temat: Stosowanie obrazków zamiast tekstu


jest taka fajna zabawka jak SIFR.
Google (i przegladarki nie czytajace flasha) widzi to jako tekst, uzytkownik jako grafike ;)


Dzisiaj to znalazłem, na pewno się tym zainteresuje


Jest też taka fajna zabawka jak CSS + różnicowanie pod względem mediów (np. odrębny CSS bez grafiki na komórki)...


A w jaki sposób chciałbyś podmieniać tekst obrazkami CSSem? Obsłużenie wszelkiego rodzaju mediów raczej nie wchodzi w grę (liczy się również czynnik ekonomiczny rozwiązania, a co za tym idzie brak możliwości poświęcenia odpowiedniej ilości czasu).

pozdrawiam
Link do wypowiedziLink
Tomasz Staniak

Tomasz Staniak Klik klik

Temat: Stosowanie obrazków zamiast tekstu

A w jaki sposób chciałbyś podmieniać tekst obrazkami CSSem? Obsłużenie wszelkiego rodzaju mediów raczej nie wchodzi w grę (liczy się również czynnik ekonomiczny rozwiązania, a co za tym idzie brak możliwości poświęcenia odpowiedniej ilości czasu).

Najszybciej?

<h2><span>tekst</span></h2>

h2
{
background: url('obrazek') 0 0 no-repeat;
height: 90px;
width: 200px;
}
h2 span
{
left: -999em;
position: absolute;
}

To rozwiazanie ma oczywiscie pare problemow.
Link do wypowiedziLink
Wojciech S.

Wojciech S. BushidoIT.com

Temat: Stosowanie obrazków zamiast tekstu

Tomasz S.:
A w jaki sposób chciałbyś podmieniać tekst obrazkami CSSem? Obsłużenie wszelkiego rodzaju mediów raczej nie wchodzi w grę (liczy się również czynnik ekonomiczny rozwiązania, a co za tym idzie brak możliwości poświęcenia odpowiedniej ilości czasu).

Najszybciej?

<h2><span>tekst</span></h2>

h2
{
background: url('obrazek') 0 0 no-repeat;
height: 90px;
width: 200px;
}
h2 span
{
left: -999em;
position: absolute;
}

To rozwiazanie ma oczywiscie pare problemow.

Nie rozumiem troszkę podejścia, po co chować tekst przed wzrokiem użytkownika i wyświetlać mu obrazek? Przecież ten w atrybucie alt powinien wystarczyć. Zresztą trudno przewidzieć jak taki kod zachowa się pod różnymi przeglądarkami (nie wspominając o urządzeniach przenośnych). Poza tym wciąż pozostają problemu, typu edycji takiego tekstu, więc chyba lepszym rozwiązaniem jest wspomniany wyżej SIFR.
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Kod a'la Tomek zachowuje się dobrze.

To rozwiązanie jest sympatyczne ze względu na zachowanie pełnej odrębności warstwy prezentacji.
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Tomasz S.:
{
left: -999em;
position: absolute;
}
Po co używać trików jeśli istnieją normalne, działające narzędzia? Poprawnie robi się to poprzez "display: none". Następnie w stylu "aural" dorzucasz "dysplay: block" i wszystko śmiga tak jak powinno.
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Wojciech S.:

Nie rozumiem troszkę podejścia, po co chować tekst przed wzrokiem użytkownika i wyświetlać mu obrazek? Przecież ten w atrybucie alt powinien wystarczyć. Zresztą trudno przewidzieć jak taki kod zachowa się pod różnymi przeglądarkami (nie wspominając o urządzeniach przenośnych). Poza tym wciąż pozostają problemu, typu edycji takiego tekstu, więc chyba lepszym rozwiązaniem jest wspomniany wyżej SIFR.

No właśnie - po co chować tekst przed użytkownikiem? Czy stosując rozwiązania skryptowe (jak np. sIFR) tego właśnie nie robisz? Co za różnica - obrazek GIF czy plik Flash?

Kod zachowuje się wszędzie tak samo (choć nie jestem zwolennikiem "spanowania" - wystarczy mocno ujemny text-indent) i dzięki takiemu rozwiązaniu zyskujemy dodatkowo możliwość wykorzystania pseudoklas w CSS (jak np. :hover, czy też :focus).

CSS dla urządzeń przenośnych lub do druku (o ile nie tworzymy tu zupełnie odmiennej wersji konstrukcyjnej) waży najwyżej kilka kB i zazwyczaj wystarczy stworzyć taki tylko raz - później powiela się go w kolejnych projektach (ciekawym przykładem jest tu Grids CSS powiązany z biblioteką YUI).

Co do edycji tekstu - owszem jest to największy minus przy dużych projektach; ale zachowując źródłowe pliki graficzne możemy zaoszczędzić sporo czasu na takich operacjach. Edycja nagłówka w notatniku i w programie graficznym nie różni się tak bardzo - po prostu wpisujemy tekst w danym języku...
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Grzesiek W.:
Kod a'la Tomek zachowuje się dobrze.

To rozwiązanie jest sympatyczne ze względu na zachowanie pełnej odrębności warstwy prezentacji.

Otóż nie - to rozwiązanie kłóci się z zasadą oddzielenia warstwy prezentacji od treści: chcąc zmienić treść nagłówka oprócz edycji kodu HTML musisz wyedytować plik CSS i podmienić mu obrazek.

Można nadgrać po prostu, ale często nazwy plików odwzorowują ich zawartość, więc zmieniając treść nagłówka raczej się wrzuca nowy obrazek (stary może być potrzebny w innym miejscu).

Używając IMG rzeczywiście zasada oddzielenia warstwy prezentacji od treści byłaby zachowana: edytujemy HTML i zmieniamy atrybuty src i alt dla obrazka.

Kiedyś rozwinąłem temat bardziej:
http://42.pl/u/t8i_irBogdan Baraszkiewicz edytował(a) ten post dnia 17.07.07 o godzinie 12:37
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Waldek M.:
No właśnie - po co chować tekst przed użytkownikiem? Czy stosując rozwiązania skryptowe (jak np. sIFR) tego właśnie nie robisz? Co za różnica - obrazek GIF czy plik Flash?

Ano po to, że jak masz kilkadziesiąt różnych nagłówków do wpisania to jest różnica w ilości wykonanej (żmudnej) pracy. Poza tym przy obrazkach nie ma możliwości wpisania dowolnego tekstu przez skrypt - dynamicznie, bez użycia jakiegoś edytora graficznego. Pozostaje tylko kombinowanie z generowaniem grafik GD, czy czymś podobnym.
Waldek M.:
Kod zachowuje się wszędzie tak samo (choć nie jestem zwolennikiem "spanowania" - wystarczy mocno ujemny text-indent) i
dzięki takiemu rozwiązaniu zyskujemy dodatkowo możliwość wykorzystania pseudoklas w CSS (jak np. :hover, czy też :focus).

A widziałeś jak zachowują się linki przy zastosowaniu tej techniki?
Kliknij na któryś download na stronie WP: http://wordpress.org/download/

sIFR pomimo swoich niedogodności - czasami są problemy z wielkością czcionki - jest najlepszym sposobem na uzyskanie pożądanego efektu.

Oczywiście sam stosuję czasami obrazki, ale tylko wtedy, kiedy wiem, że nagłówki będą na stałe i jest ich niewiele.
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Dawid L.:

A widziałeś jak zachowują się linki przy zastosowaniu tej techniki? > Kliknij na któryś download na stronie WP: http://wordpress.org/download/

W widziałeś kiedyś taki zapis?
a{outline:none;}
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Waldek M.:
Kod zachowuje się wszędzie tak samo (choć nie jestem zwolennikiem "spanowania" - wystarczy mocno ujemny text-indent) i dzięki takiemu rozwiązaniu zyskujemy dodatkowo możliwość wykorzystania pseudoklas w CSS (jak np. :hover, czy też :focus).

I skutecznie ograniczamy dostępność w przypadku wyłączonych obrazków w przeglądarce.
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Waldek M.:
A widziałeś jak zachowują się linki przy zastosowaniu tej techniki? > Kliknij na któryś download na stronie WP: http://wordpress.org/download/

W widziałeś kiedyś taki zapis?
a{outline:none;}

A próbowałeś nawigować za pomocą klawiatury po stronie, gdzie linki mają taki zapis?
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Bogdan B.:
Waldek Mazurek:
Kod zachowuje się wszędzie tak samo (choć nie jestem zwolennikiem "spanowania" - wystarczy mocno ujemny text-indent) i dzięki takiemu rozwiązaniu zyskujemy dodatkowo możliwość wykorzystania pseudoklas w CSS (jak np. :hover, czy też :focus).

I skutecznie ograniczamy dostępność w przypadku wyłączonych obrazków w przeglądarce.

Coś za coś - przyznaję, że odpowiednio ostylowany zapis - np. <h2>Nagłówek<span></span></h2> - pozwala na zwiększenie dostępności. Faktem jest, że najlepszym rozwiązaniem jest stosowanie nagłówków tekstowych; wszystkie inne rozwiązania mają jakieś wady...Waldek Mazurek edytował(a) ten post dnia 17.07.07 o godzinie 14:55
Link do wypowiedziLink
Wojciech K.

Wojciech K. realizator pomysłów
własnych

Temat: Stosowanie obrazków zamiast tekstu

Wojciech S.:
nam dostarczył. Dokładnie chodziło o nagłówki które miały być ostylowane Arial Narrowem, nie pozostało nam nic innego jak

można w stylu podać kilka fontów i ich rodzin, zaczynając od tego "najbliższego" pojektowi, czyli "Arial Narrow" - na 3/4 komputerów z windowsem to pójdzie bez problemu - wystarczy, że user ma zainstalowany taki font - a przeciętny user ma...

można też wypróbować zwykły arial plus letter-spacing:-1px ...

(nawiasem mówiąc, arial to brzydki i męczący na dłuższą metę wzrok font - nieudane rozwinięcie helvetiki...)

podstawa to w projekcie (np. w photoshopie) używać od razu "realnych" czcionek w realnych rozmiarach i uważać przy tym na antyaliasing (czyli wyłączać dla zakresu np. 9-15pt).
Klient potrafi się czasem przyzwyczaić do czcionki na projekcie w sposób uniemożliwiający późniejsze jej podmienienie - nawet na lepszą.
Link do wypowiedziLink
Wojciech S.

Wojciech S. BushidoIT.com

Temat: Stosowanie obrazków zamiast tekstu


Co do edycji tekstu - owszem jest to największy minus przy dużych projektach; ale zachowując źródłowe pliki graficzne możemy zaoszczędzić sporo czasu na takich operacjach. Edycja nagłówka w notatniku i w programie graficznym nie różni się tak bardzo - po prostu wpisujemy tekst w danym języku...

Rozwiązanie raczej nie przejdzie przy stosowaniu większych CMSów


"Arial Narrow" - na 3/4 komputerów z windowsem to pójdzie bez problemu - wystarczy, że user ma zainstalowany taki font - a przeciętny user ma..


Tu się nie zgodzę, niestety nie przeciętny user, Arial Narrow jest instalowane z MS Office a to ten pakiet nie jest używany przez każdego, dodatkowo klient nie godzi się na rezygnację z tej czcionki na rzecz zwykłego Ariala.

SIFR okazał się chyba najsensowniejszym rozwiązaniem.

pozdrawiam
Link do wypowiedziLink

konto usunięte

Temat: Stosowanie obrazków zamiast tekstu

Najsensowniejsze jest myslenie ju żna etapie projektu.
Nie zatrudniajcie grafików oderwanych w 100% od css'a bo takie kłopoty bedą się mnożyły. Oczywiście nie piszę tutaj o alfah i omegach co zaprojektują potną i jescze zaprogramują.
Praca grafika to rzemiosło, dobry rzemieślnik musi umieć pracować w wyznaczonych granicach, layotu robione na css mimo, że śliczne mają pewne ograniczenia, których świadomość warto mieć już na etapie projektowania.
Link do wypowiedziLink
Wojciech S.

Wojciech S. BushidoIT.com

Temat: Stosowanie obrazków zamiast tekstu

Marcin D.:
Najsensowniejsze jest myslenie ju żna etapie projektu.
Nie zatrudniajcie grafików oderwanych w 100% od css'a bo takie kłopoty bedą się mnożyły. Oczywiście nie piszę tutaj o alfah i omegach co zaprojektują potną i jescze zaprogramują.
Praca grafika to rzemiosło, dobry rzemieślnik musi umieć pracować w wyznaczonych granicach, layotu robione na css mimo, że śliczne mają pewne ograniczenia, których świadomość warto mieć już na etapie projektowania.
Nie zawsze jest to możliwe, jak napisałem:


Ostatnio pokazując klientowi wersję testową projektu, stwierdził on że czcionki nie są takie jak na layoucie który nam dostarczył


Grafikę dostaliśmy od klienta i nie możliwości jej zmiany choćby w drobnym szczególe...
Link do wypowiedziLink
Kamil Turcza

Kamil Turcza User Experience &
Interface Designer

Temat: Stosowanie obrazków zamiast tekstu

Tomasz S.:
A w jaki sposób chciałbyś podmieniać tekst obrazkami CSSem? Obsłużenie wszelkiego rodzaju mediów raczej nie wchodzi w grę (liczy się również czynnik ekonomiczny rozwiązania, a co za tym idzie brak możliwości poświęcenia odpowiedniej ilości czasu).

Najszybciej?

<h2><span>tekst</span></h2>

h2
{
background: url('obrazek') 0 0 no-repeat;
height: 90px;
width: 200px;
}
h2 span
{
left: -999em;
position: absolute;
}

To rozwiazanie ma oczywiscie pare problemow.


Jeszcze szybciej:

html

<h2>tekst</h2>

h2 {
background: url('sciezka') 0 0 no-repeat;
height: 100px;
width: 200px;
text-indent: 1000em;
}

Mniejsza ilosc znaczników, google widzi tylko tekst (ponieważ jest on w html). Wszystko się ładuje szybko i ładnie. ;>
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Czytanie tekstu




Wyślij zaproszenie do
Anuluj