Technologia CSS w aplikacjach pocztowych.

Wielkość: px
Rozpocząć pokaz od strony:

Download "Technologia CSS w aplikacjach pocztowych."

Transkrypt

1 Grudzień 2013 Technologia CSS w aplikacjach pocztowych. Wytyczne dla projektantów newsletterów na rok 2014 Patroni medialni:

2 Spis treści Wstęp Metodologia badań Wyniki badań Praktyczne porady dla projektantów mailingów i developerów Przepis na idealny mailing Kod przykładowego mailingu Przydatne linki O systemie FreshMail Zapraszamy do współpracy / kontakt

3 Wstęp Opracowany raport jest piątym z kolei dotyczącym wykorzystania technologii CSS w aplikacjach pocztowych. Badania, jak co roku poprzedzone zostały analizą dostępnej na rynku literatury. Ze względu na duże zainteresowanie poprzednimi raportami postanowiliśmy po raz kolejny przeprowadzić badania i podzielić się naszą wiedzą i doświadczeniem w tworzeniu profesjonalnych szablonów mailingowych. Kodowanie mailingów nie jest trudne, bywa jednak problematyczne. Tylko odpowiednia wiedza i duża ilość przeprowadzonych testów może dać zadowalający efekt. Dziś, rozwój technologii CSS zdecydowanie wyprzedza możliwości klientów pocztowych, zarówno tych desktopowych, jak również webowych. Jakość i możliwości interpretacji właściwości CSS różnią się w zależności od używanych narzędzi, których szeroko rozumiana kompatybilność pozostawia wiele do życzenia. Narzędzia do obsługi poczty elektronicznej, mimo że obsługują określone właściwości CSS, często interpretują je w sposób nieadekwatny do dokumentacji przygotowanej przez twórców kaskadowych arkuszy stylów. Od czasu wydania zeszłorocznego raportu, na rynku pojawiły się dwie nowości. CSS3, jak i HTML5, które wprowadziły trochę pozytywnego zamętu. Obecny raport uwzględnia te języki i zachęca do testowania ich w kontekście tworzenia nowoczesnych mailingów.

4 Wstęp 4 Niniejsza publikacja jest przewodnikiem spełniającym trzy główne cele. 1 Najważniejszy z nich to prezentacja podstaw merytorycznych umożliwiających przygotowanie szablonu mailingu, którego wygląd w poszczególnych klientach pocztowych i webmailach nie będzie różny od zamierzeń jego projektantów. 2 Kolejne zadanie to zaprezentowanie koderom oraz osobom związanym z emarketingiem podstawowych błędów popełnianych podczas przygotowywania projektów mailingowych. 3 Raport jest także próbą przekonania do stosowania metodologii graceful degradaton, w której tworzyć można nowoczesny szablon dbając, aby był poprawnie wyświetlany również przez słabsze aplikacje. Całość raportu to także unikalna baza wiedzy na temat właściwości CSS obsługiwanych przez poszczególne aplikacje pocztowe, która będzie znakomitym źródłem informacji i dobrych praktyk dla web developerów. Udanej lektury Zespół FreshMail

5 Metodologia badań 5 W ramach badań nad technologią CSS wykonaliśmy szereg testów opartych na specjalnie przygotowanych szablonach ingowych, które dostarczyły informacji na temat interpretacji właściwości CSS w poszczególnych narzędziach. Badaliśmy je także podczas codziennych zmagań z szablonami, które przygotowujemy dla naszych Klientów. Prowadzone przez nas badania dowiodły jak ważne jest projektowanie szablonów ingowych ze znajomością nie tylko najnowszych standardów kodowania, ale również ze świadomością najczęstszych dysfunkcji narzędzi dostępnych na rynku. W celu pełnego przedstawienia wsparcia CSS przez poszczególne aplikacje pocztowe prezentujemy wyniki badań dla najpopularniejszych z nich, analizując dodatkowo wpływ silników przeglądarek internetowych na sposób wyświetlania wiadomości . Nie ulega wątpliwości, że badania nad zastosowaniem technologii CSS w marketingu są nieco niewdzięczne. Ilość wyjątków oraz różnego rodzaju problemów, zależnych nawet od sposobu formatowania kodu (np. problem białych znaków w kodzie po znaczniku <img>) sprawiają, że bardzo trudno stworzyć dokument kompletny, który pozbawiony byłby najmniejszych błędów. Nie mniej warto posiadać wiedzę przedstawioną w raporcie i na bieżąco ją wzbogacać.

6 Metodologia badań Sprzęt i oprogramowanie 6 Podczas badań nad zastosowaniem technologii CSS w marketingu użyto następującego sprzętu i oprogramowania: AMD AthlonTM 64 X2 Dual Core Prosessor ,2 GHz 2 GB Ram Windows 7 Professional 32-Bitowy MacBook PRO Inetl Core Duo, 1,83GHz 2 GB RAM Aplikacje webowe: Aplikacje desktopowe: Aplikacje mobilne: Gmail.com Yahoo! Mail Wp.pl Interia.pl Onet.pl Outlook.com o2.pl Mozilla Thunderbird 11 Microsoft Outlook 2003 Microsoft Outlook 2007 Microsoft Outlook 2010 Microsoft Outlook 2013 Windows Live Mail 2011 Apple Mail 5.2 Android (Default) Gmail (ios/android)

7 Wyniki badań 7 Sposób interpretacji CSS jest różny w poszczególnych aplikacjach pocztowych. Na poniższych stronach przedstawiamy zestawienie wsparcia właściwości CSS dla 16 najpopularniejszych w Polsce aplikacji pocztowych. Techniki marketingowe idą rok rocznie coraz bardziej do przodu. Rozwijają się języki za pomocą których można kodować mailingi. CSS3, jak i HTML5, dają duże pole do popisu. Jednak co na to aplikacje pocztowe? Tegoroczne badania pokazały, że niekwestionowanym liderem we wspieraniu atrybutów CSS3 jest Apple Mail. Odbiorcy korzystający z tego programu otrzymają najlepiej wyświetlające się mailingi. Zaokrąglone rogi buttonów, gradient na przyciskach, dowolność obrazka w tle, to wszystko dostać mogą użytkownicy Apple Maila. Po drugiej stronie barykady znajduje się Outlook. Microsoft nie polepszył niestety wspieralności CSS w swoim Kliencie i Outlook 2013 nadal pozostaje daleko w tyle. Można zapomnieć o gradiencie czy zaokrąglonych rogach, nie mówiąc już o obrazku w tle. Po środku znajduje się cała reszta aplikacji. Restrykcyjny Gmail, WP czy Onet bardzo różnorodnie się zachowują i aby dokładnie wiedzieć, co w której aplikacji ma prawo zadziałać należy zapoznać się ze szczegółowymi wynikami badania. Aplikacje mobilne, które cały czas są jeszcze nowością na polskim rynku, wbrew przypuszczeniom radzą sobie przyzwoicie. Można mieć więc nadzieję, że z roku na rok będzie w tej kategorii coraz lepiej. Chcąc nadać odpowiedniej skali problemowi, przeanalizowaliśmy jak rozkłada się % sprawdzanych maili marketingowych w każdym typie programów pocztowych. Dane zostały pobrane z systemu FreshMail, więc dotyczą zachowań odbiorców kampanii naszych Klientów. Jednak ze względu na fakt, że posiadamy ponad użytkowników systemu, wyniki można uogólniać na populację. 11% maili marketingowych otwieranych jest na urządzeniach mobilnych 35% maili marketingowych otwieranych jest na aplikacjach webowych 54% maili marketingowych otwieranych jest na programach desktopowych

8 Tabela zbiorcza Analiza właściwości CSS 8 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL gradient - tło mailingu gradient - tło z trickiem div gradient - button text-shadow border-radius multikolumn box-shadow text-overflow -> div czcionka zewnętrzna -> link czcionka zewnętrzna w head czcionka zewnętrzna w body

9 Tabela zbiorcza Analiza właściwości CSS 9 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL background - body background-image background-repeat background-position background-size (px) background-size (%) background-size :cover (mniejszy bok) background-size :contain(dłuższy bok) background - table background background-repeat background-position

10 Tabela zbiorcza Analiza właściwości CSS 10 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL background-size (px) background-size (%) background-size: cover (mniejszy bok) background-size: contain (dłuższy bok) background - td background background-repeat background-position background-size (px) background-size (%) background-size: cover (mniejszy bok)

11 Tabela zbiorcza Analiza właściwości CSS 11 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL background-size: contain (dłuższy bok) display:block display:inline display: inline-block style element <style></style> element w sekcji<head> <style></style> element w sekcji<body> link element <link></link> element w sekcji<head> <link></link> element w sekcji<body>

12 Tabela zbiorcza Analiza właściwości CSS 12 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL selektory e * e > f e:link e:active e:hover e:focus e+f e[foo]

13 Tabela zbiorcza Analiza właściwości CSS 13 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL e.classname e#id e:first-line e:first-letter właściwości tła background-color właściwości obramowania border border-color border-collapse

14 Tabela zbiorcza Analiza właściwości CSS 14 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL border-spacing border-style border-width listy list-style-position list-style-type czcionki font-family font-size font-style

15 Tabela zbiorcza Analiza właściwości CSS 15 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL font-variant font-weight marginesy i wcięcia margin padding właściwości tekstu color direction letter-spacing line-height

16 Tabela zbiorcza Analiza właściwości CSS 16 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL text-align text-decoration text-indent text-transform word-spacing white-space pozycjonowanie bottom clear clip

17 Tabela zbiorcza Analiza właściwości CSS 17 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL float left position right top vertical-align z-index rozmiar height width

18 Tabela zbiorcza Analiza właściwości CSS 18 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL min-height min-width inne właściwości cursor empty-cells opacity overflow visibility

19 Praktyczne porady dla projektantów mailingów i developerów 19 W codziennej pracy nauczyliśmy się kilku trików podnoszących szanse dostarczenia wiadomości e mail do skrzynki adresata w niezmienionej formie. Poniżej dzielimy się tą praktyczną wiedzą i zachęcamy do jej stosowania. Struktura Czyli o czym należy pamiętać i co warto wiedzieć zanim zabierzesz się za kodowanie. Konwencja - kod html mailingu musi być poprawny i bez błędów. Wszystkie znaczniki języka HTML, typu: table, td, tr, img itd. muszą być domknięte. Wiedza wcale nie tajemna, ale warta zapamiętania. Poprawny układ <html> <head> </head> <body> </body> </html> HTML HEAD BODY Tabele - mailingi jeszcze długo będą oparte o tabele. Szablony oparte na divach nie sprawdzają się bowiem w sporej liczbie klientów pocztowych ponieważ nie trzymają nadanego im układu. Dlatego też jest konieczność stosowania tabel, aby utrzymać odpowiedni kształt mailingu. Tabele są jednak dobrą opcją gdyż są dobrze zdefiniowane i łatwo nimi operować. Przy budowaniu mailingu ważne jest, aby sumaryczna szerokość poszczególnych komórek tabeli była równa całej szerokości tabeli nadrzędnej. Komórki można scalać w obrębie wiersza (colspan -> poziomo), natomiast nie może ich scalać w obrębie jednego rzędu (rowspan -> pionowo).

20 Praktyczne porady dla projektantów mailingów i developerów 20 Zanim zaczniesz Aby nie musieć poprawiać jak skończysz przeczytaj o czym warto wiedzieć zanim zaczniesz. Kodowanie znaków - zgodnie ze standardami panującymi w sieci, szablony kodujemy w standardzie UTF-8. Starsze kodowania jak iiso czy cp-1250 sprawdzają się tylko w wysyłkach kampanii do polskich odbiorców. W przypadku międzynarodowych wysyłek lub nawet odbiorcy wiadomości na obcojęzycznych aplikacjach zamiast polskich znaków zobaczą krzaki lub inne dziwne znaczki. Reasumując używamy UTF-8. Charset - kodowanie znaków UTF-8 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> Charset - kodowanie znaków iso <script> oraz <link> - to dwa znaczniki, których używania nie zalecamy. Za pomocą <script> osadzamy kod JavaScript, a za pomocą <link> zewnętrze arkusze styli css. Większość programów pocztowych pomija jednak te dwa znaczniki w szablonie mailingów. Szerokość mailingu - wiele źródeł podaje, że optymalna szerokość mailingu wynosi około 650px. Bierze się to przede wszystkim z praktyki. Żaden program lub aplikacja pocztowa nie udostępnia nam całej powierzchni monitora na wyświetlenie maila. Zawsze znajdzie się okienko ze strukturą katalogów, listą wiadomości czy reklamą, zwłaszcza na aplikacjach webowych. Efektem tego jest fakt, że tylko niewielka część ekranu pozostaje na wyświetlenie Twojego maila. Obecnie najpopularniejszą rodzielczością monitorów, z których korzystają internauci jest 1366px na 768px, która stanowi prawie 25% całego rynku (ranking.pl -> :37). Rekomendujemy więc szerokość nie większą niż 640px, a efektem jest optycznie nie za szeroko i nie za wąsko, miejsce na zdjęcia a także na tekst. Szerokość maxymalna równa 600px pozwoli dotrzeć z poprawnym komunikatem do 80% rynku. <meta http-equiv="content-type" content="text/html; charset=iso "/>

21 Praktyczne porady dla projektantów mailingów i developerów 21 Kodowanie czas zacząć Zatroszcz się o wszystkie poniższe elementy, a efekt finalny na pewno będzie zadowalający Wymiary - Dobrą praktyką jest podawanie wymiarów poszczególnych elementów, tabel oraz obrazów zarówno w znaczniku html (width= 10 height= 10 ) oraz w css (style= width: 10px; height:10px ). Wymiarować należy każdy element, aby szablon stał się sztywny i nie rozjeżdżał się. Wymiary podaje się w pikselach. Stylowanie - Szablony stylować należy za pomocą css-ów, wpisując właściwości inline w elementy. Wiele programów pocztowych nie pozwala na linkowanie zewnętrznych arkuszy styli, a także pomija te zawarte w sekcji head oraz body. Skala monitora 1024x768 Stosowanie popularnych skrótów dla właściwości CSS, nie jest mile widziane w niektórych klientach pocztowych. W związku z tym warto z nich zrezygnować stosując pełne definiowanie właściwości (np.: padding-let:0px; padding-right:10px; padding-top:0px; padding-bottom:20px stosujemy zamiast padding:0 10px 20px 0px). Podczas stylowania należy zadbać zarówno o odpowiednich klientów pocztowych, jak i o różne przeglądarki.

22 Praktyczne porady dla projektantów mailingów i developerów 22 Dla niektórych właściwości (np. border-radius) trzeba zadeklarować również właściwości pod różne przeglądarki. Szczegółowa analiza poniższych tabeli będzie pomocna. Stylowanie inline <span style="font-weight:bold">treść</span> Zaciągnięcie styli zewnętrznych <link rel="stylesheet" href="style.css" media="all"/> <style> w sekcji head lub body <style type="text/css" media="screen"> span{ font-weight:bold; } </style> Obrazki - Treści obrazkowe bardzo uatrakcyjniają wygląd mailingu, ich poprawne użycie wymaga jednak trochę pracy. Obrazki powinny być dostosowane wielkością oraz szerokością do wymiarów komórki tabeli, w której się znajdują. Oczywiście możliwe jest załączenie większego obrazka i zeskalowanie go za pomocą parametrów html-owych, lecz obrazek jest wtedy ciężki i waga samego maila się bardzo zwiększa, co negatywnie wpływa na ocenę wiadomości przez filtry antyspamowe. W kodzie wiadomości powinieneś zadeklarować więc wymiary obrazka za pomocą znaczników html (width=, height = ) oraz jak wskazuje dobra praktyka koderska, także za pomocą właściwości css (style= width: yy px; height: yy px; ). Obrazki powinny być pobierane z absolutnych adresów URL, tzn. przed wysyłką kampanii, obrazki powinny zostać wysyłane na zewnętrzne serwery i stamtąd pobierane do mailingu. Jeśli korzystasz z FreshMaila, dzieje się to automatycznie. ALTy - Zazwyczaj w programach pocztowych obrazki domyślne się nie wyświetlają. Użytkownik musi pobrać obrazki, więc zanim to uczyni zobaczy szablon maila z ALTami, czyli tekstami widocznymi pod obrazkami. ALTy można stylować za pomocą css-a. Sposób wyświetlania ALTów jest zależny od przeglądarki i programu pocztowego, którego używa czytelnik do odbierania poczty.

23 Praktyczne porady dla projektantów mailingów i developerów 23 Gdy ALT ma długość maksymalnie 14 znaków jak np. pobierz obrazy to nie powinno być żadnych problemów z jego pojawianiem się w mailingu. Problemy mogą się pojawić w momencie gdy długość tekstu jest większa niż szerokość obrazka. Analizując poniższe tabele można zauważyć, że tylko Mozilla Firefox w całości wspiera ALTy, dłuższy tekst jest zawijany do nowej lini i wspierane jest pełne jego stylowanie. Natomiast Chrome oraz oparta na tym samym silniku renderującym norweska Opera w przypadku gdy tekst jest za długi, w ogóle nie wyświetlają takiego alta. Programy dekstopowe także różnie interpretują ostylowanie ALTów. Dodatkowo programy rodziny Outlook dodają od siebie informacje o pobraniu obrazów a dopiero później wstawiają treść ALTa. Preheader - to tekst, który pojawia się w niektórych skrzynkach Pocztowych zaraz za tematem (przede wszystkim w mobilnych aplikacjach, w Gmailu oraz w Outlooku). Jest to dodatkowe miejsce na przekaz marketingowy. Można go personalizować i wstawić do niego znaczki, które są coraz bardziej popularnym elementem tematów mailingów. Dobrze zrobiony preheder, widoczny jest tylko na etapie zamkniętego maila, więc nie komponuj kreacji w odniesieniu do niego, bo nie każdy go zobaczy. Design w mailingu Graceful degradation - to metoda polegająca na kodowaniu maila pod klienta pocztowego, który najlepiej wspiera css z zachowaniem poprawnego wyświetlania się tej wiadomości na słabszych klientach. Zmiany, zmiany Co zmieniło się w skrzynkach pocztowych? o2 i Interia idą w ślady Gmaila wprowadzając zakładki tematyczne. Zobacz jak wpływa to na efektywność kampanii mailingowych. Pełne wsparcie Więcej > Brak wsparcia

24 Praktyczne porady dla projektantów mailingów i developerów 24 Background-image - wstawiając obrazek jako tło maila należy pamiętać, że nie będzie się on wyświetlał np. na Outlooku. Warto więc zadbać o to, aby kolor tła był dopasowany do koloru zdjęcia wstawionego jako tło. W przypadku nie wyświetlenia się obrazka pozwoli to zachować spójność wyglądu. Gradient - to łagodne przejście z jednego koloru w drugi. Zabieg ten pozwala uatrakcyjnić formę wypełnienia tła maila oraz tła jego elementów.

25 Praktyczne porady dla projektantów mailingów i developerów 25 Zaokrąglone rogi - użycie w zdjęciach czy buttonach delikatnie zaokrąglonych rogów, złagodzi odbiór maila i nada mu ciekawszą formę. widoczny od razu po otwarciu maila, gdyż wymagał pobrania obrazków, aby go zobaczyć. Stosując nowoczesne techniki można za pomocą css a skodować button (gradientowe tło oraz zaokrąglone rogi nie są problemem dla css a), który będzie widoczny od razu po otwarciu maila. Pamiętaj jednak, aby uważać na słowa typu darmowy, oferta specjalna, kup teraz itp., są bowiem bardzo spamogenne, dlatego zanim wyślesz mailing, zrób testy antyspamowe. Button jak obrazek - do tej pory buttony call to action wstawiano jak grafikę, gdyż bardzo często posiadał gradientowe tło oraz zaokrąglone rogi. Minusem takiego rozwiązania był fakt, że taki button nie był

26 Praktyczne porady dla projektantów mailingów i developerów 26 Jestem PRO: Ukryte atrybuty - aby Twój szablon był lepszy zadbaj o na pierwszy rzut oka niewidoczne elementy: Należy pamiętać, aby każdy link w newsletterze posiadał swój atrybut title, krótko opisujący stronę do której kieruje. Warto pamiętać o atrybucie _blank dla linków. Jest on bardzo ważny ponieważ wymusza on otwarcie linka w nowej karcie przeglądarki. Jego brak może zakończyć się próbą otwarcia linka w oknie poczty a tym samym zawieszeniem aplikacji desktopowej obsługującej pocztę elektroniczną. Testy: Każdy projekt maila należy przetestować w jak największej liczbie programów pocztowych, aby zyskać pewność, że odbiorca zobaczy wiadomość w sposób, w jaki sobie życzysz. Z FreshMailem możesz to robić automatycznie bez konieczności instalowania jakichkolwiek aplikacji. Wiadomość powinna posiadać link rezygnacji pozwalający na łatwe wypisanie się z subskrypcji. W przypadku FreshMaila, aby stworzyć link rezygnacji wystarczy w stopce dokumentu zamieścić. Znacznik $$resignlink$$ lub zapisać dowolny tekst pomiędzy znacznikami <resignlink> i </resignlink>.

27 Praktyczne porady dla projektantów mailingów i developerów 27 Testy antyspamowe - We FreshMailu istnieje możliwość sprawdzenia przed wysłaniem wiadomości, czy nie zostanie potraktowany jako spam. Kampania testowa pozwoli wysłać realnego maila na Twoją skrzynkę pocztową. Możesz wtedy ostatecznie zobaczyć jak Twój mail będzie się prezentował. Ważne jest, aby unikać newsletterów będących jednym wielkim obrazkiem. Taka wiadomość ma spore szanse, aby trafić do folderu spam w skrzynkach Twoich odbiorców. Jeśli koniecznie chcesz wysłać dużą grafikę, warto pociąć ją na kilka mniejszych obrazków. Filtry antyspamowe analizują składnię każdej wiadomości. Należy unikać stosowania słów sugerujących, że Twoja wiadomość ma charakter testowy (np. Lorem ipsum). Należy unikać krzykliwych czcionek mogących sugerować filtrom antyspamowym, że jest wiadomością niepożądaną. Porada: FreshMail posiada funkcję FreshMail Inspektora, która wykrywa ponad 30 najczęściej popełnianych błędów przez marketerów. Warto zawsze pamiętać o odpowiednim sprawdzeniu swojej wiadomości zwłaszcza, że nic nas to nie kosztuje :) Porada: FreshMail posiada funkcję spam testu - dzięki niemu możesz w łatwy sposób sprawdzić czy Twoja wiadomość nie zostanie zakwalifikowana jako spam przez następujące zabezpieczenia: Outlook 2003, Outlook 2007, Home.pl, Gmail.com, Onet.pl, GG.pl, o2.pl, Wp.pl, Interia.pl

28 Przepis na idealny mailing 28 marketing od wielu lat jest w ścisłej czołówce najskuteczniejszych form marketingu internetowego. Jednym z ważniejszych składników wpływających na skuteczność mailingu jest jego kreacja wizualna. Niestety z powodu niedopracowania technologicznego klientów pocztowych, z których korzystają użytkownicy, należy znaleźć złoty środek, który będzie łączył cechy wyrafinowania graficznego z wyrachowaniem technologicznym. Dzięki temu, przygotowana kreacja u każdego z użytkowników będzie wyglądać identycznie, gwarantując poprawność prezentacji. Od czego zacząć? Na bazie wiedzy na temat technologii CSS w aplikacjach pocztowych sugerujemy przyjąć następujący schemat przygotowania szablonu maila. Rozpoczynamy standardowo, tworząc szkic makiety naszego szablonu, który będzie zrozumiały i atrakcyjny dla odbiorcy. Następnie projekt trafia do grafika, wraz z wytycznymi dotyczącymi standardów kodowania szablonów, przy czym stale nadzorujemy pracę kreacji i konsultujemy poszczególne odsłony szablonu, aby na koniec przystąpić do jego kodowania. Przygotowanie makiety funkcjonalnej -> graficzny projekt szablonu -> kodowanie szablonu (CSS + HTML) Poniżej pobrać możesz kod przykładowego, prawidłowo skodowanego mailingu. Skorzystamy z wcześniejszych rad i dorzucimy kilka nowych. Szablon maila powinien składać się z czterech podstawowych elementów: element pozycjonujący (wrapper) nagłówek (header) główna zawartość dokumentu (main body) stopka (footer) Dla poniższego przykładu stosujemy następujące założenia: mailing jest wyśrodkowany w stosunku do obszaru okna szerokość dokumentu wynosi 610px

29 Kod przykładowego mailingu 29 Kiknij na monitorze, aby pobrać przykładowy kod mailingu

30 Przydatne linki 30 Poniżej linki, które mogą okazać się pomocne wszystkim Front End Developerom zmagającym się z kodowaniem mailingów blog.returnpath.com blog.wordtothewise.com

31 O systemie FreshMail 31 FreshMail to wszystko czego potrzebujesz, aby wysyłać efektywne newslettery i mailingi. Intuicyjny system, piękne szablony, które łatwo dopasujesz do swoich potrzeb, rozbudowane raporty oraz wiele funkcjonalności, które pozwolą Ci łatwo i szybko tworzyć skuteczne kampanie marketingowe. FreshMail to nie tylko niezawodny system do marketingu, to także zespół profesjonalistów, specjalizujących się w kompleksowej obsłudze działań z zakresu marketingu. Na szczególną uwagę zasługuje także FreshMail Designer - intuicyjny edytor szablonów. Dostajesz do rąk narzędzie dające Ci pełną samodzielność w kreowaniu pięknych i skutecznych newsletterów. Znajomość HTML jest zbędna. Obecność grafika, też nie jest już potrzebna. Biblioteka szablonów i łatwy sposób edycji to ogromna oszczędność czasu i gwarancja profesjonalnego szablonu. Ludzie FreshMaila to eksperci z pasją podchodzący do swojej pracy i czerpiący satysfakcje z sukcesów swoich Klientów. Jednak nie sztuka nazywać się ekspertem, sztuka jest to udowodnić - nam się udało. Jesteśmy najczęściej nagradzaną agencją za kreatywne działania marketingowe w Polsce.

32 Usługi z zakresu marketingu 32 FreshMail to nie tylko samo narzędzie do wysyłki maili, to także zespół ludzi z doświadczeniem w zakresie marketingu, których efektywne działania zostały wielokrotnie nagrodzone i wyróżnione w prestiżowych konkursach marketingowych. Co możemy Ci zaproponować? Strategia komunikacji marketingowej przeanalizujemy Twoją komunikację w Internecie, zoptymalizujemy sposoby pozyskiwania informacji o Klientach, a także zaproponujemy nowe. Skrupulatnie przyjrzymy się Twoim produktom i konsumentom oraz zasugerujemy segmentację grup komunikacji marketingowej. Budowanie bazy adresowej powiedz tylko jakie dane chcesz zbierać, a my zaproponujemy Ci efektywną strategię pozyskania adresów do Twojej bazy. Planowanie kampanii jeżeli nie masz własnej bazy, zaproponujemy Ci kampanię marketingową przy użyciu zewnętrznych dostawców baz danych. Kreacja czy wiesz, jak wielkie znaczenie ma dobrze dobrany komunikat i właściwie skrojona kreacja? Dobrze zaprojektowany mailing może oznaczać kilkukrotnie wyższą efektywność jeśli chodzi o klikalność, ale przede wszystkim wyższy stopień zapamiętania samego przekazu zawartego w newsletterze. Ale to dopiero początek naszej współpracy. Skuteczne działania emarketingowe to proces ciągłej, długookresowej komunikacji z klientem.

33 Zapraszamy do współpracy 33 Pomoż w rozwoju raportu Raport ma na celu pomoc w codziennym zmaganiach z projektowaniem i wdrażaniem szablonów owych. Wszelkie konstruktywne uwagi oraz spostrzeżenia czytelników są mile widziane. Zapraszamy wszystkich zainteresowanych Front End Developerów do współpracy przy tworzeniu kolejnych jego wersji. Odezwij się do nas na Przetestuj FreshMaila! Załóż darmowe konto na

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

Bezbolesny wstęp do CSS

Bezbolesny wstęp do CSS CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

STANDARDY KODOWANIA MAILINGÓW

STANDARDY KODOWANIA MAILINGÓW STANDARDY KODOWANIA MAILINGÓW Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? II. Budowa nagłówka wiadomości. III. Style kaskadowe CSS. IV. Elementarna budowa szablonu. V. Podsumowanie.

Bardziej szczegółowo

Specyfikacja mailingu GG Network

Specyfikacja mailingu GG Network Specyfikacja mailingu GG Network Styczeń 2012 2 Mailing założenia ogólne Do wysłanego mailingu konieczne jest dostarczenie: kreacji typu HTML (do 30 kb); tematu mailingu; nadawcy mailingu; danych reklamodawcy

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ?

PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? Piotr Nalepa Joomla Day Polska 2014 BLOGER I WEBDEVELOPER Kilka słów o mnie SPORTOWIEC AMATOR 2 Perfomance + Joomla =? 3 Google PageSpeed

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

Jak zaprojektować skuteczny mailing. Poradnik i specyfikacja.

Jak zaprojektować skuteczny mailing. Poradnik i specyfikacja. Jak zaprojektować skuteczny mailing. Poradnik i specyfikacja. SPIS TREŚCI 1. Wprowadzenie:... 2 2. Tytuł i nazwa nadawcy:... 2 3. E-mail nadawcy i e-mail zwrotny... 3 4. Zasady projektowania skutecznych

Bardziej szczegółowo

Krótki przegląd własności języka CSS

Krótki przegląd własności języka CSS Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

Krok 1: Stylizowanie plakatu

Krok 1: Stylizowanie plakatu HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Kampania E-MAIL. Wybrane funkcjonalności: Definiowanie danych nadawcy. Personalizacja. Szablony. Profesjonalne kreacje graficzne

Kampania E-MAIL. Wybrane funkcjonalności: Definiowanie danych nadawcy. Personalizacja. Szablony. Profesjonalne kreacje graficzne -1- Kampania E-MAIL REDLINK to przyjazny i intuicyjny system, stworzony dla tych, którzy pragną zrealizować wysyłkę wiadomości E-MAIL do licznej grupy odbiorców i cieszyć się jej efektami. Nasz system

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Tworzenie wiadomości Newsletter

Tworzenie wiadomości Newsletter Tworzenie wiadomości Newsletter W tym przewodniku dowiesz się jak Tworzyć atrakcyjne wiadomości Newlsetter, wybierać grupy docelowe do wysyłki oraz publikować wiadomości na profilach w portalach społecznościowych.

Bardziej szczegółowo

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.:
pierwsza treść, zdjęcie, tabele lub cokolwiek

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style=float: left>pierwsza treść, zdjęcie, tabele lub cokolwiek </div> Wykorzystanie znacznika DIV. Znacznik można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie

Bardziej szczegółowo

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień. Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać

Bardziej szczegółowo

p { color: yellow; font-weight:bold; }

p { color: yellow; font-weight:bold; } Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana

Bardziej szczegółowo

Kaskadowe arkusze stylów cz. 2

Kaskadowe arkusze stylów cz. 2 Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości

Bardziej szczegółowo

MAILING REKLAMOWY DO BAZY UŻYTKOWNIKÓW INTERAKTYWNIE.COM. Oferta reklamowa www.interaktywnie.com/reklama

MAILING REKLAMOWY DO BAZY UŻYTKOWNIKÓW INTERAKTYWNIE.COM. Oferta reklamowa www.interaktywnie.com/reklama MAILING REKLAMOWY DO BAZY UŻYTKOWNIKÓW INTERAKTYWNIE.COM www.interaktywnie.com/reklama Profil użytkownika Interaktywnie.com Zawód/branża: dział marketingu portal/wydawca internetowy agencja interaktywna

Bardziej szczegółowo

SterBox. Przygotowanie Strony Użytkownika

SterBox. Przygotowanie Strony Użytkownika Przygotowanie Strony Użytkownika Sterbox od wersji 2.1.1 obsługuje dwie strony użytkownika umożliwiające sterowanie z kontrolą stanów. Rozpoczynając tworzenie strony potrzebujemy programu do tworzenia

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Dlaczego warto wybrać Sparkmailing? SPARK MEDIA Advertising & New Media info@sparkmedia.pl tel. 81 440 22 02 fax 81 440 25 02

Dlaczego warto wybrać Sparkmailing? SPARK MEDIA Advertising & New Media info@sparkmedia.pl tel. 81 440 22 02 fax 81 440 25 02 Sparkmailing Dlaczego warto wybrać Sparkmailing? Intuicyjna obsługa Przyjazny użytkownikowi interfejs pozwala w szybki sposób przejść do najważniejszych modułów aplikacji. Tworzenie mailingów krok po kroku

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Elementy div i style CSS w praktyce

Elementy div i style CSS w praktyce Elementy div i style CSS w praktyce Włodzimierz Gajda 23 listopada 2005 ver. 0.2 Streszczenie Artykuł omawia kulisy tworzenia strony internetowej wyłącznie w oparciu o elementy div oraz kaskadowe arkusze

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

Tworzenie kampanii mailowych. Tworzenie kampanii mailowych.

Tworzenie kampanii mailowych. Tworzenie kampanii mailowych. Tworzenie kampanii mailowych. Główną funkcjonalnością wielokrotnego autorespondera Pername Mail Marketer jest możliwość prowadzenia kampanii mailowych. Mówiąc prościej jest to masowe wysyłanie wiadomości

Bardziej szczegółowo

Przewodnik... Tworzenie Landing Page

Przewodnik... Tworzenie Landing Page Przewodnik... Tworzenie Landing Page Spis treści Kreator strony landing page Stwórz stronę Zarządzaj stronami 2 Kreator strony landing page Kreator pozwala stworzyć własną stronę internetową z unikalnym

Bardziej szczegółowo

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2} Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.

Bardziej szczegółowo

Ćwiczenie 9 - CSS i wstawianie CSS

Ćwiczenie 9 - CSS i wstawianie CSS Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

Agencja Interaktywna

Agencja Interaktywna Agencja Interaktywna System do skutecznego e-mail marketingu Agencja Interaktywna Fabryka Pikseli 1 System mailingowy 1. Opis systemu. System został stworzony z myślą o podmiotach zamierzających prowadzić

Bardziej szczegółowo

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji

Bardziej szczegółowo

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

Specyfikacja techniczna produktów reklamowych serwisów Trader.com (Polska)

Specyfikacja techniczna produktów reklamowych serwisów Trader.com (Polska) Specyfikacja techniczna produktów reklamowych serwisów Trader.com (Polska) Trader.com (Polska) Sp. z o.o. 00-732 Warszawa, Czerska 8/10, tel. (0-22) 455 33 00, faks (0-22) 455 33 01, NIP 522-010-28-53

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

2. Prezentacja wizualna

2. Prezentacja wizualna 2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia

Bardziej szczegółowo

Czcionki. Rodzina czcionki [font-family]

Czcionki. Rodzina czcionki [font-family] Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana

Bardziej szczegółowo

Przepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania

Przepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania HTML & CSS 1 Przepis Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Zarządzanie bazą danych

Zarządzanie bazą danych -1- Kampania SMS Kampanie SMS to bardzo efektywne narzędzie marketingu bezpośredniego. Łączy w sobie prostotę i zwięzłość przekazu wraz z niemal stu procentową pewnością odebrania i przeczytania wiadomości

Bardziej szczegółowo

STRONA WWW A LANDING PAGE

STRONA WWW A LANDING PAGE Zajęcia 9 Czym się różnią? Przykład: http://www.expander.pl/ http://f.expander.pl/lp/20140124_hipo_kal_zdoln/index.jsp?lpid=20140124_hipo_ka l_zdoln&formtype=google_kredyt_hipoteczny&product0=99&idpartner=98&gclid=c

Bardziej szczegółowo

Specyfikacja Techniczna Produktów Reklamowych esky.pl

Specyfikacja Techniczna Produktów Reklamowych esky.pl Specyfikacja Techniczna Produktów Reklamowych esky.pl (wersja I: ) esky.pl Strona 1 z 13 Zawartość 1. Ogólne zasady tworzenia kreacji reklamowych... 3 1.1. Zasady ogólne... 3 1.2. Zasady ogólne dla poszczególnych

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

Projektowanie aplikacji internetowych. CSS w akcji

Projektowanie aplikacji internetowych. CSS w akcji Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji

Bardziej szczegółowo

Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.

Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r. Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.

Bardziej szczegółowo

Specyfikacja standardów technicznych

Specyfikacja standardów technicznych SPECYFIKACJĘ DOSTOSOWANĄ DO PAŃSTWA POTRZEB DOSTARCZA Specyfikacja standardów technicznych E- mailing Video e- mailing Real- time e- mailing Video Landing Page Wersja z dn. 11.03.2016 r. Spis treści 1.

Bardziej szczegółowo

HTML5 i CSS. Deklaracja musi być na początki dokumentu napisanego w HTML5 przed tagiem .

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>. Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie

Bardziej szczegółowo

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot Idea of responsive web design Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot Czym tak właściwie jest responsive web design? Jest to podejście do projektowania stron internetowych w taki

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

omnia.pl, ul. Kraszewskiego 62A, 37-500 Jarosław, tel. +48 16 621 58 10 www.omnia.pl kontakt@omnia.pl

omnia.pl, ul. Kraszewskiego 62A, 37-500 Jarosław, tel. +48 16 621 58 10 www.omnia.pl kontakt@omnia.pl .firma Dostarczamy profesjonalne usługi oparte o nowoczesne technologie internetowe Na wstępie Wszystko dla naszych Klientów Jesteśmy świadomi, że strona internetowa to niezastąpione źródło informacji,

Bardziej szczegółowo

Proste kody html do szybkiego stosowania.

Proste kody html do szybkiego stosowania. Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach

Bardziej szczegółowo

E-mail marketing jako skuteczne narzędzie promocji

E-mail marketing jako skuteczne narzędzie promocji E-mail marketing jako skuteczne narzędzie promocji Łódź, 22 marca 2012 Filip Kłodawski filip.klodawski@freshmail.pl Założenie: e-mail marketing = permission marketing 2 Najważniejsze wyzwanie 3 Przebić

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.2.

Języki programowania wysokiego poziomu. HTML cz.2. Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce

Bardziej szczegółowo

TECHNOLOGIE SIECI WEB

TECHNOLOGIE SIECI WEB 1. Wybrane elementy sk³adni CSS TECHNOLOGIE SIECI WEB Prowadz¹cy: dr in. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydzia³ Elektrotechniki i Informatyki LABORATORIUM ÆWICZENIE nr

Bardziej szczegółowo

Responsive Web Design

Responsive Web Design Responsive Web Design Zmieniamy Internet na plus Adrian Gadzina Kilka słów o mnie Autor bloga 7pl.pl Web is Brutal Miłośnik Androida Pasjonat kolarstwa (MTB + szosa) Programista aplikacji mobilnych i stron

Bardziej szczegółowo

Dokumentacja WebMaster ver 1.0

Dokumentacja WebMaster ver 1.0 1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak

Bardziej szczegółowo

Projekty z Technologii Informacyjnych

Projekty z Technologii Informacyjnych Projekty z Technologii Informacyjnych Zad. 1. Opracuj prezentację w programie PowerPoint lub podobnym na zadany temat. Prezentacja powinna być przeznaczona do prezentowania w czasie ok. 10 minut. Zad.

Bardziej szczegółowo

Rysunek otaczany przez tekst

Rysunek otaczany przez tekst Tekst i obrazy 1 Rysunek otaczany przez tekst Wprowadzanie obiektu graficznego Rozmiar ramki: width= 200 deklaruje się tylko

Bardziej szczegółowo

Skuteczny mailing marketingowy

Skuteczny mailing marketingowy Skuteczny mailing marketingowy Czym jest Newsletter? To forma elektronicznego biuletynu za pośrednictwem którego nasi Klienci otrzymują informacje od naszego Salonu. Inaczej mówiąc jest to usługa, polegająca

Bardziej szczegółowo

Wordpress: http://wordpress.org. Joomla! http://www.joomla.org/ Drupal. http://drupal.org

Wordpress: http://wordpress.org. Joomla! http://www.joomla.org/ Drupal. http://drupal.org System zarządzania treścią (Content Management System, CMS) jest to aplikacja internetowa lub ich zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę. Prezentacja

Bardziej szczegółowo

Asynchroniczne interfejsy WWW

Asynchroniczne interfejsy WWW Asynchroniczne interfejsy WWW Wprowadzenie do tworzenia aplikacji webowych, dokumentów HTML5 oraz CSS mgr inż. Rafał Grycuk mgr inż. Patryk Najgebauer Strona służbowa: http://iisi.pcz.pl/~rgrycuk/ Kontakt:

Bardziej szczegółowo

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl ootstrap 1/15 Bootstrap Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 11 kwietnia 2015 Bootstrap 2/15

Bardziej szczegółowo

POCZTA ELEKTRONICZNA. Patrycjusz Różański

POCZTA ELEKTRONICZNA. Patrycjusz Różański POCZTA ELEKTRONICZNA Patrycjusz Różański Definicja Poczta elektroniczna (ang. electronic mail, e-mail, czyt. imejl ) służy do przesyłania informacji (listów, zdjęć, prezentacji) w postaci elektronicznej

Bardziej szczegółowo

Nowa strona internetowa Twojej Firmy w 3 dni!

Nowa strona internetowa Twojej Firmy w 3 dni! www.stronaw3dni.pl Nowa strona internetowa Twojej Firmy w 3 dni! W pakiecie: + indywidualny projekt + wersja mobilna + domena i hosting na rok gratis! od 1299 zł 989 zł netto ZAPRASZAMY DO ZAPOZNANIA SIĘ

Bardziej szczegółowo

Laboratorium 6 Tworzenie bloga w Zend Framework

Laboratorium 6 Tworzenie bloga w Zend Framework Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy

Bardziej szczegółowo

HTML5 Nowe znaczniki header nav article section aside footer

HTML5 Nowe znaczniki header nav article section aside footer Specyfikacja HTML5 wprowadza nowe znaczniki pozwalające w łatwy i intuicyjny sposób budować szkielet strony, który przez zmniejszenie ilości kodu jest czytelniejszy i łatwiejszy w utrzymaniu, pozwala poza

Bardziej szczegółowo

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Sieci Komputerowe i Technologie Internetowe Materiał pomocniczy na podstawie fragmentu wykładu: KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

Bardziej szczegółowo

Języki programowania wysokiego poziomu CSS

Języki programowania wysokiego poziomu CSS Języki programowania wysokiego poziomu CSS Kaskadowe Arkusze Stylów CSS (ang. Cascading Style Sheets) to język służący do formatowania dokumentów WWW, utworzonych w językach HTML oraz XHTML. CSS stworzono

Bardziej szczegółowo

Pierwsze kroki w GetResponse

Pierwsze kroki w GetResponse Pierwsze kroki w GetResponse W tym przewodniku dowiesz się jak Budować listę odbiorców, tworzyć wiadomości, które robią wrażenie oraz śledzić statystyki wysyłek. Pierwsze kroki w GetResponse Spis treści.

Bardziej szczegółowo

Personalizowanie wirtualnych pokojów

Personalizowanie wirtualnych pokojów Personalizowanie wirtualnych pokojów www.clickmeeting.pl Dowiedz się, jak spersonalizować swój wirtualny pokój, stosując kolorystykę Twojej marki oraz dodając logo organizacji. Pokażemy Ci krok po kroku,

Bardziej szczegółowo

Załącznik nr 3 do umowy

Załącznik nr 3 do umowy Szczegółowy opis przedmiotu zamówienia usługa udostępnienia i obsługi systemu do mailingu dla projektu Rozwój Pojedynczego Punktu Kontaktowego Trzeciej Generacji Załącznik nr 3 do umowy Spis treści I.

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW. Ćwiczenie 2 Kaskadowe arkusze stylów CSS. Budowanie makiety strony i jej modyfikacja dr inż. Robert Banasiak 1 Materiały ćwiczeniowe Wszelkie materiały ćwiczeniowe: wykłady, instrukcje oraz pliki ćwiczeniowe

Bardziej szczegółowo

Układy witryn internetowych

Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym

Bardziej szczegółowo

ABC poczty elektronicznej

ABC poczty elektronicznej ABC poczty elektronicznej Spotkanie Agenda spotkania: o sobie czym jest poczta elektroniczna zakładamy własną skrzynkę pocztową Pamiętaj, jeśli czegoś nie rozumiesz, pytaj od razu. Czym jest poczta elektroniczna

Bardziej szczegółowo

Google Grants (dla ZHP) czyli 10 000 $ na reklamy w AdWords. Nie czekaj! Działaj.

Google Grants (dla ZHP) czyli 10 000 $ na reklamy w AdWords. Nie czekaj! Działaj. Google Grants (dla ZHP) czyli 10 000 $ na reklamy w AdWords Nie czekaj! Działaj. Informacje o programie Uczestnicy programu Google Grants otrzymują bezpłatną reklamę w AdWords na Google.com. Tworzą własne

Bardziej szczegółowo

Wprowadzenie do Internetu zajęcia 3

Wprowadzenie do Internetu zajęcia 3 Wprowadzenie do Internetu zajęcia 3 Zakres tematyczny zajęć CSS arkusz stylów. Formatowanie tekstu CSS w przykładach. CSS arkusz stylów Wprowadzenie Język HTML, XHTML został wzbogacony o potężne narzędzie

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium HTML + CSS Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej składającej się z zestawu stron w języku HTML. Ćwiczenia można wykonać na dowolnym komputerze,

Bardziej szczegółowo

Jak dobrze budować strony www.

Jak dobrze budować strony www. Jak dobrze budować strony www. W procesie projektowania stron www, kierujemy się różnymi zasadami, wytycznymi, badaniami użytkowników, doświadczeniem, opiniami itp. Wszystko to tworzy pewien zestaw przykazań

Bardziej szczegółowo

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność stosowania stylów do automatycznego przygotowania

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

Program szkolnego koła informatycznego www.pl

Program szkolnego koła informatycznego www.pl Program szkolnego koła informatycznego www.pl Wstęp Program szkolnego koła www.pl ma na celu ujawnienie zainteresowań i kształtowanie uzdolnień młodzieży w dziedzinie informatyki. Zakłada się, że uczniowie

Bardziej szczegółowo

Oferta reklamowa 2013

Oferta reklamowa 2013 Oferta reklamowa 2013 Nr 1 w Polsce Biuranet.pl jest największym portalem o tematyce nieruchomości komercyjnych w Polsce. Działąjący już od 2006, systematycznie rozwijany, od lat pomaga w wynajęciu wolnej

Bardziej szczegółowo

Dokumentacja Administratora portalu. aplikacji. Wirtualna szkoła

Dokumentacja Administratora portalu. aplikacji. Wirtualna szkoła Dokumentacja Administratora portalu aplikacji Wirtualna szkoła aktualna na dzień 20.12.2012 Wykonawca: Young Digital Planet SA 2012 Strona 2 z 15 Spis Treści Wirtualna szkoła SYSTEM ZARZĄDZANIA NAUCZANIEM...

Bardziej szczegółowo

Duszpasterstwo Akademickie Petra. Podręcznik administratora newslettera html

Duszpasterstwo Akademickie Petra. Podręcznik administratora newslettera html Duszpasterstwo Akademickie Petra Podręcznik administratora newslettera html 1 Jak zacząć? Wejdź na www.mailchimp.com Załóż nowe konto. Kliknij SIGN UP Podaj email, wybierz nazwę użytkownika (np. Petra-mojemiasto)

Bardziej szczegółowo

Oferta reklamowa 2015

Oferta reklamowa 2015 Oferta reklamowa 2015 Nr 1 w Polsce Biuranet.pl jest największym portalem o tematyce nieruchomości komercyjnych w Polsce. Działąjący już od 2006, systematycznie rozwijany, od lat pomaga w wynajęciu wolnej

Bardziej szczegółowo