1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
---
title: The Easiest Way to Get Started 'Designing in the Browser'
pub_date: 2013-11-08 16:02:19
slug: /blog/2013/11/easiest-way-get-started-designing-browser
metadesc: Developing and designing directly in the browser has greatly simplify my workflow. Skipping intermediary tools like Photoshop means I'm able to accomplish more in less time, which in turn means I can say yes to more projects.
tags: Responsive Web Design, Building Smarter Workflows
code: True
tutorial: True
---
*If you've ever struggled to "design in the web browser" this post is for you.*
You've probably heard that phrase before, "designing in the browser", especially when it comes to building responsive websites. Some people even go so far as to say you shouldn't use Photoshop at all, but should build everything right in the browser.
I think you should choose whatever tool works the best for you, but since I switched to developing directly in the browser a few years ago I've been able to greatly simplify my workflow. Skipping intermediary tools like Photoshop means I'm able to accomplish more in less time, which in turn means I can say yes to more projects.
Sounds awesome right? But where do you start?
## How to Simplify "Designing in the Browser"
Start with the content. Get your content from the client, make your sketches, your wireframes, whatever other preliminary things are already part of your workflow. Then, when that's done, instead of opening Photoshop, Illustrator or other layout apps, you convert that content to HTML and start structuring it to match your wireframes.
But how? I start up a web browser (I use Firefox), point it to my local mockup files (just HTML files in my project folder) and start editing. That's it; that's my workflow: edit, refresh; edit, refresh. It's simple and it makes the feedback loop of design and development immediate and simple.
And to do that I didn't spend hours setting up some complex development environment, nor did I have to buy some expensive GUI server software package. In fact, I use just one line of code to pull this off.
Here's how you can simplify your responsive design workflow, and start "designing in the browser" with what I call "the Python web server trick". I've been doing this for so long I often assume everyone knows about this, but I keep meeting people who don't. So... if you don't, here's a dead simple way to serve files locally with just one line of code.
## The Best Web Server is the One That's Already Installed
The key to designing in the browser is to have **a quick and easy way to serve up files locally**. You don't need anything fancy at this stage, just a basic web server.
The easiest way I have found to set up this workflow is to use a very simple command line tool that creates a web server wherever I want it, whenever I want it.
I know, I know, the command line is antiquated, mysterious and a bit frightening for many people. I know that because it was that way for me too. But I kept noticing how much faster I could do things compared to visual apps. And I found that every time I used the terminal, it got a little less intimidating. I learned how to do one little thing that sped up my overall workflow. Then I learned another. And another. Today I use the terminal more than any other application. You don't have to go that far, but don't let it intimidate you. Just take it slow. Start with one thing that simplifies your life, like this web server trick.
If you've ever tried to set up a local development environment with Apache, PHP and the like you probably know what a headache that can be. Well, it turns out, if all you want is a simple web server, there's a much easier way.
Here's how to **turn any local folder on your Mac or Linux machine into a web server** (Windows users can do the very same thing, though first you'll need to install Python. Follow [these instructions](http://www.anthonydebarros.com/2011/10/15/setting-up-python-in-windows-7/) to get Python installed and then come back and follow along).
Before we start our web server we need a folder to hold all our files. This folder will be the "root" of our web server. I divide my time between OS X and Linux, which both offer a "Sites" folder in your home folder. I use this folder to store all my projects. If you prefer to store things elsewhere just adjust all the path names in the code that follow. Open the `Sites` folder and create a new folder inside it named `myproject`. Then create a new file named `mydemo.html`. Open that file in your favorite editor and just type "Hello World".
That gives us something to test with. The next step is to open up your terminal application. In OS X that means you head to the `Applications` folder, open the `Utilities` folder and then double-click the Terminal application (Windows users head to the Start Menu, click Run and then type `cmd`; if you're on Linux I'll assume you know how to open a terminal window). In the new Terminal window type/paste this line:
~~~.language-bash
cd ~/Sites/myproject
~~~
The command `cd` just means "change directory". So we've changed from our home user folder to the `myproject` directory. Okay, you're now inside the folder we created just a minute ago. Now type this line:
~~~.language-bash
python -m SimpleHTTPServer 8080
~~~
Now open your favorite web browser and head to the URL: `localhost:8080/`. You should now see a directory listing with a link to your `mydemo.html` file. Click that and you should see "Hello World". Go back to your text editor and change the `mydemo.html` file to read "Hello World, it's nice to meet you". Jump back to the browser and reload the page. You should now see the message "Hello World, it's nice to meet you"
Congratulations! You created a web server. You now have a simple and fast way to serve up HTML files locally. You can edit, refresh and mock up live HTML files right in the browser.
All we're doing here is taking advantage of the fact that the [Python programming language](http://www.python.org/) ships with a built-in web server. Since Python is built into OS X and Linux, it's always there, ready to serve up files (as noted above, if you're on Windows you'll need to install Python. I also suggest installing [Cygwin](http://cygwin.com/), it will make everything you do on the command line easier).
## Improving the Script
So we have a very basic way to serve files locally. There are various ways to make this more sophisticated, but this basic method will work when you're first getting started.
If you don't mind another quick trip to the Terminal you can even automate the process some more. To make it even simpler we can add an alias to what's known as a "profile", the configuration file that loads every time we start up a new terminal window. Most operating systems these days ship with the [Bash shell](http://en.wikipedia.org/wiki/Bash_%28Unix_shell%29). Assuming that's what you have (OS X uses Bash by default, as do most Linux distros), open a new terminal window and type this:
~~~.language-bash
nano ~/.bash_profile
~~~
Now paste this line into the window:
~~~.language-bash
alias serve='cd ~/Sites/myproject && python -m SimpleHTTPServer 8080'
~~~
Hit `control-x`, type a "y" and hit return to save the file. Now quit your terminal app and restart it.
Now to turn on the server all we need to do is open a new terminal window and type "serve". Note that if your folder is in a different location, or if you move the folder you'll need to adjust your alias accordingly.
If you've got a home network running and you'd like to be able to see your website on all your devices (handy for testing on phones, tablets and whatnot), you can alter this code slightly so other local devices can connect to your server. It's a little more complicated, but can still be a one-liner.
For example, if your machine's local network address is 192.168.1.5, you could run this command:
~~~.language-bash
python -c "import BaseHTTPServer as bhs, SimpleHTTPServer as shs; bhs.HTTPServer(('192.168.1.5', 8080), shs.SimpleHTTPRequestHandler).serve_forever()"
~~~
Now, instead of `localhost`, open the URL `192.168.1.5:8080` in your web browser and you'll see the same page, but now you can point your phone to that URL and it will load there as well. Ditto your tablet, Kindle and any other devices connected to your local network.
Obviously that's tough to remember so let's create an alias. To do that we'll just add another alias to the .bash_profile file we edited earlier. To open that up again just enter:
~~~.language-bash
nano ~/.bash_profile
~~~
Now paste this line into the window:
~~~.language-bash
alias serve_all="python -c 'import BaseHTTPServer as bhs, SimpleHTTPServer as shs; bhs.HTTPServer(('\''192.168.1.5'\'', 8080), shs.SimpleHTTPRequestHandler).serve_forever()'"
~~~
Now you can `cd` into any directory, type `serve_all` and run a web server that you can use to testing your sites on any device.
That's all there is to it. A live web server whenever you want it, wherever you want it.
That's how I "design in the browser".
The next step is to take that nice content the client gave us and put it into our mockup files so we have something more useful than "Hello World" in our web browser. I do this using plain text files, [Markdown](http://daringfireball.net/projects/markdown/) and [Pandoc](http://johnmacfarlane.net/pandoc/), which I cover in more detail in this follow-up post: [Work Smarter: The Plain Text Workflow](/blog/2014/02/work-smarter-plain-text-workflow).
I hope this simple Python server trick proves helpful, and, if you have any questions, drop them in the comments below.
If you want to learn some more handy tips and tricks for improving your responsive design workflows check out my book, [Build a Better Web With Responsive Web Design](https://longhandpixels.net/books/responsive-web-design) and the accompanying videos.
|
