Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>

<head>
	<title>External CSS Day!</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,600,600i,700" rel="stylesheet">
</head>

<body>

<div class="flex-grid">
  <div class="col"><h1>America Has Its Problems, But Design Can Help Solve Them</h1> 
<h2>Author: Liz Stinson and Margaret Rhodes<br>Date of Publication: 02.01.17.</h2></div>
</div>

<div class="flex-grid">
  <div class="col"><h2>Designers do more</h2></div>
</div>

<div class="flex-grid">
  <div class="col"><p>Designers do more than make shiny, pretty things. They shape how the world works by solving problems. And right now, the country has some problems.</p></div>
  <div class="col"><p>Regardless of whether you were protesting in the streets last weekend, you&#8217;d probably agree that people of all political stripes have receded into echo chambers. Discourse has devolved into arguments over facts and alternative facts. No one is sure how to move forward.</p></div>
  <div class="col"><p>Designers can help. There is a cadre of designers who devote themselves to politics and civic engagement. We spoke to some of them: researchers who study and clarify voting laws, designers who help communities navigate local regulations, and optimistic technologists. They offered five basic principles to help chart a more meaningful path forward:</p></div>
</div>

<div class="flex-grid">
  <div class="col"><h2>Remove Roadblocks</h2></div>
</div>

<div class="flex-grid">
  <div class="col"><p>Participating in a democracy can feel daunting. Things like arcane voter registration laws, convoluted ballot measures, and the labyrinthine nature of government create confusion and little incentive to get involved.</p></div>

  <div class="col"><p>Designers call snags like this friction, and the best of them excel at removing them. When Google realized how many people were searching for voting information, its experience designers built tools to intuit their questions. Typing &#8220;where do I vo-&#8221; brought up tidily packaged answers presented in plain language. &#8220;Voter ID laws are so confusing and give you too much information,&#8221; says Lisa Tilson, a UX writer at Google. &#8220;A lot of my job is just pulling out information people do not need.&#8221;</p></div>

  <div class="col"><p>You don&#8217;t need Google&#8217;s pockets or human resources to make an impact. After the election, Pioneer Works, a multidisciplinary studio and incubator in Brooklyn, created a kiosk where people can literally make their voices heard. A visitor can enter his address in a computer, record a message, and the kiosk sends the voicemail to his state representative. By removing roadblocks, designers can make getting involved a little easier.</p></div>
</div>

<div class="flex-grid">
  <div class="col"><h2>Expect To Do Non-Design Work</h2></div>
</div>

<div class="flex-grid">
  <div class="col"><p>The designer-client relationship revolves around an assignment, a Big Idea, and an unveiling. Political change doesn&#8217;t work that way. It happens slowly, and incrementally.</p></div>

  <div class="col"><p>“We get calls from people all the time saying, &#8216;We want to do something, we want to make an app,&#8217;” says Whitney Quesenbery, the co-founder of the Center for Civic Design. There&#8217;s nothing wrong with being ambitious, but an app isn&#8217;t always the answer. Designers may not regularly do clerical work, but elections offices and local non-profits need it. “They need proofreaders and volunteers and people to answer phone calls,” says Dana Chisnell of the Center for Civic Design. &#8220;Designers are often good at those things.&#8221;</p></div>

  <div class="col"><p>The work provides invaluable insights. Think of it as user research, says Christine Gaspar of the <a href="http://welcometocup.org/" target="_blank">Center for Urban Pedagogy</a> (CUP), a non-profit that uses design to increase civic engagement in underserved communities. Getting involved on a grassroots level can reveal problems that might not otherwise be obvious. &#8220;Show up and listen for a while before you figure out how you can help them as a designer,&#8221; Gaspar says. &#8220;Over time you&#8217;ll realize they might have a design you can help with.&#8221;</p></div>
</div>

<div class="flex-grid">
  <div class="col"><h2>Engage With Your Community</h2></div>
</div>

<div class="flex-grid">
  <div class="col"><p>Every designer brings personal experiences and biases to a project, but effective designers put them aside and strive to understand the people they&#8217;re working for. “How do you as a designer show up in a way that’s being an ally and an accomplice first?” says Gaspar of CUP.</p></div>

  <div class="col"><p>A few years ago, Gaspar and her team were helping develop a pamphlet that would help public housing residents understand their rights. Her designer chose a particular shade of blue for the typography, which elicited a strong reaction from the community members. &#8220;They said, &#8216;You can&#8217;t use that color,'&#8221; Gaspar recalls. &#8220;That&#8217;s the color of the Housing Authority.&#8221; It was a simple mistake and easily rectified, because Gaspar&#8217;s team involved its constituents in the design process from the very beginning of the project.</p></div>

  <div class="col"><p>The experience led Gaspar to an important insight: Oftentimes the quickest path to a solution is to stop talking and start listening. &#8220;It’s about being respectful and showing up and creating spaces for people to give input that is meaningful,&#8221; she says. &#8220;It needs to be clear that we value their input. We’re not saying, &#8216;Here&#8217;s what we did, do you love it?&#8217; We’re saying, &#8216;Here&#8217;s what we did, what’s wrong with it?'&#8221;</p></div>
</div>

<div class="flex-grid">
  <div class="col"><h2>Create A Shared Language</h2></div>
</div>

<div class="flex-grid">
  <div class="col"><p>Bureaucracies tend to move slowly and communicate poorly, something Sarah Brooks discovered when she became chief design officer at the US Department Veteran Affairs in 2014. President Obama wanted her team to make an agency with more than 365,000 employees into the government&#8217;s best customer service organization. She and her team worked with the US Digital Service to launch <a href="https://www.vets.gov/" target="_blank">Vets.gov</a>. They were also tasked with creating a consistent patient experience across 135 medical centers, community clinics, and hospice centers.</p></div>

  <div class="col"><p>Achieving this required bringing together a wide range of disparate goals, objectives, and vocabularies. &#8220;You need to be really good at finding a shared language,&#8221; Brooks says. Brooks began introducing VA staffers to new terminology like  &#8220;journey map,&#8221; which describes a graphic that helps employees understand what veterans might be experiencing and how the agency can help. It took a little while for VA staff to catch on&#8212;“this is a service design 101 tool but it’s very new to VA,” she says&#8212;but eventually it became common parlance.</p></div>
</div>

<div class="flex-grid">
  <div class="col"><h2>Be Patient</h2></div>
</div>

<div class="flex-grid">
  <div class="col"><p>It takes time for effective design to work its way into people’s lives. And when it does, the outcome isn&#8217;t always obvious. “Working in the social space is not glamorous and it takes time,”says Mariana Amatullo, co-founder of <a href="http://designmattersatartcenter.org/" target="_blank">Designmatters</a>, a program that focuses on design and social innovation at ArtCenter College of Design. “Some of the work I’ve been part of, I haven’t seen results, in terms of community impact, for two, three, five years after a campaign might have been designed or a product proposed.”</p></div>

  <div class="col"><p>Years ago, Amatullo worked with the University of Southern California to reduce cervical cancer rates among Latinas. The problem wasn&#8217;t money or access to healthcare, but communication&#8212;women didn&#8217;t know when to get tested. Designmatters created Es Tiempo, an campaign encouraging women to get annual checkups when the Jacaranda trees common to Los Angeles bloom each spring. “It took really five years to see that campaign implemented in some of the most vulnerable communities in LA,” she says.</p></div>

  <div class="col"><p>Brooks, who came to the VA from the tech sector, says designers have to adjust to the slower pace when they do civic projects. “You have to think in very long time horizons,” she says. “You’re not trying to radically disrupt. Sometimes incremental change is the best thing you can do in government.” The work requires small steps, she says. But they often lead to big ripples.</p></div>
</div>

<div class="flex-grid">
  <div class="col"><p>UPDATE 10:10 AM ET 02/1/2017: This story has been updated to accurately reflect the US Digital Service&#8217;s role in building Vets.gov.</p></div>
</div>

</body>
</html>


              
            
!

CSS

              
                @import url(https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css);

html {
	font-size: 17px;
	font-family: 'Crimson Text', serif;
  background-color: PapayaWhip;
}

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 2em;
}

a {
	text-decoration: none;
	color: orangered;
}

.flex-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-grid .col {
	-webkit-box-flex: 1;
		-ms-flex: 1;
			flex: 1;
}

@media (max-width: 400px) {
	.flex-grid,
	.flex-grid-thirds {
		display: block;
	}
	.flex-grid .col,
	.flex-grid-thirds .col {
		width: 100%;
		margin: 0 0 10px 0;
	}
}

* {
	box-sizing: border-box;
}

body {
	padding: 1rem;
}

.flex-grid {
	margin: 0 0 1rem 0;
}

.col {
	padding: 0 1rem;
	background: floralwhite;
}

/* otf is better */
              
            
!

JS

              
                
              
            
!
999px

Console