Doing Tumblr Wrong

16 June 2014

I recently re-did sarahvogl.com look more like an actual website without compromising ease of posting new projects, losing the ability for people to follow/reblog my site’s posts, or paying a cent more than is absolutely necessary. 

I basically started by writing up what I wanted my website to look like, then translating that code to fit within tumblr’s super-flexible template. 

I’m not going to explain tumblr themes in full or anything here, but I can explain what I did that is not-so-standard to fit my own purposes. I didn’t find any other instances of abusing tumblr like this, so I figure it’s worth posting. (Disclaimer: I am most definitely a beginner with HTML/CSS, so don’t h8.)

The first thing I chose to completely ignore was tumblr’s navigation. I *could* have put in a toggle to turn Ask and Submit labels on and off, but I will literally never use them so I didn’t even bother. I stuck in my own navigation fields using Tumblr’s space for theme options. This way if I want to change/add something quickly, I have a space for it. My navigation links take you away from sarahvogl.com but I could also add my own pages (at the bottom of the customize page) as long as I link to them manually in my own navigation options. (I could make this much more seamless, but for now it works.)

I made use of the theme options again for what I called my headline and my footer text. The rest of the footer (all the social stuff) could also be added to the theme options eventually, but inserting anything beyond line breaks into the options makes tumblr angry, so for now the footer content resides only in the code. 

In order to make my posts appear in the very specific way that I wanted them to, I used only photo posts with elaborate captions. Each photo has to be a square (which becomes my thumbnail on the home page). On the home pages, the photo is shown and the caption is hidden. On all the permalink pages, the photo is actually hidden while the caption is shown. this means I can put whatever the hell I want there, and it doesn’t look totally shitty if it’s reblogged.

Another benefit of this is that tumblr takes care of the mobile version for me! This leaves me time to fix and improve on the desktop site. I still don’t really know what the hell I’m doing, so there’s a lot to fix…

Bookmarks

12 June 2014

This is my set of sites which I frequently go to for design shenanigans. I’ll keep it updated so I can quickly link to it whenever I want to share it.

Solo Blogs
http://blog.codinghorror.com/
http://destroytoday.com/
http://mir.lu/
http://justcreative.com/
http://madebymany.com/
http://blog.jaredsinclair.com/
http://www.zeldman.com/

Blogs
http://www.webdesignerdepot.com/ - General web
http://www.smashingmagazine.com/ - General web
http://www.creativebloq.com/ - General web
http://designmodo.com/ - General web
http://creativeoverflow.net/ - Discussions and inspiration
http://www.visualnews.com/ - Discussions and inspiration
http://www.hongkiat.com/ - Design tips, tutorials, and inspiration
http://www.underconsideration.com/brandnew/ - Opinions on corporate and brand identity work
http://designrfix.com/ - Inspiration, tutorials, resources
http://www.pencilscoop.com/ - Web dev
http://www.youthedesigner.com/ - Graphic design lifestyle blog
http://www.onextrapixel.com/ - Tutorials and freebies
http://tutorials.tutsplus.com/ - Tutorials, inspiration and videos to help you learn
http://www.designboom.com/ - Art news
http://www.bittbox.com/ - Web dev and freebies
http://css-tricks.com/
http://vectips.com/
http://meettheipsums.com/
http://hipsum.co/

Inspiration
http://www.logogala.com/
http://www.logospire.com/
http://www.twibfy.com/
http://logofaves.com/
http://logopond.com/
http://theinspirationgrid.com/
https://www.behance.net/
http://thedsgnblog.com/
http://www.logodesignlove.com/
http://usepanda.com/app/
https://dribbble.com/

Freebies
http://www.bestpsdfreebies.com/
http://graphicburger.com/
http://freebiesbug.com/
http://www.blugraphic.com/
http://bluemonkeylab.com/
http://freepsdfiles.net/
https://creativemarket.com/
http://envatomarketplaces.com/
http://www.designrazzi.net/
http://www.pixeden.com/
http://www.gfxnerds.com/
http://www.psddicted.com/
http://html5up.net/
http://roundicons.com/
http://filament.io/
http://www.freevectorarchive.com/

Fonts
http://www.fontsquirrel.com/
http://losttype.com/
http://dharmatype.com/
http://www.typewolf.com/
http://fontello.com/
http://fontfabric.com/
http://fontm.com/
http://ilovetypography.com/

Colors
https://kuler.adobe.com/create/color-wheel/
http://flatuicolors.com/
http://www.colourlovers.com/
http://www.color-hex.com/

People and Studios
http://www.helveticbrands.ch/
http://ilenoliukgo.com/
http://tom-hayes.co.uk/
http://couragefaithandcocktails.com/
http://www.nickivanroon.com/welcome/
http://www.sagmeisterwalsh.com/
http://spin.co.uk/
http://www.jessicalehrman.com/#0
http://www.olimpiazagnoli.com/
http://www.generationalliance.com/
http://ashleylesterphoto.com/
http://www.solefield.com/
http://nolbert.com/#/feed
http://www.thaterstudio.com/

Podcasts
http://unfinished.bz/
http://shoptalkshow.com/
http://99percentinvisible.org/
http://alifewellwasted.com/podcast/
http://throughprocess.com/
http://workingoutpodcast.com/

Say hi!

I'm always looking for new friends and new projects!
You can find me on any of the above social networks or shoot me an e-mail at sarvog@gmail.com.