Webbdesigners guide till Tumblr

Författare: Louise Ward
Skapelsedatum: 11 Februari 2021
Uppdatera Datum: 18 Maj 2024
Anonim
Web Design Best Practices: Learning the Basics
Video: Web Design Best Practices: Learning the Basics

Innehåll

Den här artikeln publicerades först i nummer 213 av tidningen .net - världens bästsäljande tidning för webbdesigners och utvecklare.

Hur många gånger har du sagt, "Det här är året som jag äntligen ska starta en blogg"? Som många börjar du den långa och svåra processen att designa en webbplats för den svåraste klienten - dig själv - bara för att se hur den rör sig mot bakre brännaren varje gång riktiga, betalande kunder kommer i vägen.

När du äntligen har spikat ner designen börjar processen att bygga och utveckla din blogg. Efter veckor (eller månader) är det äntligen dags att trycka på startknappen. Någonstans mellan ditt fjärde och femte insiktsfulla och lysande inlägg slår det dig ... att hålla den här bloggen uppdaterad kommer att ta enormt mycket arbete.

Personligen har jag fastnat i den exakta cykeln mer än en gång genom åren. I början av 2009 insåg jag att jag behövde tänka om exakt vad jag försökte åstadkomma med en personlig blogg. Idén att skriva långa blogginlägg några gånger i veckan låter fantastiskt, men för mig var det helt enkelt inte realistiskt. Jag twittrade redan, men det jag verkligen behövde var möjligheten att dela lite mer med korta, direkta och punktliga inlägg. Min sökning efter enkelhet ledde mig direkt till Tumblr.


Komma igång

Den 6 april 2009 registrerade jag mig för ett konto och började posta. Med hjälp av Tumblr's Theme Garden valde jag ett grundläggande tema som jag visste att jag kunde leva med medan jag gav Tumblr en provkörning. Plattformens enkelhet innebar också att jag inte behövde oroa mig för att installera bloggprogramvara på min server. Jag lägger alla mina ansträngningar på att samla innehåll om design, kultur, teknik och affärer tillsammans med mina personliga tankar och åsikter.

Nästan två år senare har jag lyckats hålla mig till att blogga på Tumblr med nära 600 inlägg på min webbplats på www.jonathanmoore.com: i genomsnitt 0,85 inlägg om dagen. Idag har jag insett att enkelheten är det som har hjälpt mig att hålla mig konsekvent med inlägg, men nätverket av människor på Tumblr är det som håller mig upphetsad över plattformen. Tumblr förenklar den typiska bloggen, vilket gör det enkelt att blogga. Miljontals människor världen över delar saker de gör, älskar, hittar och skapar.


Kärnan i Tumblr är åtta inläggstyper - text, foto, citat, länk, chatt, ljud, video och besvarade frågor - som du kan publicera på instrumentpanelen. Det gör det enkelt att dela allt du hittar eller skapa. Om du publicerar en video är själva videon det primära ämnet och sedan kan du lägga till en valfri bildtext för att ge sammanhang, insikt eller detaljer om den. Detsamma gäller för andra inläggstyper, med undantag för textinlägg, som gör att du kan skapa mer typiska blogginlägg med en kombination av text, bilder och video i det enskilda inlägget.

Inte bara förenklar Tumblr inläggstyperna, det ger dig också ett brett utbud av sätt att posta på din blogg. Personligen brukar jag använda Dashboard för det mesta, men det finns ett antal andra sätt att skicka innehåll till din blogg.

  • Bookmarklet, som låter dig skicka direkt från din webbläsare när du surfar på nätet
  • Mobila applikationer för iPhone, BlackBerry och Android
  • Sofistikerad e-postpublicering för att skicka text, foton, MP3 eller videor direkt från din mobiltelefon eller via e-post
  • Ring in ljudinlägg med ett avgiftsfritt nummer
  • Många andra tredjepartsapplikationer (www.tumblr.com/docs/en/apps)

För mer information om de olika sätten att skicka till Tumblr, se www.tumblr.com/goodies.


Samhället

Visst, du kan använda Tumblr helt enkelt som ett sätt att uppdatera din blogg, men du skulle missa den rika och fascinerande Tumblr-gruppen. Det riktiga roliga börjar när du följer en handfull intressanta, inspirerande och likasinnade människor. Och när din blogg har byggt upp en anständig följd är det fantastiskt att se hur snabbt ett inlägg kan spridas över plattformen, med likes och reblogs.

Utanför att följa välkända personer på Tumblr är den inbyggda katalogen ett utmärkt sätt att upptäcka nya människor på plattformen. Katalogen är uppdelad i nästan 50 kategorier som täcker ett brett utbud av ämnen inklusive designers, utvecklare, entreprenörer, startups, arkitektur, ideell verksamhet och resor. Tillbringa en timme eller två genom att bläddra bland community-rekommenderade bloggar, och snart har du en utmärkt grupp webbplatser att följa som utgångspunkt.

Tumblr har byggt på ett antal sätt att belöna människor som publicerar original, inspirerande, kreativt och intressant innehåll på sina bloggar. Det mest uppenbara skulle vara likes och reblogs. Högst upp på varje bloggs permalänk och på instrumentpanelen hittar du en hjärtikon för att "gilla" inlägget. Om du stöter på ett inlägg som du tycker är värt att dela eller om du vill lägga till dina egna tankar till det kan du reblogga inlägget till din egen blogg. Återloggning är det sätt som en idé eller ett postmeme snabbt sprids över ett nätverk av tusentals bloggar.

Går mobil

Snabbare än vi inser det börjar folk döda sina bärbara datorer till förmån för mobila enheter, så Tumblr har skapat mobilapplikationer och mobiloptimerade blogginlägg. Med applikationer för iPhone-, BlackBerry- och Android-plattformar kan du bläddra i din Dashboard och publicera alla inläggstyper direkt från din telefon. Med iPhone- och Android-applikationerna kan du komma åt Tumblrs avancerade inläggsalternativ - spara som utkast, lägg till i kö, publicera på och anpassa webbadresser.

Skicka dina inlägg direkt till din blogg med Tumblrs sofistikerade e-postpublicering. Gå till sidan Goodies (tumblr.com/goodies) för att ta reda på webbplatsens unika e-postadress.

När du väl har skickat kommer Tumblr automatiskt att upptäcka vilken typ av inlägg du försöker skapa och publicera den på din webbplats. Om du vill ha lite mer kontroll över formateringen har Tumblr stöd för Markdown-syntax (daringfireball.net/projects/markdown/syntax).

Alla dina bloggar har en optimerad och stilig mobil layout för iPhone, BlackBerry, Android och mer. Om temat du använder fungerar bra i mobilwebbläsare kan du alltid inaktivera den optimerade layouten i menyn Anpassa. Tumblr ger dig också möjlighet att skriva över standardmobillayouten med din egen anpassade: se tumblr.com/docs/en/custom_themes#iphone-themes.

Teman

Med Tumblrs engagemang för att hålla alla inläggstyper så enkla som möjligt är det otroligt enkelt att ändra webbplatsens design. Du kan välja bland hundratals gratis teman som är inbyggda i Tumblr; alternativt ger Tumblr dig full kontroll för att skapa något original.

För närvarande finns det nästan 900 högkvalitativa teman i Tumblrs inbyggda tematrädgård (tumblr.com/themes). När du bläddrar bland de utvalda, premium, senaste och populära teman kan du förhandsgranska var och en för att få en känsla för hur det kan se ut på din webbplats. När du väl har hittat en som fungerar för dig kan du med bara ett klick installera temat på någon av dina Tumblr-webbplatser.

Majoriteten av dessa teman är helt gratis att använda och anpassa, men en handfull har en premie som kostar $ 9, $ 19 eller $ 49 (tumblr.com/themes/premium). Du kommer att upptäcka att de flesta premiumteman har design av högsta kvalitet, alla Tumblr-funktioner omfattas, dussintals anpassningsalternativ och språköversättningsstöd för engelska, franska, tyska, italienska och japanska. Plus att de flesta premiumtemdesignerna erbjuder otroligt stöd för vart och ett av deras teman.

Utanför Tumblrs officiella Theme Garden erbjuder företag som traditionellt har fokuserat på WordPress-teman nu Tumblr-versioner, inklusive The Theme Foundry (thethemefoundry.com) och Obox (obox-design.com). I många fall kommer de att erbjuda ytterligare godsaker med ditt köp, till exempel nedladdningsbara PSD-filer och tillgång till andra teman. Även om teman utanför webbplatsen inte kan erbjuda installationer med ett klick är det lika enkelt att lägga till temat på din webbplats som att klistra in temat HTML i menyn Tumblr Anpassa.

Anpassa din webbplats

Tumblr har en otroligt användbar inbyggd anpassningsmeny som gör att du kan anpassa, utöka och styra ett antal funktioner för var och en av dina webbplatser. Låt oss titta på ett antal alternativ som finns i de sju anpassningsmenyerna:

  • Info Ställ in webbplatsens titel, lägg till en HTML-beskrivning, ladda upp ett porträtt eller en ikon och ställ in din Tumblr-URL inklusive möjligheten att lägga till ditt eget anpassade domännamn.
  • Tema Förhandsgranska, installera och, i vissa fall, köpa ett av premium- eller presenterade Tumblr-teman. Dessutom kan du klicka på knappen Använd anpassad HTML för att ändra ditt befintliga temas HTML eller klistra in i ditt eget anpassade HTML-tema.
  • Utseende Om ditt tema stöder utseendealternativ hittar du ett antal färgväljare, bilduppladdningsknappar, alternativ för att aktivera och textfält för att anpassa utseendet på ditt tema. Många av premium Tumblr-teman erbjuder flera dussin alternativ som gör att du kan ändra temafärgerna, ladda upp sidhuvudbilder, ändra webbplatsens layout och integrera tredjepartsalternativ som Google Analytics, Disqus-kommentarer och Flickr-bildflöden genom att klistra in i din ID.
  • Sidor Lägg till ytterligare statiska sidor på din webbplats som är perfekta för biografier, kontaktinformation och webbplatsinformation. Dessutom kan du omdirigera sidor som tar dig till externa länkar eller ofta till pseudokategorier genom att länka till en tagg-URL på din webbplats.
  • Tjänster Anslut din Tumblr-webbplats med Facebook och lägg sömlöst till dina inlägg i ditt Facebook-nyhetsflöde. Auktorisera Tumblr att automatiskt skicka dina inlägg till Twitter och använda Feedburner för din webbplats RSS-flöde.Tumblr ger dig också möjlighet att automatiskt importera RSS-flöden, uppdateringar på Twitter, blogginlägg utanför Tumblr, YouTube- och Vimeo-uppladdningar och andra som inlägg till din Tumblr-webbplats.
  • gemenskap Låt personer svara på dina inlägg, ställa frågor och skicka inläggstyp som läggs till i din inlämningskö för godkännande.
  • Avancerad Ställ in ditt tema och instrumentpanelspråk till engelska, franska, tyska, italienska eller japanska, lägg till anpassad CSS för att skriva över något av temat CSS-egenskaper, bestämma antalet inlägg som ska visas per sida och många andra alternativ.

Anpassade teman

Samma fokus på enkelhet och struktur som Tumblr tillhandahåller för publicering och delning fortsätter med verktyget för att skapa ditt eget anpassade tema. Så länge du känner dig bekväm med HTML och CSS borde du kunna leva upp din design på rekordtid. Tumblrs temasystem är beroende av lockiga parentesvariabler och block som gör att du kan släppa i praktiskt taget alla typer av inläggs- och webbplatsdata, med ingen back-end-utveckling.

När du skapar ett nytt Tumblr-tema är det alltid enklast att bygga ut din design med ren och enkel HTML och CSS som täcker de åtta centrala inläggstyperna - text, foto, offert, länk, chatt, ljud, video och svar - och alla andra olika Tumblr-element som posttaggar, datum, anteckningar och paginering. När du har en fullständig statisk HTML-byggnad av din webbplats kan du börja den roliga delen av att släppa in temavariablerna. Variabler (i fetstil) används för att infoga dynamisk data i ditt tema.

html lang = "sv"> head> title> {Title} / title> meta name = "description" content = "{MetaDescription}" /> link rel = "genvägsikon" href = "{Favicon}" /> link rel = "apple-touch-icon" href = "{PortraitURL-128}" /> länk rel = "alternativ" typ = "applikation / rss + xml" title = "RSS" href = "{RSS}" /> / head > body> {block: Posts} avsnitt>! - Alla inläggstyper läggs till i inläggsposten -> / sektion> block: Posts} / body> / html>

Block

Förutom temavariablerna använder Tumblr ett system med block för att återge HTML-block relaterade till en viss uppsättning data, till exempel inlägg, inläggstyper, taggar och paginering.

Block används antingen som villkorliga element som endast återges om datatypen finns - {block: HasTags} - eller så fungerar de som en slinga som gör HTML för var och en av elementen i blocket: {block: Tags}.

{block: HasTags} ul> {block: Tags} li> a href = "{TagURL}"> {Tag} / a> / li> {/ block: Tags} / ul> {/ block: HasTags}

Här är exempel på grundläggande text- och fotostrukturer som du kan använda för att skapa din mall. (Observera att jag använder de nya HTML5-elementen som gör HTML mycket lättare att läsa och dataattribut som kan användas som krokar för jQuery / JavaScript-manipulation av det tema du väljer.)

Text:

{block: Text} artikel>! - Det valfria textinläggets titelblock återges om det finns en titel -> {block: Titel} rubrik> h2> a href = "{Permalink}"> {Titel} / a> / h2> / header> {/ block: Titel} avsnitt> {Body} / avsnitt> {/ block: Text}

Foto:

{block: Photo} artikel> rubrik>! - Slå in bilden med alt- och highres-attribut i variabler för att göra en länk till inläggssidan -> {LinkOpenTag} img src = "{PhotoURL-500}" alt = "{ PhotoAlt} "data-highres =" {PhotoURL- HighRes} "/> {LinkCloseTag} / rubrik>! - Om det finns en textning visas texten för textning -> {block: Caption} -avsnitt> {Caption} / avsnitt> {/ block: Caption} {/ block: Photo}

Få fart på alla andra typer av block, variabler och data för att skapa något bra för din blogg genom att gå här: tumblr.com/docs/en/custom_themes.

Kolla in de 40 bästa Tumblr-bloggarna för designers på vår systersida Creative Bloq.

Vi Rekommenderar Dig
Briljant lekfulla superhjälteillustrationer packar fortfarande ett slag
Läs Mer

Briljant lekfulla superhjälteillustrationer packar fortfarande ett slag

Den fran ka kon tnären Bunka har kapat en erie uperhjälteillu trationer om tar ledtrådar från den platta de igntrenden, inklu ive Batman, Teenage Mutant Ninja Turtle och pider-Man....
Skapa en kraftfull kvinnlig karaktär i tio steg
Läs Mer

Skapa en kraftfull kvinnlig karaktär i tio steg

Jag antar att jag bör börja med att äga att du alltid bör börja med ett koncept du äl kar, efter om du kommer att pendera mycket tid på att arbeta med det. I det h&#...
Skapandet av Elder Scrolls Onlines episka filmtrilogi
Läs Mer

Skapandet av Elder Scrolls Onlines episka filmtrilogi

Nominerad till ett 3D World CG Award 2014 tittar vi på fram tällningen av Elder croll 'The Alliance , The Arrival och The iege hort cinematic .Kumulativt tog kampanjen cirka 18 måna...