Flexbox Tutorial – Responsive Web Design

Dobra informacja dla wszystkich developerów i projektantów www – responsive web design właśnie stał się nieco łatwiejszy. Wygląda na to, że możemy powoli myśleć o tym, żeby zacząć używać długo wyczekiwanego flexboxa – wszystkie najnowsze wersje liczących się przeglądarek mają już wsparcie tej funkcjonalności (szczegóły tutaj).

Czytaj dalej

Własne dyrektywy htaccess – WordPress tutorial

W tym krótkim tutorialu dowiesz się w jaki sposób z poziomu szablonu utworzyć proste dyrektywy htaccess. Za względu na skuteczną politykę taksonomii i linkowania w WordPress’ie, rzadko kiedy pojawia się potrzeba tworzenia własnych reguł mod rewrite.

Wyobraźmy sobie sytuację, że na podstawie XML-a z lokalizacjami, renderujemy google map. Co jeśli chcemy aby każda z lokalizacji miała własny przyjazny link?

wp_rewrite

Czytaj dalej

Aplikacje mobilne – hybrydowe czy natywne

Decydując się na budowę aplikacji mobilnej bardzo często klienci rozważają wykonanie aplikacji natywnej (wykonanej w językach Objective-C – IOS i Java – Android) oraz webowej czy hybrydowej (wykonanej w językach webowych takich jak HTML, CSS i Javascript) – w przypadku tej drugiej najczęściej pojawia się jeszcze hasło PhoneGap… Oba typy aplikacji – dla uproszczenia wrzućmy aplikacje webowe i hybrydowe do jednego worka – mają swoje wady i zalety zarówno z punktu widzenia wykonawcy (projektanta, developera), jak i klienta. Czytaj dalej

WordPress 3.9 – upgrade problem

Szybkie rozwiązanie problemu występującego przy upgradzie do WordPressa 3.9. Jeżeli pojawi Ci się błąd:
Call to undefined function wp_register_plugin_realpath() in /ścieżka-do-pliku/wp-settings.php on line 213

część plików najwidoczniej się nie nadpisała. Zanim cokolwiek zrobisz – zrób oczywiście najpierw backup plików z FTP-a oraz bazy danych. Czytaj dalej

Ile kosztuje stworzenie aplikacji mobilnej

Na końcu tego artykułu znajdziesz link do kalkulatora ceny aplikacji na Androida i IOS-a. Zapraszamy jednak do przeczytania całości, jeżeli chcesz dowiedzieć się co ma wpływ na cenę i jak ją obniżyć. Wpis dotyczy szacowania kosztów aplikacji natywnych, które w porównaniu do aplikacji napisanych w językach webowych są kilkakrotnie razy tańsze. To, na jaką aplikację się zdecydować – natywną, HTML czy hybrydową – to temat na osobny artykuł. Czytaj dalej

Optymalizacja stron responsywnych

Często spotykanym zarzutem pod adresem podejścia responsive web design jest wydajność. W sieci można natknąć się na różne szacunki (czy też badania mitycznych „Amerykańskich Naukowców”) tolerancji użytkowników na czas ładowania się strony – np. 25% opuści stronę, jeżeli ta nie załaduje się w ciągu 1 sekundy, 75% w ciągu 5 sekund. Nie ważne są dokładne liczby. Ważne, że faktycznie nikt nie lubi, jeżeli strona wczytuje się w nieskończoność. Nikt nie lubi tego na desktopach i nie widzę powodów, dla których nagle miałby to zacząć tolerować na urządzeniach przenośnych.

slow Czytaj dalej

Responsive Web Design – Narzędzia

Strony mobilne to obecnie jeden z najbardziej dynamicznie rozwijających się trendów w branży. Społeczność internetowa publikuje co chwilę bardzo przydatne darmowe narzędzia, dzięki którym nie praca nad stronami reponsywnymi staje się nieco bardziej prosta. Poniżej lista narzędzi, których my sami często używamy w procesie projektowania stron mobilnych. Z biegiem czasu i w miarę możliwości (jesteśmy zarobieni po sygnety) lista będzie uzupełniana o najciekawsze zasoby. Dla wygody przeglądania, narzędzia zostały pogrupowane w następujące kategorie:

  • Inspiracje
  • Projektowanie
  • Kodowanie
  • Testowanie

 

Czytaj dalej

Projektowanie stron mobilnych w przeglądarce

Projektując strony mobilne dla naszych klientów, natknęliśmy się na kilka problemów, które popchnęły nas do opracowania nowego procesu projektowania z wykorzystaniem podejścia responsive web design. Problemy, o których mowa wynikały głównie z tego, że w projektowaniu responsywnych bardziej chodzi o to jak strona działa – jak zachowuje się na różnych urządzeniach – w jaki sposób użytkownicy „doświadczają” jej na swoich telefonach i tabletach. Kwestia „jak strona wygląda” ma mniejsze chociaż nadal istotne znaczenie – np. kwestia fontów osadzanych na stronie przy pomocy @font-face. Z jednej strony Photoshop nie daje możliwości pokazania w projekcie fontów z serwisów takich jak Typekit, z drugiej: wspomniane fonty renderują się w rozmaity sposób w różnych przeglądarkach, co rodzi kolejne nieporozumienia. Czytaj dalej

Retina, projektowanie i CSS

Wiecie, jak jest. Apple coś wymyśli i wszyscy musimy potem kombinować. Ajpady, nie ajpady, a teraz jeszcze Retina. Pracując ostatnio nad kodowaniem strony dla jednego z naszych klientów, musieliśmy zmierzyć się w końcu (listopad 2012, nie śmiać się) z przystosowaniem strony do wyświetlania na wyświetlaczach Retina.  Wyjaśnijmy sobie pokrótce kilka podstawowych spraw – co to jest retina, jak projekować „pod retinę” i jak zakodować stronę „pod retinę”.

Czytaj dalej

Tabelki na stronach mobilnych

Projektując na potrzeby mobilnych stron www, prędzej czy później natkniesz się na problem tabelek… Co zrobić z danymi prezentowanymi w elemencie <table> – tabelki przeważnie są poziome, część kolumn jest najczęściej ucinana, jeszcze częściej „rozkrzacza” nam cały projekt. Kilka szybkich porad, co można zrobić z tym fantem. Czytaj dalej

Media queries – wszystko co musisz wiedzieć

O tym, że można serwować osobny arkusz stylu CSS w zależności od typu nośnika wszyscy doskonale wiedzą. Możemy na przykład zdefiniować osobny arkusz stylu dla ekranów i osobny dla wydruku (‚screen’ i ‚print’). Media queries pozwalają natomiast używać osobnych arkuszy w zależności od dodatkowych parametrów i uzależnić sposób wyświetlania dokumentu w zależności od np. wysokości, szerokości urządzenia czy stosunku tych dwóch wymiarów. W efekcie możemy przygotować osobny arkusz stylu dla wybranej grupy urządzeń. Czytaj dalej

Projektowanie stron responsywnych

Projektując stronę mobilną mamy do wykorzystania kilka różnych podejść – np. oddzielna strona mobilna lub strona responsywna. Zakładam, że trafiłeś na ten wpis szukając informacji o tym, jak podejść do projektowania stron w technice responsive web design. Dodajmy, że jest to podejście rekomendowane przez Google (wpis na oficjalnym blogu), głównie z tego powodu, że sama treść (dokument HTML) jest identyczna dla innych urządzeń, a wygląd strony jest modyfikowany przy użyciu CSS media queries. Jeżeli interesuje Cię tylko, jak rozpocząć projektowanie stron mobilnych – otworzyć Photoshopa czy Fireworks’a i zacząć projektować – to mam dla Ciebie złe wieści. Po pierwsze – będziesz musiał zrozumieć technologię, po drugie – prezentowanie elastycznych rozwiązań w formie statycznych obrazków to strzał w kolano. Dlaczego? Więcej o tym w dalszej części wpisu. Zakładając jednak, że potrzebujesz „na szybko” przygotować projekt strony mobilnej. Zapoznaj się z podstawami dotyczącymi responsywnych stron internetowych i z „nową” strategią projektowania.

Czytaj dalej

Responsive Web Design – tworzenie stron mobilnych – tutorial

Poniższy tutorial przeznaczony jest głównie dla front-end developerów – z założenia ma być prosty i zawierać będzie tylko esencję dotyczącą kodowania stron mobilnych w technice responsive web design.

O samym pojęciu Responsive Web Design zrobiło się głośno po tym artykule Ethana Marcotte na łamach A List Apart, bardziej szczegółowo ten sposób kodowania został opisany przez tegoż samego autora w książce pod tym samym tytułem.  Cała technika zostaje sprowadzona tutaj do trzech kroków: elastyczna siatka (responsive grid), elastyczne obrazki i filmy video oraz media queries. Omówmy po kolei wszystkie trzy aspekty. Ale jeszcze wcześniej, jedna ważna sprawa, która może Wam zaoszczędzić nieco czasu na dociekaniu „co zrobiłem źle”… Czytaj dalej

Strony mobilne – darmowy szablon Responsive Web Design

Czasy kiedy z Internetu korzystano głównie na komputerach stacjonarnych i laptopach odchodzą powoli w niepamięć. Liczba użytkowników oglądających nasze strony na smartfonach i tabletach wzrasta lawinowo – strony o stałej szerokości stają się trudno dostępne czy wręcz nieczytelne na urządzeniach mobilnych. Jakie mamy możliwości, jeśli chodzi o rozwiązanie tego problemu? Czytaj dalej

Spadek domen regionalnych w Google

W ciągu kilku ostatnich dni zaobserwowaliśmy znaczny spadek pozycji niektórych domen regionalnych w wynikach wyszukiwania Google. Na oficjalnym blogu Google Polska pojawił się wpis potwierdzający działania podjęte przez Google. Jako przyczynę wprowadzenia tej zmiany w algorytmie wyszukiwania Google podaje: Czytaj dalej

Tworzenie stron www – jak współpracować z projektantem

Zdecydowałeś się na wybór projektanta, studia graficznego, agencji interaktywnej (jak zwał, tak zwał), która wykona dla Ciebie witrynę internetową. Aby witryna mogła realizować Twoje cele biznesowe i zachwycać warstwą graficzną niezbędna jest efektywna współpraca pomiędzy klientem a projektantem. Chcielibyśmy zwrócić Twoją uwagę na kilka problemów, które w trakcie tworzenia strony najczęściej pojawiają się  na linii zamawiający-wykonawca. Czytaj dalej

Pozycjonowanie lokalne i mapy Google

Decydując się na rozpoczęcie pozycjonowania warto zastanowić się nad grupą docelową naszego produktu. Duża część usług świadczona jest świadczona na terenie danego regionu, województwa, miasta czy dzielnicy. W przypadku np. restauracji, salonów kosmetycznych czy gabinetów dentystycznych, ciężko spodziewać się klientów z drugiego końca kraju. Jeżeli zatem prowadzisz biznes regionalny to kampania pozycjonowania również powinna być zorientowana na dany region. Czytaj dalej

Nadchodzi Google Panda

Panda to nazwa robocza najnowszego algorytmu odpowiedzialnego za ustalanie rankingu wyszukiwanych stron. Google modyfikuje algorytm wyszukiwania bezustannie, są to jednak zmiany na tyle drobne, że dla większości użytkowników praktycznie niezauważalne. Panda została zapowiedziana jako poważna zmiana, która zatrzęsie rankingami. Cel algorytmu jest bardzo prosty –  eliminacja stron dostarczających treści o niskiej wartości lub treści duplikowanej. Czytaj dalej

Pozycjonowanie stron w Google

Większość użytkowników Internetu rozpoczyna poszukiwanie informacji o produktach, usługach i firmach w wyszukiwarce Google. Większość z szukających przegląda tylko pierwszą stronę wyników. Niezależnie od tego czy dopiero rozpoczynasz prowadzić własną firmę, czy jesteś na rynku od lat, obecność na pierwszych stronach wyników wyszukiwania Google na hasła odnoszące się do Twojej działalności czy produktu jest gwarancją wzrostu liczby klientów.  Zabiegi zmierzające do umieszczenia Twojej strony wysoko w rezultatach wyszukiwarki nazywamy pozycjonowaniem. Czytaj dalej