Tutorial walkthrough for first-time sitebuilders. Designed by Marc Bousquet for use in Media Studies 208, Emory University in conjunction with lab sessions and other tutorials. Find the syllabus at marcbousquet.net
1. Your First Website
A low-stakes sitebuilding exercise
Marc Bousquet
Media Studies @Emory University
2. Goal: Comfort with Sitebuilding
What counts as success in this project? Basic
familiarity with sitebuilding skills, not the content
it includes. While you may retain some of your
other projects in your portfolio, you may choose
to delete this sandbox effort after the course is
over.
This is the best kind of informal project. You
should enjoy the process rather than obsess over
the result!
3. In a Few Lab Sessions, You Will Learn To:
Create a landing page and links
Modify a WordPress theme
Manage fonts, images, navigation, credits and pull quotes
Make sharing decisions, such as by using a CC license
Create subdomains (issue.myname.net)
Install WP/Boldgrid and new themes on subdomains
Select appropriate templates (Gridblocks)
Build a coherent issue-oriented site of 6-8 pages
4. Passionate vs Expository Sites
Basic expository site genres include explanation, how to, history, and
the like. These can be very challenging and useful. However, your
individual efforts in this regard are likely to trade in settled problems or
accepted knowledge, and therefore be less interesting. Many would be
redundant, since someone else will likely already have published on
them.
Many of the best first-effort websites address issues and are driven by
passion and commitment.
5. Reflect on Your Networked Self
Most persons’ individual selfhoods emerge through a network of
affiliations—their churches, family, friends, schools, hobbies, sports,
fandoms—some of which are voluntary and others less so. We also
navigate socially constructed norms and values about race, ethnicity,
sexuality, class and so forth. Many of the latter are imposed on us
involuntarily.
All of these associations are with groups of people, sometimes quite
large groups. Each of these groups will have current, ongoing conflicts
internal to itself, or with other groups.
Map your network of affiliations. Choose three affiliations with current,
ongoing disputes that passionately interest you. Select one issue for
your sandbox project, ideally with one with multiple stakeholders.
6. Find Your Purpose: Why do You Care?
Let’s say you care about a kind of medical research because you know
someone living with the condition. Under no circumstances would you
risk sharing that person’s identity or private medical information in a
published website. But you can still publish on the issue, which you
personally care about deeply, without sharing any personal details of
that person, or your connection to them.
This might evolve into a policy site with a call to action, such as service
opportunities, donations, petitions, and so on. You might develop
outreach materials like memes, or educational games or quizzes to be
shared on social media platforms.
7. When Do You Publish the Personal?
On the other hand, you might care about treatment because a relative
died from the disease, and was comfortable and open with sharing their
medical status, or was an activist. You might create a memorial to that
individual.
Similarly, you might care about food standards, labor rights,
discrimination on the basis of sexual orientation, etc, because of a
personal connection or identification with the issue. The fact that you
feel a personal connection is very useful and often key to your success.
Publishing that connection is a different decision!
8. A Good Issue is Narrow
Rather than examine discrimination on the basis of race broadly, you
might focus on the particular dimensions that led you personally to care
about the issue.
•You can focus on a particular kind of place (fast food), a particular
region or city (Atlanta), and a kind of job (manager).
•If it is the case that certain chains in the area disproportionately
promote white or Asian employees, or over more highly qualified black
or Hispanic employees, you have a good issue.
•Likewise if customers are profiled racially by the staff at any kind of
enterprise or institution, including government offices, or health care
providers, you have a relevant, real-world issue.
9. Another Lens: Media Practice
A further layer of focus can be provided if you zero in on media
practices.
Let’s say you search Twitter or Facebook for the names of various fast-
food chains, and collect data regarding customer experiences and
connect them with racial self-identification.
Now you have both further narrowed your topic. Plus you have gone
beyond argument to acquire data: “Of thirty references to Subway food
shops on Twitter by self-identified Asian-Americans, 70% said…”
This layer of focus, on media practices, will be required in your first
major project, the research website. It is NOT required for the sandbox.
10. Compromise Between Stakeholders
An easy way to do this kind of sandbox assignment is to imagine 3-5
groups of stakeholders on a real-world issue that genuinely matters to
you.
Let’s say you care about high stakes testing because, even though you’re
good at them, plenty of your friends who are just as smart feel terrible
pressure and a sense of overwhelming failure over differences of a few
points.
Stakeholders in this issue might include teachers, parents,
administrators, legislators, testing companies, and, naturally, students of
all types.
11. How to Start
•First, make your topic is as narrow as possible AND
something you’re genuinely passionate about. Otherwise:
Why bother?
•Second, double check: Is your topic really as narrow as
possible? Seriously, this matters.
•Third, make your website ON PAPER FIRST, following the
process below. Paper is the ideal technology for this stage
of building your site.
12. Paper Websites?
1. On paper, hand-write a paragraph for the landing page.
2. Then underline three or four places in that paragraph
that might make good hyperlinks leading into major
concepts or stakeholders. Rewrite if three such links
aren’t obvious.
13. ONE NATION UNDER TESTING
Bubble Test? Pencils?
Standardized college admissions tests have been plaguing high school students since the early 1900s. Preparing
for the ACT, SAT, and SAT II’s was definitely the most nerve-wracking part of my high school career. The
fact that these tests involve high stakes especially for students is really distressing. Instead of studying for the
ACT/SAT, students could be concentrating their attention on more important academic and extracurricular
activities that could be beneficial for them in the future. Administrators are forcing teachers to change their way
of teaching in order to have students achieve the highest scores possible. This skill-and-drill way of teaching for
the sake of tests negatively affects the way students acquire knowledge.
HEADLINE
IMAGE IDEA
TEXT
*Adapted from a project by Clare Batty
A mockup includes the page title, some
actual text, and any ideas you have for
visuals
14. ONE NATION UNDER TESTING
Bubble Test? Pencils?
Standardized college admissions tests have been plaguing high school students since the early 1900s. Preparing
for the ACT, SAT, and SAT II’s was definitely the most nerve-wracking part of my high school career. The
fact that these tests involve high stakes especially for students is really distressing. Instead of studying for the
ACT/SAT, students could be concentrating their attention on more important academic and extracurricular
activities that could be beneficial for them in the future. Administrators are forcing teachers to change their way
of teaching in order to have students achieve the highest scores possible. This skill-and-drill way of teaching for
the sake of tests negatively affects the way students acquire knowledge.
*Adapted from a project by Clare Batty
Step 2 Highlight or underline the
handwritten paragraph to feature
likely links.
15. You Promised Your Reader Some Pages
What you have now is one paragraph, a headline and an
idea for an image. But your underlined or highlighted words
are a promise to your reader: Those links have to go
somewhere!
3. Create paper mockups of the destination pages that you
promised. Include a sentence or two of text on each. You
should have at least four handwritten paper pages when
done.
16. ONE NATION UNDER TESTING
Bubble Test? Pencils?
Standardized college admissions tests have been plaguing high school students since the
early 1900s. Preparing for the ACT, SAT, and SAT II’s was definitely the most nerve-
wracking part of my high school career. The fact that these tests involve high stakes
especially for students is really distressing. Instead of studying for the ACT/SAT, students
could be concentrating their attention on more important academic and extracurricular
activities that could be beneficial for them in the future. Administrators are forcing teachers
to change their way of teaching in order to have students achieve the highest scores
possible. This skill-and-drill way of teaching for the sake of tests negatively affects the way
students acquire knowledge.
*Adapted from a project by Clare Batty
Too much depends on these
standardized tests
Even your parents badger
you to study for your SAT
Administrators are told to
impose drill-and-skill
approaches.
Teachers of the year
consistently oppose drill and
skil
Step 3. Create paper mockups of
the destination pages that you
promised. Include a sentence or
two of text on each.
17. ONE NATION UNDER TESTING
Bubble Test? Pencils?
Standardized college admissions tests have been plaguing high school students since the
early 1900s. Preparing for the ACT, SAT, and SAT II’s was definitely the most nerve-
wracking part of my high school career. The fact that these tests involve high stakes
especially for students is really distressing. Instead of studying for the ACT/SAT, students
could be concentrating their attention on more important academic and extracurricular
activities that could be beneficial for them in the future. Administrators are forcing teachers
to change their way of teaching in order to have students achieve the highest scores
possible. This skill-and-drill way of teaching for the sake of tests negatively affects the way
students acquire knowledge.
*Adapted from a project by Clare Batty
Too much depends on these
standardized tests
Even your parents badger
you to study for your SAT
Administrators are told to
impose drill-and-skill
approaches.
Step 4. Flesh out this first layer of destination
pages with handwritten headlines, image ideas
and more text
THE STORM
It’s your junior year in high school, and you’re basically settled in by now. Just when you think
you’ve mastered it all, a looming shadow appears. You spend a disproportionate amount of time
worrying over the SAT/ACT when you could be focusing on more important academic or social
activities. These include giving back to the community, sharing their passion for music in a band, or
writing opinions in the student paper. Experiences from such situations would be much more
rewarding for all of the stakeholders.
THE STORM
It’s your junior year in high school, and you’re basically
settled in by now. Just when you think you’ve mastered it
all, a looming shadow appears. You spend
THE STORM
It’s your junior year in high school, and you’re basically
settled in by now. Just when you think you’ve mastered it
all, a looming shadow appears. You spend
18. ONE NATION UNDER TESTING
Bubble Test? Pencils?
Standardized college admissions tests have been plaguing high school students since the
early 1900s. Preparing for the ACT, SAT, and SAT II’s was definitely the most nerve-
wracking part of my high school career. The fact that these tests involve high stakes
especially for students is really distressing. Instead of studying for the ACT/SAT, students
could be concentrating their attention on more important academic and extracurricular
activities that could be beneficial for them in the future. Administrators are forcing teachers
to change their way of teaching in order to have students achieve the highest scores
possible. This skill-and-drill way of teaching for the sake of tests negatively affects the way
students acquire knowledge.
*Adapted from a project by Clare Batty
Step 5. Find at least two more links in the text of
the first layer of destination pages, and create
mockups of the pages they promise.
THE STORM
It’s your junior year in high school, and you’re basically settled in by now. Just when you think
you’ve mastered it all, a looming shadow appears. You spend a disproportionate amount of time
worrying over the SAT/ACT when you could be focusing on more important academic or social
activities. These include giving back to the community, sharing their passion for music in a band, or
writing opinions in the student paper. Experiences from such situations would be much more
rewarding for all of the stakeholders.
THE STORM
It’s your junior year in high school, and you’re basically
settled in by now. Just when you think you’ve mastered it
all, a looming shadow appears. You spend
THE STORM
It’s your junior year in high school, and you’re basically
settled in by now. Just when you think you’ve mastered it
all, a looming shadow appears. You spend
THE STORM
It’s your junior year in high school, and you’re basically
settled in by now. Just when you think you’ve mastered it
all, a looming shadow appears. You spend
Worry makes students sick,
not smart. Parents, employers and
service organizations all pay
a price.
19. ONE NATION UNDER TESTING
Bubble Test? Pencils?
Standardized college admissions tests have been plaguing high school students since the
early 1900s. Preparing for the ACT, SAT, and SAT II’s was definitely the most nerve-
wracking part of my high school career. The fact that these tests involve high stakes
especially for students is really distressing. Instead of studying for the ACT/SAT, students
could be concentrating their attention on more important academic and extracurricular
activities that could be beneficial for them in the future. Administrators are forcing teachers
to change their way of teaching in order to have students achieve the highest scores
possible. This skill-and-drill way of teaching for the sake of tests negatively affects the way
students acquire knowledge.
*Adapted from a project by Clare Batty
Now you have your
whole website—on
paper! This mockup
site has nine pages.
THE STORM
It’s your junior year in high school, and you’re basically settled in by now. Just when you think
you’ve mastered it all, a looming shadow appears. You spend a disproportionate amount of time
worrying over the SAT/ACT when you could be focusing on more important academic or social
activities. These include giving back to the community, sharing their passion for music in a band, or
writing opinions in the student paper. Experiences from such situations would be much more
rewarding for all of the stakeholders.
THE STORM
It’s your junior year in high school, and you’re basically
settled in by now. Just when you think you’ve mastered it
all, a looming shadow appears. You spend
THE STORM
It’s your junior year in high school, and you’re basically
settled in by now. Just when you think you’ve mastered it
all, a looming shadow appears. You spend
THE STORM
It’s your junior year in high school, and you’re basically
settled in by now. Just when you think you’ve mastered it
all, a looming shadow appears. You spend
Worry makes students sick,
not smart. Parents, employers and
service organizations all pay
a price.
Worry makes students sick, not smart.
Worry makes students sick, not smart.
1
9
8
7
6
5
4
3
2
20. A first-time user not using a template
created this from her paper mockup
Created her own navigation
menu using pencils
Designed the layout from
scratch
Used a font-image generator
to create unique headline
effects
Used text over image and
image over image effects
*Created by Clare Batty
21. *Created by Clare Batty
Claire also created the
background image for her front
page—ruled school paper—
that worked in harmony with
her other graphics and theme.
This was a first-time sandbox
effort by a nervous first-time
user, and in some ways that
shows.
But she started from paper and
made something extremely
creative and thoughtful.
22. *Created by Clare Batty
It is easy to see how much of Claire’s full-draft paper mockups
survived in the final website.
23. *Created by Clare Batty
Claire’s second project
shows a giant leap in
sitebuilding
sophistication.
Yours will too.