Verkkosuunnittelijan opas Tumblriin

Tämä artikkeli ilmestyi ensimmäisen kerran numero 213 of .net magazine - maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti.

Kuinka monta kertaa olet sanonut: 'Tämä on vuosi, jolloin aion vihdoin perustaa blogin'? Kuten monet, aloitat pitkän ja vaikean prosessin suunnitellessasi sivuston vaikeimmalle asiakkaalle - itsellesi - vain katsellaksesi, kuinka se siirtyy takapolttimeen aina kun todellinen, maksavat asiakkaat estävät.



Kun olet vihdoin naulannut suunnittelun, blogisi rakentaminen ja kehittäminen alkaa. Viikkojen (tai kuukausien) jälkeen on vihdoin aika painaa käynnistyspainiketta. Jossain neljännen ja viidennen oivaltavan ja loistavan viestisi välissä se osuu sinuun ... Tämän blogin pitäminen ajan tasalla vie valtavasti työtä.



Henkilökohtaisesti olen huomannut olevani loukussa juuri tähän sykliin useammin kuin kerran vuosien varrella. Alkuvuodesta 2009 huomasin, että minun oli mietittävä tarkalleen mitä yritin saavuttaa henkilökohtaisella blogilla. Ajatus kirjoittaa pitkiä blogiviestejä muutaman kerran viikossa kuulostaa hämmästyttävältä, mutta minulle se ei yksinkertaisesti ollut realistinen. Olin jo twiitannut, mutta mitä todella tarvitsin, oli kyky jakaa hieman enemmän lyhyillä, suorilla ja pisteillä kirjoitetuilla viesteillä. Etsin yksinkertaisuutta johti minut suoraan Tumblr .

kuinka maalata guašilla paperille

Päästä alkuun

Rekisteröityin 6. huhtikuuta 2009 tilille ja aloitin postituksen. Tumblrin teemapuutarhaa käyttämällä valitsin perusteeman, jonka tiesin voivani elää samalla, kun annoin Tumblrille koeajon. Alustan yksinkertaisuus tarkoitti myös sitä, että minun ei tarvitse huolehtia blogiohjelmien asentamisesta palvelimelleni. Panostin kaikkeni muotoilun, kulttuurin, tekniikan ja liiketoiminnan sisällön kuratoimiseen henkilökohtaisten ajatusten ja mielipiteiden ohella.



Lähes kaksi vuotta myöhemmin olen onnistunut pitämään bloggaamisen Tumblr-sivustossa lähes 600 viestillä sivustollani osoitteessa www.jonathanmoore.com : keskimäärin 0,85 viestiä päivässä. Tänään olen tajunnut, että yksinkertaisuus on se, mikä on auttanut minua pysymään johdonmukaisena lähettämisen kanssa, mutta Tumblr-ihmisten verkosto pitää minut innoissaan alustasta. Tumblr yksinkertaistaa tyypillistä blogia, mikä tekee bloggaamisesta kauniisti helppoa. Miljoonat ihmiset ympäri maailmaa jakavat asioita, joita he tekevät, rakastavat, löytävät ja luovat.

Tumblr-blogi antaa hämmästyttävän paljon joustavuutta, jos pääset konepellin alle

Tumblr-blogi antaa hämmästyttävän paljon joustavuutta, jos pääset konepellin alle

Tumblrin ytimessä on kahdeksan postityyppiä - teksti, valokuva, tarjous, linkki, chat, ääni, video ja vastaetut kysymykset - jotka voit julkaista hallintapaneelissa. Tämä tekee kaiken jakamasi löytämisen tai luomisen naurettavan helpoksi. Jos lähetät videota, itse video on ensisijainen aihe, ja voit lisätä valinnaisen kuvatekstin, jotta saat asiayhteyttä, oivalluksia tai yksityiskohtia siitä. Sama koskee muita viestityyppejä, lukuun ottamatta tekstiviestejä, joiden avulla voit luoda tyypillisempiä blogiviestejä tekstin, kuvien ja videoiden yhdistelmällä yksittäiseen viestiin.



Tumblr ei vain yksinkertaista postityyppejä, vaan tarjoaa myös laajan valikoiman tapoja lähettää blogiisi. Henkilökohtaisesti minulla on tapana käyttää hallintapaneelia suurimman osan ajasta, mutta on olemassa useita muita tapoja lähettää sisältöä blogiisi.

  • Bookmarklet, jonka avulla voit lähettää viestejä suoraan selaimestasi surffatessasi verkossa
  • Mobiilisovellukset iPhonelle, BlackBerrylle ja Androidille
  • Hienostunut sähköpostin julkaisu tekstin, valokuvien, MP3-tiedostojen tai videoiden lähettämiseen suoraan matkapuhelimellasi tai sähköpostitse
  • Soita äänipuhelut ilmaisella numerolla
  • Monet muut kolmansien osapuolten sovellukset ( www.tumblr.com/docs/en/apps )

Lisätietoja Tumblr-julkaisun eri tavoista on www.tumblr.com/goodies .

Yhteisö

Toki, voit käyttää Tumblria yksinkertaisesti tapana päivittää blogiisi, mutta menetät rikkaan ja kiehtovan Tumblr-yhteisön. Todellinen hauska alkaa, kun seuraat kourallista mielenkiintoisia, inspiroivia ja mieleenpainuvia ihmisiä. Ja kun blogiisi on kertynyt kunnollinen seuraaja, on hämmästyttävää nähdä, kuinka nopeasti viesti voi levitä alustalle tykkäysten ja uudelleenblogien kera.

Tumblrissa tunnettujen ihmisten seuraamisen lisäksi sisäänrakennettu hakemisto on hieno tapa löytää uusia ihmisiä alustalta. Hakemisto on jaettu lähes 50 luokkaan, jotka kattavat laajan valikoiman aiheita, mukaan lukien suunnittelijat, kehittäjät, yrittäjät, startupit, arkkitehtuuri, voittoa tavoittelemattomat maat ja matkustaminen. Vietä tunti tai kaksi selaamalla yhteisön suosittelemia blogeja, ja pian sinulla on erinomainen sivustoryhmä, jota voit seurata lähtökohtana.

elokuvia, joiden otsikko on ylöspäin

Tumblr on rakentanut useita tapoja palkita ihmisiä, jotka julkaisevat omaa, inspiroivaa, luovaa ja mielenkiintoista sisältöä blogeihinsa. Ilmeisimmät olisivat tykkäykset ja uudelleenkirjoittaminen. Jokaisen blogin pysyvän linkkisivun yläosasta ja hallintapaneelista löydät sydänkuvakkeen, joka pitää tykkäyksenä viestistä. Jos törmäät viestiin, jonka mielestäsi kannattaa jakaa, tai haluat lisätä siihen omia ajatuksiasi, voit kirjoittaa blogin uudelleen omaan blogiisi. Uudelleenkirjoittaminen on tapa, jolla idea tai postimemi leviää nopeasti tuhansien blogien verkostossa.

Liikkuva

Oletusarvoinen mobiiliasettelu Tumblrissä

Oletusarvoinen mobiiliasettelu Tumblrissä

Nopeammin kuin ymmärrämme, ihmiset alkavat ojentaa kannettavia tietokoneitaan mobiililaitteiden hyväksi, joten Tumblr on luonut mobiilisovelluksia ja mobiililaitteille optimoituja blogiasetteluja. IPhone-, BlackBerry- ja Android-alustojen sovellusten avulla voit selata hallintapaneelia ja julkaista kaikki viestityypit suoraan puhelimestasi. IPhone- ja Android-sovellusten avulla voit käyttää Tumblrin edistyneitä postitusvaihtoehtoja - tallentaa luonnoksena, lisätä jonoon, julkaista ja mukauttaa URL-osoitteita.

Lähetä viestisi suoraan blogiisi Tumblrin hienostuneella sähköpostiviestillä. Siirry Herkut-sivulle ( tumblr.com/goodies ) saadaksesi selville sivustosi yksilöllisen sähköpostiosoitteen.

Kun napsautat Lähetä, Tumblr tunnistaa automaattisesti luomasi viestityypin ja julkaisee sen sivustollasi. Jos haluat hieman hallita muotoilua, Tumblr tukee Markdown-syntaksia ( daringfireball.net/projects/markdown/syntax ).

Kaikissa blogissasi on optimoitu ja komea mobiiliasettelu iPhonelle, BlackBerrylle, Androidille ja muille. Jos käyttämäsi teema toimii hyvin mobiiliselaimissa, voit aina poistaa optimoidun asettelun Mukauta-valikossa. Tumblr antaa sinulle myös mahdollisuuden korvata matkapuhelimen oletusasettelu omalla mukautetulla: katso tumblr.com/docs/en/custom_themes#iphone-themes .

Teemat

Kun Tumblr on omistautunut pitämään kaikki postityypit mahdollisimman yksinkertaisina, on uskomattoman helppoa muuttaa sivustosi ulkoasua. Voit valita sadoista ilmaisista ja premium-teemoista Tumblr-sovellukseen; Vaihtoehtoisesti Tumblr antaa sinulle täyden hallinnan luoda jotain alkuperäistä.

Tällä hetkellä Tumblrin sisäänrakennetussa teemapuutarhassa on lähes 900 korkealaatuista teemaa ( tumblr.com/themes ). Selatessasi suositeltuja, ensiluokkaisia, viimeaikaisia ​​ja suosittuja teemoja voit esikatsella kutakin, jotta saat tuntuman siitä, miltä se saattaa näyttää sivustollasi. Kun löydät itsellesi sopivan, yhdellä napsautuksella voit asentaa teeman mihin tahansa Tumblr-sivustoosi.

lähtötason graafisen suunnittelun palkka 2017

Tällä hetkellä Tumblrin teemapuutarhassa on lähes 700 korkealaatuista teemaa

Tällä hetkellä Tumblrin teemapuutarhassa on lähes 700 korkealaatuista teemaa

Suurin osa näistä teemoista on täysin vapaasti käytettävissä ja mukautettavissa, mutta kourallinen on palkkio, joka maksaa 9 dollaria, 19 dollaria tai 49 dollaria ( tumblr.com/themes/premium ). Huomaat, että suurimmalla osalla premium-teemoista on laadukas muotoilu, jokainen Tumblr-ominaisuus katettu, kymmeniä mukautusvaihtoehtoja ja kielen käännöstuki englannille, ranskalle, saksalle, italialle ja japanille. Lisäksi suurin osa premium-teemasuunnittelijoista tarjoaa uskomattoman tuen jokaiselle teemaansa.

Tumblrin virallisen teemapuutarhan ulkopuolella yritykset, jotka ovat perinteisesti keskittyneet WordPress-teemoihin, tarjoavat nyt Tumblr-versioita, kuten Teemavalimo ( thethemefoundry.com ) ja Obox ( obox-design.com ). Monissa tapauksissa he tarjoavat lisää herkkuja ostoksellesi, kuten ladattavia PSD-tiedostoja ja pääsyn muihin teemoihin. Vaikka sivuston ulkopuoliset teemat eivät voi tarjota asennuksia yhdellä napsautuksella, teeman lisääminen sivustoosi on yhtä helppoa kuin HTML-teeman liittäminen Tumblr Customize -valikkoon.

Sivustosi mukauttaminen

Tumblrissa on uskomattoman hyödyllinen sisäänrakennettu Mukauta-valikko, jonka avulla voit mukauttaa, laajentaa ja hallita useita ominaisuuksia jokaiselle sivustollesi. Tarkastellaan useita vaihtoehtoja seitsemässä Mukauta-valikossa:

  • Tiedot Määritä sivustosi otsikko, lisää HTML-kuvaus, lataa muotokuva tai kuvake ja aseta Tumblr-URL-osoitteesi, mukaan lukien mahdollisuus lisätä oma mukautettu verkkotunnuksesi.
  • Teema Esikatsele, asenna ja joissakin tapauksissa osta yksi premium- tai suositelluista Tumblr-teemoista. Voit myös muokata nykyisen teeman HTML-koodia napsauttamalla Käytä mukautettua HTML-painiketta -painiketta tai liittää oman mukautetun teeman HTML-koodiin.
  • Ulkomuoto Jos teema tukee ulkoasuvaihtoehtoja, löydät joukon väripainikkeita, kuvanlähetyspainikkeita, käyttöönotettavia vaihtoehtoja ja tekstikenttiä teemasi ulkoasun mukauttamiseksi. Monet premium-Tumblr-teemat tarjoavat useita kymmeniä vaihtoehtoja, joiden avulla voit muokata teeman värejä, ladata otsikkokuvia, muuttaa sivuston asettelua ja integroida kolmansien osapuolten vaihtoehtoja, kuten Google Analytics, Disqus-kommentit ja Flickr-kuvasyötteet liittämällä Tunnukset.
  • Sivut Lisää sivustollesi lisää staattisia sivuja, jotka sopivat täydellisesti elämäkerroihin, yhteystietoihin ja sivuston yksityiskohtiin. Lisäksi voit ohjata sivut, jotka vievät sinut ulkoisiin linkkeihin tai usein pseudoluokkiin, linkittämällä sivustosi tagin URL-osoitteeseen.
  • Palvelut Yhdistä Tumblr-sivustosi Facebookiin ja lisää viestisi saumattomasti Facebook-uutissyötteeseesi. Valtuuta Tumblr lähettämään viestisi automaattisesti Twitteriin ja käytä Feedburneria sivustosi RSS-syötteessä. Tumblr antaa sinulle myös mahdollisuuden tuoda automaattisesti RSS-syötteitä, päivityksiä Twitterissä, blogiviestejä Tumblrin ulkopuolella, YouTube- ja Vimeo-latauksia sekä muita viesteinä Tumblr-sivustoosi.
  • Yhteisö Anna ihmisten vastata viesteihisi, esittää sinulle kysymyksiä ja lähettää kaikki lähetysjonoon lisätyt viestityypit hyväksyttäväksi.
  • Pitkälle kehittynyt Määritä teeman ja hallintapaneelin kieleksi englanti, ranska, saksa, italia tai japani, lisää mukautettu CSS korvaaaksesi minkä tahansa teeman CSS-ominaisuuksista, määritä sivua kohden näytettävien viestien määrä ja monia muita vaihtoehtoja.

Mukautetut teemat

Sama keskittyminen yksinkertaisuuteen ja rakenteeseen, jonka Tumblr tarjoaa julkaisemiseen ja jakamiseen, jatkuu työkalulla oman mukautetun teeman luomiseen. Niin kauan kuin HTML ja CSS ovat sinulle sopivia, sinun pitäisi pystyä herättämään mallisi elämään ennätysajassa. Tumblrin teemajärjestelmä perustuu kiharoiden sulkujen muuttujiin ja lohkoihin, joiden avulla voit pudottaa käytännöllisesti katsoen kaiken tyyppisiä viesti- ja sivustotietoja ilman taustakehitystä.

Kun luot uutta Tumblr-teemaa, on aina helpoin rakentaa suunnittelu puhtaalla ja suoraviivaisella HTML: llä ja CSS: llä, joka kattaa kahdeksan ydintyyppiä - teksti, valokuva, tarjous, linkki, chat, ääni, video ja vastaus - ja kaikki muut erilaisia ​​Tumblr-elementtejä, kuten postitunnisteet, päivämäärät, muistiinpanot ja sivutus. Kun sinulla on täydellinen staattinen HTML-koontiversio sivustostasi, voit aloittaa hauskan osan pudottamalla teemamuuttujia. Muuttujia (lihavoitu) käytetään lisäämään dynaamisia tietoja teemaan.

{Title} {block:Posts} block:Posts}

Lohkot

Teemamuuttujien lisäksi Tumblr käyttää lohkojärjestelmää HTML-lohkojen hahmottamiseen tiettyyn tietojoukkoon, kuten viesteihin, postityyppeihin, tunnisteisiin ja sivutukseen.

tuo Photoshop-kerrokset jälkivaikutuksiin

Lohkoja käytetään joko ehdollisina elementteinä, jotka hahmonnetaan vain, jos tietotyyppi on olemassa - {block: HasTags} - tai ne toimivat silmukana, joka renderöi HTML-koodin lohkon jokaiselle elementille: {block: Tags}.

{block:HasTags}
    {block:Tags}
  • {Tag} {/block:Tags}
{/block:HasTags}

Tässä on esimerkkejä perusteksti- ja valokuvapostirakenteista, joita voit käyttää mallin luomiseen. (Huomaa, että käytän uusia HTML5-elementtejä, jotka helpottavat HTML-koodin lukemista ja datamääritteitä, joita voidaan käyttää koukkuina valitsemasi teeman jQuery- / JavaScript-manipulointiin.)

Teksti:

{block:Text} {block:Title}

{Title}

{/block:Title} {Body} {/block:Text}

Kuva:

{block:Photo} {LinkOpenTag}{LinkCloseTag}{block:Caption} {Caption}{/block:Caption} {/block:Photo}

Nopeuta kaikkia muita lohkoja, muuttujia ja tietoja luodaksesi jotain hienoa blogillesi menemällä tähän: tumblr.com/docs/en/custom_themes .

Katso 40 parhaat Tumblr-blogit suunnittelijoille sisaryrityksessämme Creative Bloq.