useful tips for tumblr theme creators (part 3)
designing for responsiveness.
responsive design refers to how your website looks on different devices, with different screen sizes, resolutions and zoom levels. again, there’s tons of articles and guides that cover this so i strongly recommend googling them.
here’s some of the things that i like to do:
keep your elements centered. this is probably one of the easiest ways to implement responsive design, although it does depend on the layout of your theme.
if your elements need to be off-center, you might want to use the center as your anchor point with the following code, then adjust it accordingly:
element { position: absolute; /* or position: fixed */ left: 50%; transform: translateX(-50%); }
try to avoid using fixed or absolute positioning. kind of goes against what i said above but relative positioning allows the browser to dictate the flow of document, which means you’re less likely to run into responsiveness issues.
try to avoid using fixed measurements, like pixels (px). instead, use em, %, vh, vw, etc.
don’t forget about the min/max size css property! using something like max-height with height can be very useful, depending on what you want to do.
use viewports, media queries or front-end frameworks like bootstrap.
since tumblr uses a mobile version of the site for mobile users, pretty much everyone who’s going to see your theme will be a desktop user. this means that you should really be designing for desktop monitors, which are typically 16:9 (landscape).
take a look at this article for some more tips on responsive design.
