GD202 Week 7
Publishing with Medium, Markdown and GitHub
February 26
GD202 Interactive Design I
- Site publishing platforms, open source and the democratization of the web.
- Learning to publish with text editors, markdown, Medium, and GitHub.
- User testing on multiple screens.
- Conduct user testing methods on the wireframe process for good interactivity.
- Assign Project 5: User Testing & Iteration. Due March 12.
Publishing Platforms
Over the years, technologies have matured and communities of people have gathered around the most popular platforms. The open source movement has created a means of sharing the complex work of developing sites, content management systems and development platforms. Distributing the effort brings constant improvements and innovations.
WordPress
WordPress is the most popular CMS in the world and is used by nearly 75 million websites. According to WordPress, more than 409 million people view more than 23.6 billion pages each month and users produce 69.5 million new posts and 46.8 million new comments every month. It also powers more than 25% of the world’s websites.
Limitations
However, WordPress is a complex CMS, a content management system built with PHP, a scripting language for building websites. The problem with content management systems for websites is that they were designed only for websites.
These days, we cannot assume that we are designing for only a single output. Media consumptions changes over time, with new introduction of new media.
Design for Mobile
When Apple introduced the iPhone on January 9, 2007, the world of design shifted dramatically. People came to realize that what we were designing for desktop screens was not going to work for mobile phones.
Responsive Web Design
Ethan Marcotte publishes an article in A List Apart titled “Responsive Web Design” that introduces a revolutionary new approach to CSS layout on mobile devices. It merges fluid grids, flexible images, and media queries to create layouts that respond to the width of the browser. Within a couple of years, responsive web design will become the industry standard.
COPE
NPR (National Public Radio) gave us the idea of COPE: Create Once Publish Everywhere.
Because of these changes in the marketplace, NPR decided to release a comprehensive API of all of our content that we have rights to redistribute. If our content is truly open, it will enable users to mash it up, keep it relevant to them, and share it with new audiences in places where those people are. Although NPR.org is still critical to our strategy, we can no longer rely exclusively on the site as a way to reach people.
Most content management systems for the online world are used to create Web pages. That said, the Web page is just one possible output for the content (albeit, an important one). In building our CMS at NPR, our goal was to make sure the tool could publish to anything, including NPR.org. If our focus did not consider other platforms, we could have ended up with a Web publishing system that binds the content too closely to the Web site itself.
Content Strategy
Kristina Halvorson of Brain Traffic brought content strategy to the web.
Karen McGrane realized that we would be facing the greatest challenges once we realized that the way we have been designing for the web, trying to reproduce print design in the digital world, was solving the wrong problem. She works to help people understand the challenges that NPR was trying to solve, since their goal of sharing public information and open data as widely as possible meant that they did not want information to be constrained by a single delivery platform, such as the desktop web. The solution was to start with structured data that could be output to any .
Markdown
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).
The Markdown syntax is used by several web-based platforms, content management systems, and content editors. It can be very useful to understand how to use this simple way of turning text into HTML that can be used to create content for web pages.
To practice using the Markdown syntax, try StackEdit.
Open Source
The open source movement has revolutionized the way we work.
The Mac OS is running on a customized version of Unix, an open source operating system.
Code Sharing
If you remember the movie TRON, you’ll be familiar with the idea of closed source and proprietary enterprise systems that use an authoritarian and centralized approach to the control of information and the open source world where data is democratically and openly shared and distributed across the network. Corporations and large enterprises depend on patents and laws to protect intellectual property to generate revenue through licensing the right to use software and data. Open source information and systems were intended to disrupt the enterprise models and give power to individuals.
Git, a distributed versioning system for developers, became the standard for keeping track of changes to files and collaborating on coding projects. GitHub became the most popular platform to bring Git to the web and enable developers to freely share their work around the world. Bitbucket and GitLab are popular competitors.
GitHub Pages
If your work is open source, you can publish your site for free on GitHub.
You get one site per GitHub account and organization, and unlimited project sites.
My own GitHub site is a work-in-progress:
Atom Editor
GitHub also creates open source tools for developers, such as the Atom text editor.
Atom is a text editor that’s modern, approachable, yet hackable to the core — a tool you can customize to do anything but also use productively without ever touching a config file.
It is even possible to collaborate on projects in real time.
Mozilla and JavaScript
To oversimplify things a little, the enterprise world is represented by Microsoft and Windows. The open source world is more closely aligned with Apple and Mac OS. However, Apple’s ecosystem of devices and software are closed to better manage the quality of the products and designs that are associated with the Apple brand.
The web continues to be the area where the open source ethos is best expressed through the sharing of knowledge and code. The Mozilla Foundation officially manages the JavaScript development language.
Mozilla is the not-for-profit behind Firefox, the original alternative browser. We create products and policy to keep the internet in service of people, not profit.
JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.
Open Source Typography
The League of Moveable Type claims to be the original, the first, the open-source font foundry.
Started in February 2009 — back when designers were just gaining the ability to put custom fonts on the web — we opened our doors with a font, a manifesto, and a calling — to raise the design standards of the web.
Mozilla has also developed and released fonts as open source, working with Eden Spiekermann and Carrois & Carrois.
Adobe has also released open source fonts:
Adobe Source Sans can be used with TypeKit:
The SIL Open Font License (or OFL in short) is a free and open source license designed for fonts by SIL International.
Font Library
Google Fonts has compiled a collection of open source fonts.
Node.js
Developers became less interested in learning multiple scripting languages to build projects when the possibility of using a single language for both the front end and for server-side environments. When Ryan Dahl wrote Node.js in 2009, it became possible to write JavaScript for rendering in the browser and for the servers and applications that serve content on the internet.
Static Site Generation
As a web designer and developer, I have chosen to focus on tools that help organizations build sites that have the potential to adapt to multiple outputs. By decoupling content from presentation, I have far more flexibility to build complex data structures that simplify the creation, editing and maintenance of content. I use the following resources and tools to build the Run for Water site.
Resources
Medium
Because of the complexity of creating and managing websites, people often prefer to simplify the process by outsourcing the work to the service that provides the best experience for writers and content producers. There is sometimes a trade-off, but the advantages can outweigh the disadvantages. Medium is a case in point.
Medium is an online publishing platform developed by Evan Williams, and launched in August 2012. It is owned by A Medium Corporation.[3] The platform is an example of social journalism, having a hybrid collection of amateur and professional people and publications, or exclusive blogs or publishers on Medium,[4] and is regularly regarded as a blog host.
Williams developed Medium as a way to publish writings and documents longer than Twitter’s 140-character maximum.
Medium is trying to be the opposite of Facebook, which is only natural, since Ev Williams is a co-founder of Twitter.
A platform built for people.
- quality
- original ideas
- clean reading experience
- engagement & depth
- viewpoints
Medium Support
Browser Testing
The challenge of testing a website across multiple devices means that you either need to have access to multiple devices, or you need to use a service like BrowserStack.
There are other tools available, both free and paid services.
User Testing
A List Apart is always a good resource for learning about how to do user testing.
Smashing Magazine is also a good resource for web developers.
