8 stycznia, 2022

30 szybkie wskazówki, aby Twoja strona wyglądała ładniej

gdy uruchamiamy nowsze projekty, łatwo jest zapomnieć o aktualizacji starszych blogów i stron internetowych. W tym artykule chcę przedstawić 30 solidnych pomysłów, które można szybko wdrożyć, aby Twoja strona była o wiele bardziej przyjazna dla użytkownika. Nie wszystkie z nich są oparte wyłącznie na konstrukcji front-end. Omówię również popularne techniki kodowania HTML5, które mogą pomóc parserom internetowym i pająkom odpowiednio skategoryzować dane.

nie każda strona internetowa będzie musiała być aktualizowana i nie przy każdej technice dostępnej w tym poście. Te pomysły są po to, aby Programiści myśleli o projektowaniu i tym, jak sprawić, by strony internetowe wyglądały ładniej. Teraz łatwiej niż kiedykolwiek wcześniej budować skalowalne, responsywne układy witryn, które dobrze wyglądają na każdym cyfrowym ekranie, więc przejdźmy do rozbudowy naszych witryn.

50 czystych, prostych i minimalistycznych projektów stron internetowych

50 czyste, proste i minimalistyczne projekty stron internetowych

minimalizm zyskał popularność w ciągu ostatnich kilku lat i był jednym z najlepszych trendów w projektowaniu stron internetowych…Czytaj więcej

1. Testowanie UX

jestem winny, że nie zawsze uruchamiam testy na mojej stronie, ale jeśli to możliwe, jest to jedno z moich ulubionych działań. Możesz dowiedzieć się tak wiele o typowych interakcjach użytkowników, badając, jak grają z Twoją witryną. Badania user experience mogą być prowadzone wyłącznie za pomocą narzędzi takich jak Google Analytics lub przy użyciu innych zasobów stron trzecich.

niestandardowy projekt zespołu UX sala konferencyjna

potencjalne korzyści, które można znaleźć, są ogromne. Testy user experience są pomocne dla programistów internetowych, aby dowiedzieć się, które obszary ich witryny są irytujące, zepsute lub można je poprawić. Rozważ Korzystanie nie tylko z narzędzi cyfrowych, ale także z przyjaciół i współpracowników. Słuchanie prawdziwych ludzkich opinii na swojej stronie może dostarczyć wyników, których nie można uzyskać na ekranie komputera.

przydatne narzędzia do testowania użyteczności stron internetowych

przydatne narzędzia do testowania użyteczności internetowej

testowanie użyteczności — znane również jako „testowanie użytkowników” — jest popularną metodologią dla badaczy doświadczeń użytkowników. Tak…Czytaj więcej

2. Spacja

możemy myśleć o spacji jako o ilości miejsca między elementami na twojej stronie. Niektórzy użytkownicy nie będą mieli nic przeciwko ciasnemu układowi, jeśli są już do tego przyzwyczajeni. Ale rozważ swoją grupę docelową i zastanów się, ilu z nich nie zna się na komputerach tak dobrze jak młodsze pokolenie.

możesz określić obszary, które wymagają dodatkowych odstępów poprzez testy split A/B i zachowując opinie użytkowników. Albo po prostu skrzydłem i zobaczyć, co można wymyślić!

50 czystych, prostych i minimalistycznych projektów stron internetowych

50 czyste, proste i minimalistyczne projekty stron internetowych

minimalizm zyskał popularność w ciągu ostatnich kilku lat i był jednym z najlepszych trendów w projektowaniu stron internetowych…Czytaj więcej

3. Czcionki internetowe

dynamiczne czcionki internetowe umożliwiają projektantom tworzenie stron internetowych bez ograniczania się do typowych rodzin czcionek. Trend ten staje się coraz bardziej popularny, ponieważ większość przeciętnych użytkowników Internetu korzysta z przyzwoitego połączenia DSL / T1 / światłowodowego. Dołączenie odniesień do arkuszy stylów czcionek innych firm nie spowoduje większych opóźnień w prędkościach DL.

Google Web Fonts Strona główna podgląd zrzutu ekranu

całkiem możliwe, że najlepszym dostawcą czcionek jest Google Webfonts. Możesz uzyskać dostęp do aplikacji, nawet jeśli nie masz konta Google, chociaż istnieją korzyści z rejestracji. Pełny proces konfiguracji zajmuje tylko 3 kroki i możesz mieć niestandardowe czcionki Google uruchomione na swojej stronie w ciągu kilku minut.

100 darmowych czcionek do użytku komercyjnego i osobistego

100 darmowe czcionki do użytku komercyjnego i osobistego

za każdym razem, gdy projektant rozpoczyna pracę nad nowym projektem, zawsze pojawia się duży problem: brak…Czytaj więcej

4. Cienie CSS3

Kiedy mówię o używaniu cieni do poprawy układu, odwołuję się do dwóch różnych właściwości. Zawsze popularny box-shadow jest naprawdę fajny dla divów i pudełek w twoim układzie. Dołączenie tego efektu do pojemnika, opakowania lub wewnętrznych pudełek na strony zapewni wyszczuplający efekt 3D na twojej stronie internetowej.

10 technik kreatywnych z wykorzystaniem cienia CSS3 Box

10 techniki kreatywne przy użyciu CSS3 Box Shadow

w ciągu ostatnich kilku lat widzieliśmy ogromną liczbę postępów w tworzeniu stron internetowych CSS3….Czytaj więcej

ale warto również rozważyć właściwość CSS3 text-shadow dla typografii, która wyskakuje ze strony. Apple jest jedną z pierwszych firm, które intensywnie wdrażają cienie tekstowe wokół swojego układu. Możesz zbudować zniechęcający efekt, dodając cienie tekstu, które są przeciwstawne do koloru czcionek (białe cienie dla ciemnego tekstu, czarne cienie dla jasnego tekstu).

5. Tekstury & powtarzające się wzory

istnieje wiele stron internetowych, które można uzyskać za pomocą standardowych schematów kolorów. Ale aby Twoja strona naprawdę wyróżniała się z tłumu, możesz rozważyć dodanie tekstur i powtarzanie kafelków w tle. Jedną z najfajniejszych darmowych aplikacji internetowych jest generator tekstur szumów, który można uruchomić w dowolnej przeglądarce.

subtelne wzory layout website design miniatury

wystarczy wybrać kolor BG i ilość szumów, których chcesz użyć, a następnie ta aplikacja dynamicznie utworzy kafelkowy obraz tła. Jeśli szukasz wzorów i płytek to polecam subtelne wzory. Mają ogromną kolekcję użytecznych tekstur, które można pobrać za darmo.

20 samouczków wzorów dla płynnego powtarzania tła

20 samouczki wzorków dla płynnego powtarzania tła

różne projekty graficzne i internetowe wymagają różnych elementów projektu, a wzory to tylko jeden z nich. Oni…Czytaj więcej

6. Tła gradientowe CSS3

podczas gdy omawiamy tła, powinienem przywołać coraz popularniejsze gradienty CSS3. Zapewniają one programistom sieci Web ogromne korzyści, uniemożliwiając im dostęp do Adobe Photoshop dla środowisk internetowych. Te gradienty mogą pracować nie tylko na ciele, ale również na paskach nawigacyjnych, stopkach i innych ważnych obszarach układu.

gradienty liniowe CSS3

gradienty liniowe CSS3

Gradient to świetny dodatek do funkcji kolorów w CSS3. Zamiast dodawać tylko jeden kolor, możemy…Czytaj więcej

7. Boostrap

Bootstrap Twittera jest prawdopodobnie najlepszym frameworkiem interfejsu użytkownika dla programistów internetowych. Obejmuje to przyciski, wejścia formularza, łącza, kolumny i mnóstwo innych wstępnie sformatowanych obiektów strony. Najczęstszym zastosowaniem Bootstrap jest Strony docelowe dla nowych aplikacji.

ale programiści open source również wykorzystują Bootstrap podczas tworzenia stron demonstracyjnych dla bibliotek, wtyczek lub mini skryptów, które publikują.

Twitter Bootstrap zrzut ekranu wpisu Github

czuję, że Bootstrap rozrósł się do tak ogromnego stopnia, że może być stosowany w każdej witrynie w dzisiejszych czasach. Jednak programiści, którzy znajdują największe korzyści, używają Bootstrap jako szybkiego zamiennika dla rozwijania własnych projektów interfejsu użytkownika. Rozważ tę bibliotekę frontend przy następnym uruchomieniu strony internetowej o jednym konkretnym celu: stronie docelowej, wersji demonstracyjnej produktu, stronie aplikacji mobilnej itp.

podobne:

  • pierwsze kroki z Twitter Bootstrap
  • Bootstrap 201: Wtyczka okna modalnego

8. HTML5 Kickstart

większość programistów nie słyszała jeszcze O HTML5 Kickstart stworzonym przez 99lime. Jest to kolejna biblioteka interfejsu użytkownika, która koncentruje się bardziej na ładnej estetyce projektu niż zwykłe układy HTML5. Ale istnieją próbki kodu do generowania zarówno w pikach. Możesz wybierać spośród zestawów wstępnie określonych elementów, takich jak przyciski gradientu i rozwijane menu. Nie powiedziałbym, że ma taką samą popularność jak Bootstrap, ale z drugiej strony, co ma?

HTML5 Kickstart 99lime Strona domowa zrzut ekranu open source

jeśli masz czas i cierpliwość, polecam po prostu dać tej bibliotece szybki test. Zbuduj mały układ piaskownicy i sprawdź, czy podoba Ci się domyślne wyczucie każdego elementu interfejsu. Kickstart z pewnością nie jest przeznaczony dla każdego projektu, ale może znacznie zaoszczędzić czas, gdy zostanie złapany w Wiązanie.

9. jQuery UI

animacje i suwaki oraz zanikające elementy są zwykle uruchamiane poza biblioteką jQuery. Jest to najpopularniejsza biblioteka JavaScript open source dla programistów frontend, ale ma również bibliotekę towarzyszącą jQuery UI. Deweloperzy przeoczyć to, myśląc, że nie może zapewnić bardzo wiele w zamian za dodatkowe KB.

ale w tym biblioteka UI oznacza, że możesz zaktualizować wywołanie easing dla dowolnych dynamicznych animacji strony. Oznacza to, że możesz dostosować typ animacji jQuery do dowolnych rozwijanych menu, zanikających elementów, przewijanych pokazów slajdów i wszystkiego innego dynamicznego.

strona jQueryUI ma łatwą stronę demonstracyjną, na której możesz przetestować wiele odmian i sprawdzić, czy lubisz konkretne typy animacji.

podobne:

  • jak stylizować Akordeon jQuery UI
  • kontroler głośności z suwakiem jQuery UI
  • Dostosowywanie i motywowanie jQuery UI Datepicker
  • przeciągnij i upuść z jQuery UI sortowalny

10. Ekstrawaganckie zdjęcia BG

istnieje obecnie niezliczona ilość stron internetowych, które wykorzystały efekt pełnoekranowego obrazu tła. Jeśli możesz znaleźć próbkę zdjęcia o wysokiej rozdzielczości, która będzie dobrze wyglądać jako obraz tła,technika ta może być warta dodania do układu. Duże tła doskonale przykuwają uwagę użytkownika, jednocześnie sugerując gatunek Twojej witryny.

jQuery Backstretch plugin Strona główna zrzut ekranu

Jeśli szukasz szybkiego rozwiązania, sprawdź wtyczkę jQuery Backstretch. Wymaga to tylko jednej linii kodu, aby nowe tła mogły prawidłowo skalować i reagować przy użyciu dowolnej rozdzielczości. Ale dla programistów, którzy są przeciwko metodom JavaScript polecam technikę CSS3 fullpage image zamieszczoną na CSS-Tricks.

duże obrazy tła w projektowaniu stron internetowych: wskazówki i przykłady

duże obrazy tła w projektowaniu stron internetowych: porady i przykłady

w tym artykule chcę połączyć kilka solidnych technik budowania dużych, ponadgabarytowych obrazów tła….Czytaj więcej

11. Ikony Menu

aby przyciągnąć większą uwagę odwiedzających, warto umieścić na swojej stronie mały zestaw ikon. Standardowe łącza menu są często wystarczające do prawidłowego działania i ułatwiają użytkownikom poruszanie się między stronami.

jednak często jestem pod wrażeniem, aby zobaczyć dostosowane ikony zaprojektowane dla każdego linku menu. Możesz znaleźć mnóstwo darmowych zestawów ikon, które wyglądałyby idealnie w górnej nawigacji, pasku bocznym lub stopce.

12. Zaktualizowany schemat kolorów

nie mam na myśli zmiany ogólnego projektu schematu kolorów, ale raczej dodawanie do niego nowych kolorów. Po uruchomieniu tego samego układu przez miesiące po miesiącach miło jest aktualizować mniejsze obszary i zaskoczyć powtarzających się odwiedzających.

niektóre interesujące elementy mogą zawierać łącza zakotwiczenia, nagłówki, tła i paski narzędzi. Rozważ użycie narzędzi online, takich jak projektant schematów kolorów, aby poprawić swoją trajektorię.

zaktualizowany świeży wygląd koła kolorów picker scheme webapp
Podstawy teorii kolorów dla projektanta stron internetowych

Podstawy teorii koloru dla projektanta stron internetowych

jako kolektywny artysta cyfrowy ważne jest, aby zrozumieć podstawową naukę stojącą za teorią koloru. To … ..Czytaj więcej

13. Ulepszona obsługa przeglądarki

trudno jest zbudować stronę internetową, która jest w pełni obsługiwana przez wszystkie główne starsze przeglądarki. Chociaż bardzo niewiele osób korzysta z Internet Explorer 6, nadal pojawia się w kilku moich raportach Google Analytics. Programiści, którzy szukają pomysłów, mogą rozważyć wykonanie małej próby testów przeglądarki.

program IETester debugowanie układów Internet Explorer

do ważniejszych przeglądarek głównego nurtu należą najnowsze wydanie IE9, Mozilla Firefox, Opera, Chrome, Safari i prawdopodobnie Camino/SeaMonkey. Ale Internet Explorer 6-8 są nadal szeroko stosowane wśród firm i starszych laboratoriów komputerowych. Możesz uruchomić szybkie testy renderowania za pomocą oprogramowania IETester. Podobnie IE8 ma tryb narzędzi programistycznych, w którym można przełączać się na starsze silniki renderujące w celu debugowania.

14. Dopasowana Typografia

może się okazać, że twoje stare układy nadal efektywnie wykorzystują style tekstu, ale nie zawsze tak jest. Mam wrażenie, że duża typografia znacznie łatwiej wpasuje się w układy. Nie wspominając o tym, że jest łatwiejszy do odczytania i zajmie więcej miejsca na większych rozdzielczościach ekranu.

ideą „dopasowanej typografii” jest stylizowanie tekstu tak, aby pasował do twojej strony. Możesz przejść przez kilka stron i zaktualizować te style w ciągu 10-15 minut.

prezentacja projektów stron internetowych z piękną typografią

prezentacja projektów internetowych z piękną typografią

Typografia, będąca sztuką pisania w designie, jest niewątpliwie jednym z najistotniejszych elementów…Czytaj więcej

15. Udostępnianie w mediach społecznościowych

jestem pewien, że większość programistów zna odznaki udostępniania używane w popularnych serwisach społecznościowych. Facebook, Twitter, Reddit, Pinterest, Dzone i wiele innych sieci zewnętrznych zapewniają kody, które można osadzić w swojej witrynie. Następnie odwiedzający mogą udostępniać Twój link do tych sieci bez konieczności opuszczania witryny.

na niektórych blogach lub czasopismach internetowych zauważysz, że te odznaki podążają za tobą przewijając stronę w dół. Jest to doskonała technika, ponieważ często możesz mieć je unoszące się tuż poza obszarem ciała, gdzie nie blokują żadnej ważnej treści. Polecam również przeglądanie naszego postu na paskach narzędzi mediów społecznościowych, które mogą mieć podobny efekt.

16. Dyskusja użytkowników

jeśli korzystasz z CMS ’ a, takiego jak WordPress lub Drupal, masz możliwość domyślnie dołączania formularzy komentarzy. Jednak podczas tworzenia statycznych stron internetowych musisz skonfigurować własny system baz danych, aby naśladować tę funkcjonalność. Ale wraz ze wzrostem technologii open source programiści mogą teraz wdrażać lepsze rozwiązania, takie jak Disqus.

system komentarzy Disqus Strona główna zrzut ekranu

korzystając z tej metody nie masz ciągle do czynienia z usuwaniem spamu i śmieci z obszaru dyskusji. Użytkownicy, którzy nie mają jeszcze konta Disqus, mogą szybko połączyć się za pomocą popularnych profili społecznościowych lub zarejestrować się bezpośrednio ze strony. Nawet użytkownicy WordPress, którzy mają dość Akismet, mogą przełączać się za pomocą wtyczki systemu komentarzy Disqus.

Top 3rd Party Commenting Systems-Recenzja

Top 3rd Party Systemy komentowania-Recenzja

ewolucja opinii i komentowania online przeszła długą drogę; od starej szkolnej księgi gości do…Czytaj więcej

17. Poszerz obszar stopki

Większość mniejszych Układów Stron będzie bardzo konserwatywna z dolną sekcją stopki. Może to obejmować kilka podstawowych informacji o prawach autorskich i kilka linków do strony głównej. Ale nowoczesne trendy w projektowaniu stron internetowych wspierają ideę dużych stopek z dużą ilością linków meta.

te są powszechnie postrzegane w startupach i dużych firmach stron internetowych z dużą ilością dodatkowych informacji. Z pewnością nie próbuj zmuszać tego do układu, w którym nie należy, jednak warto zastanowić się, czy otwarcie większego obszaru stopki może poprawić wrażenia z witryny.

18. Obrazy responsywne

dynamiczne, płynne i responsywne obrazy stron internetowych same w sobie stały się trendem. Teraz jest prawie niedorzeczne, aby nadal mieć obrazy ustawione na stałej szerokości, wyłamując się z opakowania kontenera, gdy okna są zmieniane. Najczęstszą techniką jest zastosowanie width: 100% przy użyciu CSS na wszystkich elementach img.

Responsive Image Plugin jQuery open source Pobierz

ale możesz również rozważyć inne metody open source, które mogą okazać się przydatne w wiązaniu. ResponsiveImg to jedna z takich wtyczek jQuery o bardzo małym rozmiarze pliku. Po prostu dołącz to do swojej strony i uruchom kod jednowierszowy skierowany na wszystkie obrazy na stronie. Jest to doskonały dodatek do układów mobilnych, które nadal korzystają z treści opartych na pulpicie.

19. Dostępność Menu

nie powiedziałbym, że jest to coś, co powinieneś ciągle próbować aktualizować w swoich układach, ale jest to coś, co programiści i projektanci nie robią dobrze za pierwszym razem. Uważam, że warto spojrzeć wstecz na swoje systemy nawigacji i burzę mózgów, jeśli są jakieś lepsze sposoby na implementację linków do podmenu.

paski boczne i obszary zawartości często zawierają menu akordeonu, ponieważ w pionie jest wystarczająco dużo miejsca. Ale pomyśl o poziomych paskach nawigacyjnych z rozwijanymi menu lub przesuwanymi pod-menu. Tak długo, jak linki do menu są szybkie i łatwe do uzyskania, nie powinno być żadnych problemów w Twojej bazie użytkowników.

kodowanie wdzięcznego menu nawigacyjnego w CSS3

kodowanie pełnego wdzięku menu nawigacyjnego w CSS3

menu nawigacyjne i linki są prawdopodobnie najważniejszymi elementami interfejsu dla układu strony internetowej. Są to..Czytaj więcej

20. Mikroformaty semantyczne/mikrodane

mikroformaty i nowsza Specyfikacja mikrodanych są używane do rozszerzania metadanych wewnątrz kodu HTML. Atrybuty te dostarczają dodatkowych informacji na temat Treści Użytkownika i ich związku z innymi treściami na stronie. Ostatecznie wyniki te pomagają Google określić pozycję witryny dla poszczególnych słów kluczowych oraz w innych silnikach, takich jak wyszukiwanie obrazów i filmów.

mikroformaty Strona główna dokumentacja układ strony

najbardziej wspierana udokumentowana wersja mikrodanych nazywa się Schema.org. ich strona internetowa zawiera wszystkie informacje, których potrzebujesz, aby wrócić i edytować zawartość HTML za pomocą znaczników schematu semantycznego. Składnia tego schematu jest wspierana i wspierana przez wszystkie główne wyszukiwarki i prawdopodobnie ewoluuje w przyszłość projektowania semantycznych metadanych.

21. Przestawianie linków nawigacyjnych

w przypadku niektórych witryn uruchamianie nawigacji po stałej zawartości może nie być prawdziwym problemem. Ale znalazłem w niektórych większych witryn biznesowych lub portfolio, że niektóre linki nawigacyjne mają zbyt duży priorytet. I podobnie jest z niektórymi przedmiotami, które rzadko można znaleźć! Poświęć trochę czasu na przeglądanie swojej witryny i zachowuj się tak, jakbyś był innym odwiedzającym.

zastanów się, które linki Cię najbardziej interesują i ewentualnie jakie linki chciałbyś dodać. Mogą one obejmować krótką historię witryny, Informacje o zespole, dane kontaktowe, obawy dotyczące prywatności, komunikaty prasowe itp. Może również pomóc w zbieraniu opinii użytkowników i sprawdzaniu, czy istnieją korelacje między ich życzeniami a zapotrzebowaniem na nowe lub zaktualizowane strony.

22. Wróć do góry Link

jeśli Twoja strona publikuje bardzo długie strony treści, Jest to niezbędny element w twoim układzie. Przewijanie z powrotem do góry linki można znaleźć prawie wszędzie te dni. Użytkownicy nie myślą, aby nacisnąć klawisz Home i może to być irytujące przewijanie do góry. Najlepszą lokalizacją dla tego linku jest pływający obok kontenera lub umieszczony bezpośrednio w stopce, jak zaimplementowaliśmy na Hongkiat.

 hongkiat układ strony stopka powrót do góry link

23. Dostosowywanie kodu / znaczników wstępnych

podczas tworzenia arkusza stylów witryny wielu programistów pominie typowe elementy strony. Nagłówki i akapity są bardzo powszechne, ale co ze znacznikami wstępnymi lub znacznikami kodu wbudowanego? Są one używane do hermetyzacji preformatowanej składni kodu źródłowego, jak można zobaczyć w pliku tekstowym/NFO. Niektóre strony internetowe nie potrzebują tych elementów, ale nadal uważa się, że jest to dobra praktyka, aby je stylizować na wszelki wypadek.

24. Dodawanie atrybutów szerokości/wysokości obrazu

teraz to zadanie może zająć trochę czasu, w zależności od tego, ile obrazów trzeba będzie przejść. Ale jeśli znajdziesz zdjęcia w swojej witrynie bez określonej szerokości / wysokości, może warto je zaktualizować.

zazwyczaj obrazy pozbawione tych atrybutów będą wyświetlane jako kwadrat 1×1 px przed załadowaniem w całości. Spowoduje to, że strony internetowe i pasek przewijania będą skakać w miarę ładowania nowych obrazów. Ponownie nie będzie to pomocne dla wszystkich, ale warto zauważyć, jako szybki utrwalacz w niektórych przypadkach. Nadal istnieją techniki CSS dla responsywnych obrazów wykorzystujących stałe atrybuty.

25. Powiadomienia JavaScript

każdy programista, który pracował w JavaScript, wie o typowych oknach dialogowych. Możesz skonfigurować okno alertu, które oferuje użytkownikowi przycisk OK, tylko wyświetlając informacje. Ale istnieją również alerty potwierdzające z przyciskami tak / nie wraz z polem monitu, które prosi o wprowadzenie użytkownika.

kody open source JS JavaScript library

wszystkie te kody można dostosować za pomocą alertify.js. Jest to bardzo mała biblioteka open source do projektowania własnych frontend Alert boxes. Jest bardzo szybki w konfiguracji i łatwy do dostosowania, jeśli chcesz dopasować własne style CSS.

26. Responsive Media Queries

to może nie wydawać się szybkim fragmentem kodu do dodania, jednak tak naprawdę nie zajmuje dużo czasu. Zapytania responsywne można dodawać do istniejącego arkusza stylów lub dodawać do nowego responsywnego.dokument css. Tak czy inaczej, możesz szybko skonfigurować powtarzające się style do obsługi różnych rozmiarów wyświetlaczy z monitorów, tabletów i smartfonów.

ciemny iPhone 4s Mobile safari responsywny układ strony internetowej

zapytania responsywne nie zawsze muszą w pełni odpowiadać na twój układ. Czasami mogą one po prostu ukryć fragmenty zawartości, takie jak wydłużony pasek boczny lub większa stopka. Następnie możesz wyświetlić w pełni responsywną mini stopkę, która jest pierwotnie ukryta w układzie pulpitu. Więcej informacji na temat zapytań o media można znaleźć w naszej kolekcji responsywnych samouczków internetowych.

27. Linki partnerskie

zawsze będą podobne strony internetowe online budujące treści związane z Twoją dziedziną. Bardzo rzadko powstają nowe pomysły; większość z nich to odgałęzienia i parodie z istniejących treści. Ale zamiast przekształcać sieć w konkurencję, dlaczego nie stworzyć przyjaznej atmosfery? Jeśli masz dodatkowe miejsce w układzie wysłać kilka e-maili do powiązanych stron internetowych w swojej niszy (szukaj Google) z prośbą o partnera.

możesz wymieniać linki i pomagać sobie nawzajem. Dzięki temu nowi użytkownicy mogą szybciej znaleźć Twoją witrynę i zobaczyć, że jesteś częścią społeczności innych witryn. Plus zdobywanie linków zwrotnych z witryn z autorytetem w Google może tylko pomóc w wiarygodności Twojej domeny.

28. Czcionki oparte na ikonach

ostatnio czytałem artykuł na temat 24ways, który omawiał czcionki ikon i atrybuty danych. To dało mi do myślenia o przyszłości projektowania stron internetowych i jak HTML/CSS dramatycznie wpłynął na kodowanie frontend. Czcionki oparte na ikonach są idealne z wielu powodów, w tym menu nawigacji, uporządkowanych/nieuporządkowanych list, a nawet podstawowej zawartości strony.

czcionki ikona są niesamowite artykuł CSS-sztuczki stronie internetowej

wiele z tych czcionek można szybko dodać do witryny za pomocą @font-face. Oznacza to, że nie musisz polegać na usłudze innej firmy, takiej jak Typekit, aby hostować swoje czcionki. Oznacza to również bardziej semantyczny styl projektowania, a nie tylko używanie ikon PNG.

29. Cienie pola obrazów

jeśli chcesz utrzymać odwiedzających na swojej stronie dłużej, musisz zaoferować prawdziwą jakość treści. Może to już mieć miejsce w przypadku twojej witryny, jednak jeśli Twoje style są mdłe, ludzie będą szukać gdzie indziej. Atmosfera i estetyka są ogromne w dobrym projektowaniu stron internetowych.

polecam budowanie szybkiej klasy obrazu, która owija ramkę wokół obrazów strony. Może to obejmować mały cień pudełka wraz z obramowaniami i wyściółką. Wszystko, co pomoże Twoim obrazom wyskoczyć z ekranu i wyróżnić się w akapitach tekstu.

10 technik kreatywnych z wykorzystaniem cienia CSS3 Box

10 techniki kreatywne przy użyciu CSS3 Box Shadow

w ciągu ostatnich kilku lat widzieliśmy ogromną liczbę postępów w tworzeniu stron internetowych CSS3….Czytaj więcej

30. Alternatywne arkusze stylów

weź pod uwagę wszystkie różne style multimedialne, które musisz uwzględnić podczas tworzenia pojedynczego układu strony internetowej. Musiałoby to dobrze wyglądać na monitorach stacjonarnych, laptopach, tabletach, a nawet smartfonach. I nie zapomnij o projekcji i nośnikach drukowanych, które nie zawsze są obsługiwane.

jeśli masz dużą publiczność, która korzysta z tych niejasnych rodzajów mediów, polecam stylizację własnych alternatywnych arkuszy stylów. Można je oznaczyć na podstawie typu nośnika, takiego jak druk.css lub dodane do istniejących arkuszy stylów. Jeśli jest wystarczająco dużo popytu, twoi goście będą dozgonnie wdzięczni. I szczerze mówiąc, edytowanie domyślnego układu strony internetowej dla zwykłych drukarek nie zajmuje dużo czasu.

myśli końcowe

kreatywni projektanci, a zwłaszcza Programiści frontend, miejmy nadzieję, że znajdą wśród tej listy kilka przydatnych technik. Większość z tych pomysłów nie powinna trwać dłużej niż 1-2 godziny, podczas gdy wiele z nich można zrealizować w zaledwie 15-30 minut.

ponowne ocenianie układów witryny i aktualizowanie o nowe trendy od czasu do czasu jest często dobrym pomysłem, szczególnie w przypadku nowszych wersji właściwości CSS3, które umożliwiają natywne cienie przeglądarki, animacje i zaokrąglone rogi. Jest to doskonały zbiór pomysłów, które warto rzucić okiem, jeśli potrzebujesz szybkich aktualizacji.

dodatkowo, Jeśli masz pytania lub pomysły dotyczące artykułu, podziel się z nami w obszarze dyskusji poście.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.