This week, the focus of class was on responsive design and learning the basic principles of good interface design.

Suggestions for good interface design

After doing our first project of the semester, Sandy gave us some good suggestions to help us in our design process:

  • Contrast - draw definition between first-order elements and the rest.
  • Reduce obscurity — don’t make users work.
  • Scanability — ability to find what I want quickly.
  • Text width —30em (30x font size) is a good rule of thumb.
  • Simplify —remove borders/shapes if you can.
  • Consistency — all elements should follow a consistent visual language.
  • Flow — user should intuitively understand how to read the page.

Having these as a framework really helps when designing screens. The name of the game is making it intuitive and pleasing to other people, those people being your users. It’s easy to develop and design your product with your head down and not think about the experience your app is giving to your user.

Responsive design

To make a page responsive, you can use a simple technique called a media query.

```css Media Query

li { display: inline-block }

@media screen and (max-width: 500px) { li { display: block; } }

```

This is basically saying that once the viewport of the browser is less than 500 pixels, the display rule on each list item changes from inline-block to block. You can write as many of these break-points as you want to create a seamless experience for every browser size.

Although this is fairly simple, there is a huge debate among front-end developers as to whether responsive design is the right way to go. As a developer, your other choice is making a dedicated mobile site separate from your desktop version. There are pros and cons to making your design responsive:

Pros of responsive design

  • Your application logic stays exactly the same. All that changes are the CSS rules. This is really nice because the context switch between screen sizes happens at a really high level in your code, not in the trenches.
  • You can customize the experience for many different screen sizes. You're only limited by the number of breakpoints your willing to write.

Cons of responsive design

  • Your style codebase will grow really fast, even if you only design for two different screens.
  • Since the application logic is the same, all the data that your application serves up is downloaded, even if you choose not to display it on smaller screens. This means that your app may take a performance hit. </ul> With these in mind, you really have to take into account what kind of resources you have for a project. If you're a large company with many developers and a need for super fast performance, building a completely different mobile site may be the right move for you. However, if your a small team that doesn't have to scale to millions of users, responsive design allows you to develop with as little overhead as possible, at least if you organize your code well.