Podejścia projektowe do witryn internetowych wydawców

Co to jest „witryna internetowa wydawcy cyfrowego”? To strona internetowa, która codziennie koncentruje się na publikowaniu wielu artykułów. To poziom wyżej niż „blog”. Jest to w zasadzie witryna z wiadomościami lub wirusowa platforma publikacyjna, taka jak BuzzFeed.

Istnieje różnica w podejściu do projektowania takiej witryny internetowej w porównaniu do sprzedaży produktów, blogu biznesowego, osobistego lub innego rodzaju witryny internetowej. Jego układ jest często nazywany stylem „Magazynu”, który jest również dość mocno nasyconą kategorią na targowiskach tematycznych.

Co wyróżnia witrynę internetową wydawcy?

Istnieją dwie główne różnice między witryną wydawcy a bardziej regularną.

Pierwszą oczywistą jest ilość treści. Teraz oczywiście istnieją ogromne witryny internetowe, zwłaszcza te zajmujące się handlem elektronicznym, takie jak Amazon czy eBay, które najprawdopodobniej mają znacznie więcej treści, ale są to platformy, które pobierają treści od użytkowników witryny. Wydawcy mają zespoły redakcyjne, które pracują w pełnym wymiarze godzin, aby tworzyć treści zgodnie z harmonogramem. Tak jak w gazecie.

Inną istotną różnicą jest źródło dochodu. Witryna firmowa, taka jak Coca Cola, nie generuje dochodów z witryny , ale pochodzi z jej produktów. Większość witryn firmowych służy po prostu jako obecność cyfrowa.

Wiedząc o tym, jest prawdopodobnie oczywiste, że dochód wydawcy pochodzi z samej witryny. W jaki sposób? Reklamy! To mniej więcej sposób, w jaki Google lub Facebook generują większość swoich dochodów.

Reklamy najczęściej działają w sieci i są głównym priorytetem wielu witryn. Ich treść koncentruje się na przyciągnięciu jak największej liczby czytelników, aby mogli zobaczyć reklamy w swoich układach.

Z punktu widzenia projektowania jest to główny priorytet witryn wydawców i magazynów.

Projektowanie witryn internetowych z dużą ilością treści

Przyjrzyjmy się niektórym dużym wydawcom, takim jak Variety:

Pierwszą rzeczą, którą widać, jest duża reklama na górze. Za chwilę przyjrzymy się temu dokładniej, a wcześniej - układowi treści. Duży nagłówek z wieloma linkami - hamburger na górze, wyszukiwanie, wezwanie do akcji, a potem jeszcze więcej pozycji menu. Celem jest zapewnienie łatwego dostępu do wszystkich kategorii treści. Kontrastuje to z wieloma witrynami biznesowymi, które mają mniej niż 10 stron (z wyłączeniem blogów).

Potem - duże pudełko na główny artykuł. To dobra decyzja projektowa. Dzięki temu odwiedzający mogą łatwiej zdecydować, co mają robić. Jeśli istnieje 10 równie ważnych elementów, wysiłek psychiczny związany z wyborem jednego z nich może spowodować, że niektórzy użytkownicy odejdą od strony. Dzięki przejrzystej wizualnej hierarchii elementów ważnych i mniej ważnych, projektant może sprawić, że użytkownicy zostaną dłużej na stronie internetowej.

Po prawej - kolejna reklama i widżet „Najpopularniejszy”, czyli dokładnie to, co większość użytkowników chciałaby widzieć. Aby zmieścić się w tak dużej ilości treści, Variety zdecydowało się umieścić je w przewijanym obszarze.

Jest to typ układu, który najczęściej byłby używany w przypadku większych wydawców.

BuzzFeed to kolejny przykład układu, który jest przystosowany do pracy z większą ilością tekstu. Tutaj jednak projekt jest bardziej zabawny z żywymi kolorami i przyciągającymi uwagę kształtami (takimi jak trzy przyciski w prawym górnym rogu).

Jest więcej „rankingów”, takich jak 1, 2, 3 w sekcji Trendy po prawej stronie, jasnoczerwona etykieta „Najświeższe wiadomości” i tak dalej. Jednym z głównych trendów w podobnym projekcie jest zwrócenie uwagi użytkownika. Ta uwaga musi być jednak dobrze ukierunkowana, ponieważ nie chciałbyś podzielić jej na dwa równie ważne elementy.

Oto przykład złego podejścia, w którym wszystko stara się być na szczycie:

Doskonale zdajemy sobie sprawę, że cel jest zupełnie inny, a powyższa strona może w rzeczywistości przynieść spory zysk, ale dobrze ilustruje zasadę „wszystko, co ma na celu zwrócenie Twojej uwagi”

Wydawcy cyfrowe i reklama

Projektowanie wokół reklamy to kolejny ważny temat dla wydawców. Biorąc pod uwagę, że jest to główne źródło dochodu, jest to również priorytet. Jest kilka rzeczy, które projektant powinien wziąć pod uwagę. Pierwszą z nich jest uzyskanie opinii lub dobrych informacji od zespołu AdOps, który dobrze rozumie wymagania i funkcjonalność tych reklam.

Przykładami tego są rozmiary reklam. Jest 300 × 250, 300 × 600, jest 728 × 90 oraz 300 × 50.

• Niektórzy mogą trzymać się jednej strony ekranu, gdzie można przewijać różne punkty
• Niektórzy mogą pozostać we własnym małym kącie, inni zawsze przyklejaliby się do góry strony.
• Inne pojawią się w parach po dwa 300 × 250 lub jeden 720x90px.

Skąd wiesz o tym wszystkim i jakie są wymagania?

Więc tak, pierwszym krokiem byłoby zebranie wszystkich tych informacji. Łatwiej się temu przyjrzeć, korzystając z układów. Pojedynczy post może mieć wiele układów w zależności od celów wydawcy. Czasami jest mniej reklam, czasami jest ich więcej. Czasami reklamy zmieniają rozmiar dla różnych obciążeń, innym razem pozostają stałe. Wszystko może się jednak szybko zmienić, gdy pojawią się nowe trendy i zasady. Często na co dzień!

Oto kilka ważnych rzeczy, o których należy pamiętać:

• Reklamy o wysokości mogą się załadować. Oznacza to, że treść zostanie przesunięta w dół, a projekt dopasowany do określonego widżetu powyżej części strony widocznej na ekranie nie powiedzie się.
• Reklamy mogą wymagać tła. Może to być jasnoszare tło otaczające reklamę, dotykające rogów ekranu.
• Reklamy często wymagają odstępów wokół siebie, aby uniknąć przypadkowego dotknięcia. 20-30 pikseli to dobra odległość między reklamami.
• Chcesz dodać etykietę „Reklama” przed / po, aby bardziej przyciągnąć dostawców reklam.
• Nie powinno być zbyt wielu reklam! Najlepszym miejscem do tego jest to, co zespół AdOps pracowałby nad znalezieniem konkretnego wydawcy, określonej strony, a nawet określonego ruchu (takiego jak Facebook, Snapchat itp.)

Wydajność witryny internetowej wydawcy

Głównym czynnikiem przyczyniającym się do złej wydajności są konfiguracje z ponad 8 reklamami próbującymi załadować się tonami innych skryptów. Dlaczego jest to problem projektanta, skoro wszystko jest w kodzie? Czy programiści nie mogą go po prostu zoptymalizować? Cóż, tak, ale jest to samodzielna praca prawie na pełny etat, w której projektant mógłby pomóc. Aby to wszystko zrozumieć, musisz najpierw trochę zrozumieć o przeglądarkach

Źródło

Przeglądarki mogą wykorzystywać procesor lub GPU maszyny w zależności od sposobu kodowania określonego elementu przez programistę front-end. Czasami czynności takie jak animacje i interakcje po najechaniu kursorem na prasę wykorzystywały procesor lub GPU. Jeśli na przykład animacja wykorzystuje procesor, jest całkiem prawdopodobne, że wystąpiłoby opóźnienie, jeśli jest to GPU, możliwe jest uzyskanie lepszej wydajności. Wymagania projektanta mogą być różnicą między nimi.

Oto kilka ogólnych wskazówek:

• Używaj niewielkich lub żadnych cieni. Renderowanie cieni jest bardzo drogie, zwłaszcza na słabszych urządzeniach mobilnych i laptopach.
• Nie używaj filtrów tła ani rozmyć (ani żadnych filtrów), ponieważ są one również bardzo drogie.
• Utrzymuj kształty tak proste, jak to tylko możliwe, aby zmniejszyć dodatkowe przetwarzanie.
• Nie żądaj animacji elementów, które mają wpływ na układ (inne elementy). Projektuj wokół tego jak najwięcej. Lepszym wyborem jest wszystko, co się nakłada lub jest wyskakującym okienkiem.
• Obrazy powinny być stosunkowo małe. Umożliwiłoby to programistom ładowanie obrazów o mniejszych rozmiarach, co pozwoliłoby zaoszczędzić na wadze w witrynie.
• Generalnie ogranicz animacje do minimum, zwłaszcza podczas ładowania witryny. To samo dotyczy przesunięć układu. Pierwsze ładowanie to czas, w którym witryna internetowa zużywa najwięcej procesora, gdy jest stosowany cały JavaScript.

Źródło

Priorytet projektu

Większość ruchu w witrynach wydawców pochodzi z urządzeń mobilnych. Dlatego czas spędzony najbardziej na dopracowaniu wszystkich detali powinien tam spędzić. Również w przypadku urządzeń mobilnych potrzebna jest większość optymalizacji, ponieważ większość urządzeń nie jest flagowymi produktami z wyższej półki, ale smartfonami o wartości 200-300 USD.

W przypadku urządzeń mobilnych skupiasz się na czytelności treści, jednocześnie prezentując reklamy w przejrzysty sposób. Zachowaj dużą odległość między dowolnym klikalnym elementem a reklamami, aby usunąć wszelkie przypadkowe kliknięcia reklam. Jeśli to możliwe, ogranicz wszelkie animacje i nakładki, które mogą sprawić, że witryna będzie mniej zgryźliwa.

Podsumowanie

Wydawcy koncentrują się na dużej ilości treści i wielu reklam. Ogólnie strony docelowe i archiwa mają mniejszy priorytet niż pojedyncze wyświetlenia, ponieważ ruch często trafia bezpośrednio do artykułów z innych reklam. Jako projektant koncentrujesz się na znalezieniu najbardziej optymalnego sposobu wyświetlania reklam, dodaniu odpowiednich odstępów i dobrym oddzieleniu ich od głównej treści, aby wszystko było czytelne i użyteczne.

Ogranicz do minimum skomplikowane elementy interfejsu użytkownika, aby poprawić szybkość i żądać jak najmniejszej liczby animacji. Aby wszystko dobrze opisać, wydawcy często muszą współpracować z agencjami programistycznymi, które mają dobre doświadczenia z AdOps, śledzą najnowsze trendy i stosy technologiczne w branży, takie jak DevriX.