Those days are long past.
Today, you should be prepared to serve your site to browsers as small as the original iPhone (320 × 480 pixels) all the way up to desktop displays sporting 2560 × 1440 pixel resolutions or higher. Even on the desktop there's a wide variety, as some users prefer narrow overlapping windows, while others prefer browsing full-screen.
It's difficult to make font and interaction element choices that work equally well on both big and small screens. Some designers prefer to keep things simple, making a single layout (usually around 960 pixels wide) and trusting mobile users to pinch and zoom for reading and navigation.
Strictly speaking, there's nothing wrong with this sort of design, especially for content-driven sites with simple navigation. Unfortunately, some sites with long [line lengths](http://baymard.com/blog/line-length-readability) may be difficult to read even when zoomed in. Other sites with detailed, interactive navigation (think multi-level, nested hierarchies) may make it difficult for users of small screens to find what they're looking for as they pan through a zoomed site seen though their virtual soda straw.
The alternative is to adapt your layout so that it responds properly to the size of the browser window being used. That's called responsive or adaptive design.
> {{ theme:partial src="aside-header" voice="erik" text="Flamewarning" }}
>
> There are some major philosophical flame-wars over responsive design, adaptive design, whether there's a difference between them, and even whether we should be designing this way at all. Like any inexact science or art, there are substantial differences in perspective, and they all offer good arguments and accept different compromises.
>
> I'm not here to tell you how responsive design *should* be done. I'm telling you how *I do it*. If you're interested, I highly encourage you to scour the web for alternate perspectives and tools. It's a great way to broaden your horizons.
>
> If you find something cool, let me know. I like cool things.
#### Before We Begin
We've created a simple responsive website as part of this tutorial. You can find the source code for the tutorial as well as for the Technical Difficulties site itself on [Github](https://github.com/).
* [Tutorial Source Code](https://github.com/themindfulbit/responsive)
* [Technical Difficulties Source Code](https://github.com/themindfulbit/td)
* [The Mindful Bit Source Code](https://github.com/themindfulbit/tmb)
### The Tools
{{ theme:partial src="timestamp" url="{{ soundcloudurl }}" time="4:30" }}
We're going use the following languages and libraries to design a simple responsive site:
* [CSS](http://en.wikipedia.org/wiki/CSS)
* [Sass](http://sass-lang.com/)
* [Compass](http://compass-style.org/)
* [Takitapart Web Framework](https://github.com/takitapart/takitapart-framework)
Each library in this toolset builds on top of the one before it like [nesting dolls](http://en.wikipedia.org/wiki/Matryoshka_doll), with basic CSS at its core.
> {{ theme:partial src="aside-header" voice="erik" text="Why these tools?" }}
>
> There are tons of similar platforms and frameworks out there. Why do I use these?
>
> A few reasons:
>
> * They work
> * They're what I know and use every day
> * They're fairly simple to get up and running
> * They offer a tremendous amount of flexibility and growth potential
>
> As always, if these tools don't work for you, look around, try a bunch of new things and find a workflow that fits your needs. Then come back and tell me about all the awesome new tools you've found, so I can start using them too.
#### Configuring the toolset
Before we start discussing the different tools, let's get them installed. We're assuming you've got a web server running on your computer already.
> {{ theme:partial src="aside-header" voice="erik" text="Web Servers" }}
>
> Due to time constraints and the broad variety of platforms out there, the act of setting up a web server is outside the scope of this discussion.
>
> If you're on a Mac, you've got a couple of options. You could use [OS X's built-in Apache server](http://brianflove.com/2013/10/23/os-x-mavericks-and-apache/). You could use the free version of [MAMP](http://mamp.info). Or you could do what I do and use [Homebrew](http://brew.sh/) to install [php 5.5](https://github.com/josegonzalez/homebrew-php) which lets you create a temporary webserver via the terminal with one simple command:
>
> `php -S localhost:8888`
>
> There are many options, so feel free to contact me on [App.net](http://app.net/themindfulbit), if you run into any problems that Google can't help you surmount.
>
> You can also try me on [Twitter](http://twitter.com/themindfulbit), but you don't know pain until you've helped somebody troubleshoot their development platform 140 characters at a time.
In the root folder of your new site, run the following command in a terminal window, followed by your password if necessary. It will install Sass, Compass, and the Takitapart Web Framework on your machine:
~~~
sudo gem install compass.takitapart.framework
~~~
Next we're going to create the foundational files for your design. It's another one-liner:
~~~
compass create
~~~
Let's make some tweaks to those files, just to be sure they're all set for our use.
In the root of your directory you should see a file named `config.rb`. Open it up and after the first comment add this line:
~~~
# Require any additional compass plugins here.
require "takitapart"
~~~
That tells Compass we're using the Takitapart Web Framework.
Finally, we'll need to give the web-server something to show. Create a file called `index.html` in the root of your web directory and fill it with the following lines:
~~~
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at orci magna. Phasellus augue justo, sodales eu potatowire ac, vulputate eget nulla. Mauris massa sem, ttscoff sed cursus et, semper tincidunt lacus. Praesent sagittis, drang id egestas consequat, nisl orci vehicula libero, quis hotdogsladies nulla magna interdum sem. Macdrifter eget orci vitae eros accumsan mollis. Cras mi mi, rutrum id aliquam in, aliquet vitae tellus. Sed neque justo, cursus in commodo eget, facilisis eget nunc. Cras tincidunt auctor varius.