Blog Launch Checklist: Responsive Layout Design and Typography

May be it is because I’m a designer and developer myself that I do certain things that non-designers/developers do not. Things such as resizing browser width as soon as I have clicked on a new website or blog to see if all elements are responding to the changing browser width. The prettier a blog, the harsher I judge them. Can’t help it! So here I am, trying to think of blog post ideas for when I relaunch, and I figured, why not talk about this as part of the first-10-intro-posts or something? (I am terrible at small talk, so there, no introductory post on my blog. We go straight into business!)


Thing is, I get it, you know! Unless you are a designer/developer, especially a developer, you won’t probably change your browser width ever! But what if your reader IS a developer? Hmm? What’d you do then? Even if you are a non-techie person, there are some things you should probably know, and test, before you launch your website/blog. It is not just so you can please the eyes of the tech-gurus and blog-police, but you’ll be doing yourself a favor if you take care of these ten things on your website/blog. With just these ten things, your website is going to look that much more professional!

  1. On your desktop, change the browser size (make it shorter, wider, thinner) and see if your template is truly responsive. If it is, its elements will change size with browser window and accommodate this.
  2. Check it out on your cell phone/tablet or both, and see if it looks how it should look like (as in, your template is mobile responsive).
  3. When you are on mobile site, or when your browser is thinner/smaller, make sure your menus are not hiding behind any other element, and that they are expandable, and clickable.
  4. Make sure your header is clickable ON ALL PAGES, INCLUDING THE HOME PAGE.
  5. Post a couple of test comments, reply to those test comments as test reply comments and make sure they look as they should on your desktop browser (in all sizes) and your mobile, and they are not hiding behind any other element. Very few things are as annoying as when we love a post, want to comment, and are unable to.
  6. Make sure your photos are responding to browser window size change.
  7. While checking all the above, scroll up and down and sideways to see things are as they should be. You want your template to *fit* all windows, meaning, they should be scrollable vertically, but not horizontally. Unless your template is made to be a horizontal scrolling site.
  8. Typography Specific Rule – The Font Itself: Your body text is of extreme importance. Spend some time in choosing the right font and make sure it is not only pretty at a glance, but is actually readable. Avoid cute fonts or script fonts for the body, and definitely avoid system fonts (fonts that come bundled with your computer). In these day and age, there is no reason to use a system font when high quality fonts are readily available for use. (Certain Google Fonts, for example.)
  9. Typography Specific Rule – The Font Size: Choosing a good font will usually take care of a few things like kerning, tracking. aperture, etc. One thing however that many people do not pay attention to (some designers included) is the font size itself. Please, I beg of you, do NOT use a font size that makes one squint their eyes while reading. It may look pretty on your site at a glance, but not if you want to actually read it! Choose a font-size (or ask your designer to choose a size) that is easy on the eyes.
  10. Typography Specific Rule – The Line Height: One other thing you should do is make sure you have enough spacing between two lines. Again, very important for readability!

These are some pretty basic things, but trust me, take care of the 10 things mentioned above and you will have improved the quality of your website or blog tremendously! Even for a designer/developer, mmhm! For your convenience, I have attached a printable .pdf checklist that you can download and print out.


Subscribe to the Weekly Newsletter for Creative Inspirations and Freebies!

Share: Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+

Share Your Comments & Feedback...