Tips and Techniques for RWD -2

“Deciding” in the Browser

This is probably my personal favourite. Deciding in the browser means that you get to do a bit of work in graphics software and a bit in the browser. Personally, I think you can’t get a better result of how a design will work until it’s in the browser itself. Typography will always render differently in graphics apps than in the browser, and it’s much easier to create prototypes and iterate quickly through design stages when you are in the browser (though all that might be about to change with the introduction of applications such asMacaw).

Working with both a mixture of mockups and browser-based work means that you can give a lot of flexibility to your design and the decisions you have to make. The key to this term “deciding in the browser” though, is with the first word. Although many major creative decisions can be made in the graphics software, the browser is where your final choice can be made.

When I work in this way, I find that I often end up with a mixture of mockups, designed pattern libraries (in graphics software and in HTML & CSS) and full HTML & CSS prototypes. A mixture is great and it shows the evolution of the website from the beginning through to what is, hopefully, starting to become a full website.

Content-First, Mobile-First or Desktop-Down?

First up, if you haven’t already learned from my articles in the “Before You Start” section – always, always, always start working on your designs content-first. All this means is to make sure that you’re working with real content and the content that is intended to be used on the website you’re designing.

Secondly, whether you work mobile-first (starting with smaller layouts) or desktop-down (starting with full-width desktop layouts) is completely up to you. There are many debates about it online, but really this is your own decision to make. If you feel more creative going from a larger size down to a smaller, even if you build it in the opposite way, then that’s fine. As is doing the opposite, and going from small to big!

Source : Webdesigntuts+

Advertisements
Posted in Responsive Web Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: