Web Design Weekly #48

This weeks highlights include a great interview with Aaron Draplin, the Filament Groups release of Southstreet on GitHub, Trent Waltons Fluid Type masterpiece and Campaign Monitors sweet new site. Enjoy!

HTML Lists

HTML lists are very common in everyday web development. You might be familiar with unordered lists (<ul>) and ordered lists (<ol>), which are the most commonly used, but you might not be aware that there are a few other options to consider. Like the definition list (<dl>) and the menu (<menu>) element, which was deprecated in HTML4, but has been reintroduced in HTML5.

Web Design Weekly #47

Issue 47 and the goodies keep coming! WordPress 3.4 dropped, Diego Ferreiro Val shows his loves for the Rubik’s cube, Drew Wilson shipped 2 new Pictos icon sets, Paul Irish tears down Pointer Pointer and Dave Rupert goes all crazy with his Flexible Media in Responsive Web Design talk at Refresh Austin. Enjoy.

Tabs to Spaces in Sublime Text 2

Super quick tip on how to tweak the Sublime Text 2 spacing.

Doing these small adjustments to your setup will help to provide consistent whitespace when working with others as long as they have also follow a similar setup on their text editor of choice.

Idiomatic CSS

Principles of writing consistent, idiomatic CSS. The days of a simple web page seem to be long gone for me so reading documents and adopting the best practices are a must to improve as a developer. This document is in its early days and will no-doubt evolve and become a “go-to” source.

The document is broken down into 8 sections:

  • General principles
  • Whitespace
  • Comments
  • Format
  • Naming
  • Practical example
  • Organization
  • Build and deployment

Each section is explained very clearly and the practical example ties all the explained styles/patterns into one very simple example.

If you are a passionate developer and don’t have a consistent styles/patterns when writing your code then head over to the Idiomatic CSS document on GitHub and maybe try to adopt some of the principles into your current or future projects.

“Part of being a good steward to a successful project is realizing that writing code for yourself is a Bad Idea™. If thousands of people are using your code, then write your code for maximum clarity, not your personal preference of how to get clever within the spec.”

– Idan Gazit

Web Design Weekly #46

Once again, here’s lots of cool tools, articles and hot news. The highlights are Lea Verou’s article on web standards, Ryan Seddon’s client-side unit testing tool, Bunyip and Japh Thomson’s low down on what’s coming in WordPress 3.4 plus a billion other rad links. Enjoy!

Style Your WordPress Login

A few weeks ago, I read a neat little post over at WPCandy about tweaking the WordPress login page. That post gave me a lot of inspiration and ever since redesigning WDW, it was on my to-do list. Today, I finally got around to styling it up.

One thing I discovered is that there is no need to add any plugins or to modify any core WordPress files. Adding a plugin for a simple task seemed a bit of an overkill and modifying the core files is never a good idea, especially when you update your instance of WordPress you have to re-do all your login styles again.

So if you want to go plugin free and give your login screen a little character you might enjoy this post.

Web Design Weekly #45

Another big week. Elliot Jay Stocks expresses his view on the failure of adaptive design. Viljami Salminen from Finland explains his responsive workflow and some great discussion about <meta name="viewport"> over on the HTML5 Boilerplate GitHub pages. Enjoy!

CSS Selectors That Rock

Styling websites can get a little mundane if the site you are working on is not so aesthetically pleasing or challenging. If I find myself just going through the motions, I tend to step back and try to improve my skills. Doing this not only increases motivation for the project, it also puts are few more tricks up my sleeve for future projects.

Below are 10 CSS selectors. Some of them you probably use on every project and some possibly never. Next time you’re finding yourself going through the motions, maybe it’s a good time to sneak in some new selectors that you wouldn’t normally use.

Responsive Workflow

Viljami Salminen, a UI/Web Designer and Developer from Finland explains his responsive workflow. He offers some great thoughtful descriptions on each individual step. His responsive workflow is broken down into the following steps:

Discover, Plan, Text Design, Sketch, Prototype, Visual Design, Test, Discuss and Iterate.

Some highlights included the free ‘Device Breakpoint Diagram’, the Text Design step (which was a new concept to me) and the Visual Design step which included some great typography tips.

‘Text design’ here means that we write (design) all the contents of the website down in textual form. This is one of the most important stages in the whole process, and yet it’s probably also the most underrated step.

Visual design. This step happens in iterations before and after prototyping. I still use Photoshop to do most of the design, but I’m moving more and more towards design in a browser. Especially typography seems to be something which is really hard to get working anywhere else than inside the browser (Although at the same time I have noticed that if I do the jump too early, everything will end up looking flat, uninspiring and somehow cluttered).