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 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.
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 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 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.
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 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 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.
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 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
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ą.
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?
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.
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: 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ę.
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.
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 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.
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 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.
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 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.
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.
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.
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.
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.
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 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.