The Grid: Pitch Book

Bachelor of Technology in Visual Communications Senior Thesis Book Department of Visual Communications: Art + Graphic Design Farmingdale State
College, State University of New York
the grid
jeffrey betts may 14, 2013
table of contents
The Grid: Service Description
Visual Strategy
Cultural Relevance
Target Audience
Direct & Peripheral Competition
Promotional & Colleteral Materials
Exhibition Materials
Business & Post-Graduation Plan
Ancillary Products
14
38
50
60
70
78
82
88
v the grid
vi
executive summary
The Grid is a responsive website to educate and allow clients (small-medium business owners) aged 35-44, in partnership with designers aged 22-30, to learn about the process of arranging content on a grid, to learn why it is important in terms of responsive web design, and to learn the real world economic/business impacts and benefits.
MOST WEBSITES CURRENTLY use a grid to organize content, though not in a way that is effective or that focuses on usability across a wide array of devices. Users expect that websites are optimized and adjust appropriately for the device they are using. Clients commonly are concerned about the added cost/time for a responsive design, not understanding what responsive design is and the benefits. The Grid will feature an illustrated guide, a gallery of responsive websites, and a before and after demo, which will highlight the advantages and why it is needed for the modern web.
Websites such as This Is Responsive and A List Apart demonstrate examples of responsive design, but do not educate the user as to why it is important and are too advanced for the average user. Wee Nudge focuses on convincing clients, but does not talk about responsive design. With The Grid, users will be educated about the grid, about its impact on responsive design, about why responsive design is significant, and about the financial benefits.
vii the grid
executive summary viii
introduction
Design is my life. As a graphic designer and problem solver, over the past several years I have worked with grids, typography, and images to create beautiful, memorable, and powerful pieces that resonate with my audience. As a technology enthusiast, I love working in website design and development as well as interaction design, for the infinite possibilities and interactive experiences.
I ENJOY WORKING WITH TECHNOLOGY and applying it to design problems. As I frequently design for and use the web on mobile devices, I frequently observe how many sites do not use a grid effectively and/or are not responsive, making them unusable on smaller screens. Having experience and a passion for grids and responsive design, I decided to pursue this concept for my project. Successful sites that are responsive include The Boston Globe, Foodsense.is, and Microsoft, where in each case, the sites dynamically adjust to the browsers width. Im an avid reader of design blogs such as Smashing Magazine, CSS-Tricks, and Six Revisions. I often see effective examples of responsive design. I believe it is our job as designers to educate our clients about what we are doing and why.
The Grid formed as a result of my own experiences and research, with the focus of creating a more modern, beautiful web through education and demonstration. Im passionate because I use the web every day on several devices and I expect websites to be optimized for and adapt to different screen sizes. I am knowledgeable about technology and the needs of designers and clients. From my previous experience working with clients, I understand they are not always knowledgeable and need complex topics to be clearly explained. I am the right person to address my target audience; I know what both clients and designers want. As a user, I am constantly frustrated by websites that are not optimized for mobile devices. I can build a site that addresses the needs of both designers who are pitching a responsive website and of clients who are looking to expand their business.
ix the grid
introduction x
the grid: service description
aaaaaaaa aaaa
aaaaaaaaaaaiia aaaaaakaaaaaa
aaaaaaaa aaaa
aaaaaaaaaaaa
2 the grid
the grid: service description 3
core product
The core product, The Grid is a direct response to the need for education by designers to clients about responsive design. This need to educate clients about responsive design was exemplified by Erik Runyon, who is the manager of Interactive Development at the University of Notre Dame. I had the opportunity to speak with him, where he expressed great interest in The Grid, noting the need for such a product.
Remember, were the ones that are reading the development blogs, trying all the new tricks and for the most part agree that RWD (when done right) is the future of web development. Our clients will most likely never read A List Apart. Its up to us to be the educators and professionals we are, do whats best for our clients, and help them to understand why were doing what were doing.
erik runyon, manager of interactive development university of notre dame
4 the grid
THIS QUOTATION SHOWS THE NEED for The Grid and for designers to educate clients about responsive design and why it is important. The Grid is a fully responsive website, consisting of three major sections: Grid, Responsive Design, and The Results. Each individual section is broken up into subsections relating to its parent. These three sections are grouped collectively into an informational tour, which the user (a small business owner) would navigate through, learning what responsive design is and the significant benefits it offers to their business. The structure of The Grid is intended to tell a story by building on information that relates to the previous section. A key element
in the content strategy was the accessibility of the information, where it is understandable and clear to the target audience (small business owners), who are generally not knowledgeable about the latest website design techniques. Interactive demos, galleries, and examples are provided within each page of the tour in The Grid, resulting in a greater understanding of the material. These demos are highly visual and build from previous demos/content. The website itself is consistent and organized, as content is placed where a user would expect it. Top navigation menus provide access to other sections in the site, and the footer provides an expanded menu to site content.
homepage
The user starts their experience with The Grid on the homepage. The primary focus of the homepage is to direct the user to the tour about responsive design. This is accomplished through a large call to action area on the homepage, indicating to users that The web is everywhere and posing the question: Is your business ready? This immediately ties in a point of focus for The Grid, where the site speaks to small business owners and addresses the business benefits. The homepage additionally features a short introductory video, designed to highlight the key talking points of The Grid. It introduces the major ideas of the site, including decreasing attention spans, increase in mobile device activations, and the need to be everywhere, in a way that is concise and fast-moving. The homepage also contains a free trial link to the Pro subscription of The Grid, which contains member-exclusive content and demos.
homepage
6 the grid
section overview page

A section overview page precedes each section of The Grid, through the use of a large photo that captures the audience and centers their focus. These section overview pages provide a short introduction to the content that is about to be presented and set the tone of the upcoming content. Consistently reflecting how the homepage is built, the section overview pages have a clear focus and call-to-action: to start the section of the tour. A secondary Browse by Section link allows the users to select a specific section or part of the tour according to their interest. To drive traffic to the Pro subscription landing page, a banner at the footer invites the user to start a free Pro subscription trial.
individual section page

The individual section pages are a fundamental part of The Grid. Each page is divided into three parts, based on the previous subsections. A fixed header and navigation bar on the top of each page adds visual interest and is functionally useful to browse between each part of the page. Content from other sources is also used, namely pull quotes, which are highlighted in the text. For users who are not logged in or that have a free account, a small banner is displayed at the end of each part advertising the Pro subscription. Interactive demos and other media, including photos and videos, are called out and are an integral part of the overall piece. Next to each demo is a set of actions designed to enhance the user experience a pop-out link to bring the demo to a new window, a comment/share button, and a favorite button. The pop-out and favorite features requires an account and an active Pro subscription. At the basic
overview page
section page
8 the grid
level, The Grid provides a wealth of information, but with a paid subscription, more content can be unlocked from further information, exclusive content, and member-only demos.
an effective grid from a user-experience perspective, this section also stresses the effects of a disorganized website for a business. It has been observed over the past several years that an individuals average attention span is rapidly decreasing. In a 2012 report by The Associated Press, the average attention span was eight seconds. Incidentally, the average attention span of a gold fish is 9 seconds . This statistic speaks to the importance of making your content usable and organized. From a business owners perspective, not having an organized site could mean a potential customer giving up and seeking out a competitor. The section Grid is made up of the subsections What Is It, which details what a grid is; How Is It Used, which shows how a grid is used to present information, and Why Use It, which discusses the importance and need of a grid.
responsive design
This portion of The Grid is directed at the concept of responsive design. It is the very essence of this project because without it, The Grid wouldnt exist. Responsive design is the ability for a website to adapt and resize dynamically to the device it is being viewed on. With responsive design, a website will be easily accessible anywhere, on any device and theoretically on future devices/form factors. In a survey conducted by The Grid, 94% of respondents believed that a website should adapt or resize based on screen size. Users expect a site to be responsive. They expect a site to work wherever they are, on whichever device they are using. Responsive Design is made up of the subsections: What is Responsive Design, which explains what responsive design is; How is it Used, which shows how responsive design is used today, and Why use it, which highlights the reasons and impacts of a responsive website.
the results This section describes the merging of grids and responsive design the benefits, statistics, and reasons. It is the core of The Grid. This section answers the question why: why is it important for a business. The information and content used in this section are supported by research, surveys, and advice from experts in the field. It is real-world based and is intended to convince small business owners about the reasons and significance of grids and responsive design. An example statistic is that after adopting a responsive design, ONeill Clothing saw a 101.7% growth in revenue on iPod and iPhone devices, according to digital product leader Luke Wroblewski. The Results section of The Grid consists of examples and before/after demos, statistics, and case studies.
individual sections
The Grid is made up of the following sections:
grid
This section is focused on the importance of using a grid to organize content. It emphasizes the need of content anywhere, though primarily focusing on a website, to be logical, unified, and arranged in a way that meets the expectations of the users. On the Web Style Guide, this significance was illustrated by the following: A balanced and consistently implemented design scheme will increase readers confidence in your site. [...] Your first step is to establish a basic layout grid. As the use of a grid is a key starting point of any website, it is placed first in the overall tour. Not only stating the impacts of
10 the grid
gridsite
Alongside the educational components of The Grid is Gridsite, an easy, straight-forward, and fast way to build a responsive website. It simplifies the process of building responsive websites by offering the user an array of pre-built templates as a starting point for their website. Once a template is chosen and a new site is set up, the user will have access to the site editor interface, which will allow them to
element must align to the grid. As a tool built by designers and developers, Gridsite recognizes the importance of a designer, and as a result encourages their participation throughout its user instructions. Gridsite is intended to make the task of developing a functional, usable, and accessible website simple and effortless.
resources
drag-and-drop elements and assets from a collection of commonly used objects, including headlines, subheads, buttons, images, and forms. The user will be presented with a getting started tour as well, to better introduce them to the Gridsite interface. A separate panel would hold imported assets, such as images and videos, which the user could drag and drop onto the canvas. Every site created with Gridsite is set on a grid. If needed, the number of columns and gutter widths (the area between column guides) can be customized by the user. The use of a grid is required on Gridsite, where every
resources
In addition to the three core sections, a resources section includes a showcase of successful websites that use a grid and are responsive. Users can submit and comment on the examples. There is also a collection of informational videos, designed to introduce and educate small business owners about responsive design and use of grids. A page containing external links to other material online is also provided in the resources section.
gridsite
12 the grid
14 the grid
visual strategy 15
visual strategy
brand attributes
THE VISUAL STRATEGY seen throughout all facets of The Grid are consistent and engaging. The branding is designed to capture the interest and attention of the target audience, small business owners and designers. In developing the visual strategy for The Grid, a set of brand attributes were determined that exemplify the core characteristics of the product.:
straightforward
Information is structured in a way that is easy to understand and not containing technical jargon. Most small businesses would not t care about the underlying code, only the benefits/impact.
brand visual toolkit

logo & development
The logo, elements, color palette, and typography for The Grid are professional and focused. It was imperative that the logo, tagline, and other branding associated with The Grid speaks to the core message of the site, including the need for organized content and responsive design. Following a series of sketches and initial digital comps of the logo, a decision was made to place more emphasis on responsive design and the need to be everywhere, as the use of a grid is only part of a responsive website. This determination drove the tagline The web is everywhere, which is seen in each logo. Subsequent logos were better refined and closer to the core message. Actual device iconography was attempted as part of the logos, but was found to be unnecessary. These device icons would later become branding elements that complement the logo. In many of the logos, they featured arrows pointing in different directions. These arrows are used to symbolize motion and the spread of the web being everywhere and on different platforms. A final logo was eventually chosen, which is minimal, clean, and captures the fundamentals of The Grid.
forward thinking
It acknowledges that technology will improve over time. The web as we know it will be used on more and more devices, in some form factors that we dont even know about today. Focusing on responsive design, which should work across every device (not just smartphones/tablets) will result in sites that should, in theory, be usable/ready for any new device/form factor that comes up. Tailoring sites to a specific device type (i.e. mobile site) means that when a new form factor comes up, your site would not be ready for it and will again need to be redesigned.
educational
It educates and demonstrates what responsive design is and the benefits it affords to a business.
valuable
It will show there are real world, proven economic benefits of using responsive design to a business/organization.
focused
Information is developed for small business owners.
final logo
initial sketches
16 the grid
visual strategy 17
typography
The typography that was chosen for The Grid is a clean sans-serif typeface Aaux Pro. A smallcaps version of Aaux Pro was also chosen for headlines, subheads, and captions. A third, slabserif typeface was chosen primarily for body copy, Kulturista, which contrasts with the sans-serif Aaux Pro. Aaux Pro is modern and refined, and though The Grid speaks about organizing content on a grid, using an alternative typeface such as Helvetica is rigid and unemotional.
Aaux Pro
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 aaux pro sc abcdefghijklmnopqrstuvwxyz 1234567890
Kulturista ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
color palette
the color palette chosen for The Grid is corporate and modern. The colors selected are a series of grays, a teal-blue, and a light yellow that is commonly used as an accent color to emphasize key information.
photography
Photography is used throughout the section pages in the header images, and is commonly an abstract blur or an image to capture life and the world. Large, immersive background images are commonly used and are modified, so that they do not interfere with the rest of the content.
logo explorations
18 the grid
visual strategy 19
initial sketches
top navigation call to action showcase link play intro video
initial sketches
logo and top navigation header image and title
subsections
footer advertisement footer navigation
homepage
section overview page
20 the grid
visual strategy 21
initial sketches
logo and top navigation header image with title sidebar to browse page
additional sketches
interactive demo footer navigation
section page
22 the grid
visual strategy 23
wireframes
call to action to start tour
wireframes
header browse section
subhead
page content
showcase examples video players before & after example
interactive demo
footer
footer
homepage
homepage
24 the grid
visual strategy 25
initial prototypes
initial prototype testing
testing the grid on tablet and smartphone
26 the grid
visual strategy 27
homepage section overview & section page
refined mockups
homepage overview page browse by section section page
gridsite mockups
gridsite editor and insert image selector
28 the grid
visual strategy 29
the grid is everywhere
homepage on a desktop
homepage on a tablet
homepage on a smartphone
30 the grid
visual strategy 31
tour overview on a desktop
tour overview on a tablet
tour overview on a smartphone
32 the grid
visual strategy 33
section page on a desktop
section page on a tablet
section page on a smartphone
34 the grid
visual strategy 35
introduction video
introduction video
announcer:
As a small business owner, your website is very important. Its how you reach out to your customers and bring in new business. People on the web have always had lower attention spans. Even as low as a goldfish. And now more and more users are accessing the web on not just computers, but also smartphones and tablets. So you want to expand your business, but dont know about the latest web technologies and are afraid of the cost and time of a site that works everywhere. Does it work? Does it really matter? Will it really help my business? With The Grid, youll learn about creating usable and functional websites that work anywhere. The Grid answers why. Why should I care? Why does it matter? Why is it so important for my business? It shows real world benefits. Real data and statistics. Start by taking the tour. Or check out the showcase for some great examples of sites that are built for the modern web. Because the web is everywhere. Is your business?
initial storyboard sketches
digital storyboard frames
Learn more at The Grid.
36 the grid
visual strategy 37
cultural relevance
38 the grid
cultural relevance 39
real world statistics

PEOPLE EXPECT TO BE ABLE TO FIND what they are looking for easily and quickly. From the aforementioned report by The Associated Press, the average attention span is decreasing over time. The average attention span in 2012 was 8 seconds, compared to 12 seconds in 2000. The average attention span of a gold fish is 9 seconds. An additional point that was reported by The Associated Press was that 17% of page views last less than four seconds as well as that 4% of page views last more than ten minutes . These statistics clearly illustrate the need for a website to be organized and coherent, which can be achieved through the use of a grid. As the public does more of their everyday computing on tablets and smartphones, compared to traditional desktops/laptops, there are ample statistics and points that prove the need for responsive design and for a website to be easily accessible on any device. For a portion of the population, their smartphone is their primary computing device. It is how they access content online and communicate with others. According to the firm Prosper Technologies and their 2013 Prosper Mobile Insights Mobile User Surveys, 47.5% of respondents stated that noted by Luke Wroblewski, stating that there are more smartphone activations daily worldwide, than are child births. There are 1.4 million Smartphones activated per day worldwide, versus 317,000 babies born per day worldwide . As this number continues to grow, mobile devices are on the verge of outpacing traditional desktops and laptops. In a report by the firm Gartner Inc., they predicted that in 2013, mobile phones will become the primary way most people access the web, over computers. In this report, they highlighted the need for a business or other organization to have a website that is accessible across different devices and platforms: Directed at small business owners, Inc. Magazine featured an article entitled Say Hello to the One-SizeFits-All Website, which details the rapid growth of mobile devices and the need for a small business to adopt a website that is functional everywhere:
formats will become a market barrier for their owners much content and many sites will need to be reformatted/rebuilt.
I use my smartphone for all the functions, its my life.

In that same study, it demonstrated the rapid increase of smartphone ownership. In January 2012, approximately 48% of respondents owned a smartphone, and by January 2013, that number was at 55% . Even more surprising is a statistic
Websites no longer live on the desktop. Your customers are on their tablets and smartphones browsing the Web, seeking information, often with a transactional intent--serving their mobile needs has become paramount.
Although a growing number of websites and Web-based applications offer support for smallform-factor mobile devices, many still do not. Websites not optimized for the smaller-screen
40 the grid
A key benefit of a responsive website is the increased conversion and usage rates on mobile devices, including smartphones and tablets. Luke Wroblewski wrote about this in a 2013 article entitled Data Monday: Impact of Responsive Designs, where he provided a list of different companies and the benefits they reaped after adopting responsive website. Time Inc., for example, saw a 23% increase in mobile usage, from where it was previously . These and countless other statistics demonstrate the importance of responsive websites and the economic benefits for a business.
After adopting a responsive website, ONeill Clothing has seen increases in conversion rates and sales:
101.7% 407.3% 41.1%

Growth in revenue on iPod and iPhone devices Conversion rate increase on Android devices Increase in revenue on non-mobile devices
luke wroblewski
42 the grid
a person has the attention span of a gold fish.

According to The Associated Press, the average attention span in 2012 was 8 seconds. The average attention span of a gold fish is 9 seconds.
17%
of page views last less than four seconds.
4%
of page views last more than ten minutes.
users need to be able to find information on a website quickly. otherwise, they leave.
44 the grid
there are more smartphones activated daily wordwide than are child births
1.4m
smartphones activated per day worldwide
317k
babies born per day worldwide
46 the grid
mobile phones will overtake pcs as the most common web access device worldwide.
Although a growing number of websites and Web-based applications offer support for small-form-factor mobile devices, many still do not. Websites not optimized for the smaller-screen formats will become a market barrier for their owners much content and many sites will need to be reformatted/rebuilt.
gartner inc.
users expect responsive design

In a 2013 survey conducted by The Grid, 94% of respondents feel that a site should adapt or resize based on screen size.
by 2013,
question
what do you expect from a website when viewing it on a mobile device?

That the site fits the device it is being viewed on. To clearly be able to see and click on everything just as I would be able to on a regular computer. For it to have the same features as it does on my desktop.
48 the grid
target audience
50 the grid
target audience 51
personas
The Grid is intended for both designers age 22-30 and clients (primarily small business owners) age 35-44. The client wants to see how the use of a grid and the inclusion of responsive design will benefit their business in a way that is simple and direct. The designer wants to encourage their clients to adopt a responsive website and persuade them of the positive economic impacts.
leslie, 38
A TYPICAL USER of The Grid is Leslie. Leslie has a bachelors degree and is a 38 year old owner of a small seafood restaurant in SoHo, NYC. On a typical day she can be found at her restaurant observing/speaking to customers and helping out her employees. She coordinates daily menus, experiments with new dishes, and speaks to
Restaurant Owner Wants to expand her business Diners want her site to work on their smartphones/tablets. Afraid of the cost/time of a responsive site. She will find out that responsive design is easy to understand and with a designer can be seamless.
diners about their experiences. She also loves to promote her business and bring in new customers every day. For Leslie, expanding her business and reach is very important. This year she has been using her website more to show daily menus and promote her establishment. She has a basic knowledge of Facebook and Twitter and uses these services to promote her business and connect with customers. A very common remark she hears is that her restaurants website does not work well
52 the grid
target audience 53
on their smartphone or tablet and requires them to zoom in and pan around the page. Recently she has taken an interest in redesigning her current website and her designer recommended she consider a responsive site that resizes across multiple devices. Leslie is not technical and is frustrated whenever she has to make sense of new technologies. She wants new technology (responsive design) explained in a way that is simple and easy to understand and she wants to know why it is important. This lack of technical knowledge and frustration with having to learn
about new technology online will be addressed is logical and understandable. The Grid will allow Leslie to understand how a grid is used to organize content in a way that better meets the needs of her customers as well as responsive design. She will see what it is and how it will positively impact her business. She will learn about responsive design and see that this new technique has real value and can be very profitable for her restaurant.
Freelance Web Designer Frustrated when clients dont recognize need for RWD. Frequently explains RWD and the benefits. Joe will be able to better explain RWD to clients and illustrate the benefits (better design results)
with The Grid, which will discuss it in a way that
joe, 25
JOE IS A 25 YEAR OLD freelance web designer and developer in Brooklyn, NY. He has a bachelors degree and is very enthusiastic about technology and design. He is heavily involved with the design and developer communities in New York City as well as online through blogs, news websites, and industry associations. He enjoys working with new online technologies and learning about new techniques that he can apply to his own work. In his day-to-day life he can be seen reading, guest posting, and commenting on design/development blogs such as A List Apart and Smashing Magazine. He also reads more technology-focused news websites such as The Verge and TechCrunch. He regularly attends networking events, workshops, conferences, and seminars sponsored by organizations such as AIGA and IxDA so that he
54 the grid
target audience 55
can connect with other designs/developers and have a greater understanding of what is happening in his industry. Joe wants to create modern websites that are usable and reflect the ways in which users are accessing the web today, whether it be through a desktop/laptop, tablet, or smartphone. He uses his iPhone to access content when he is not at home or on his laptop, and is frustrated when he is forced to use a website that was designed for a desktop on his phone. These experiences with non-responsive sites drives his love of technology and the possibility of creating a website which is accessible on any device. In his freelance work, he works with small businesses, and frequently recommends responsive websites. Often he will have to explain what responsive design is to a client, usually older clients, explaining the benefits
and importance of it. Most of his older clients are value or economic impact, but are instead concerned about the added time and/or costs involved. Joe dislikes having to always explain this to his customers, and wants an easier way to show what it is and the real world advantages. The Grid will assist Joe in explaining what responsive design is to his clients, showing them that there are actual advantages, and that is valuable through case studies and statistics. Once the client is convinced of the benefits they will embrace it, become interested, and seek a responsive site. Joe is then able to create a website which works everywhere, expand his portfolio, and build for the modern web.
Wedding Reception Venue Owner Always helping out couples. Current website doesnt work on mobile devices. Been asked about this before, doesnt see the need. Doesnt want to spend money on unnecessary things. Lisa will see that there are benefits of RWD and it is not a waste of money. She will learn about real economic benefits of RWD.
resistant to a responsive site, as they do not see the
lisa, 40
LISA IS A 40 YEAR OLD owner of a small wedding reception venue in Gilbert, AZ. She has a bachelors degree and spends most of her day at her business coordinating with couples and vendors. In her daily life she assists couples in planning every facet of their special day at her facility, from the package they should choose, to the photographer, and the caterer. On wedding days she is always available and strives to provide the best possible experience. She enjoys interacting and helping out others as well as seeing joyful couples with their friends/ families. She loves her work at the venue and the people she has the opportunity to be with daily. Being a business owner she is constantly aware of her finances and always wants to spend her money in a way that is valuable for her business and its future needs. She has a website which
56 the grid
target audience 57
information, videos, and open house details as well as a Facebook page which she uses to post updates about her business. Her current website is not optimized for mobile devices (smartphones and tablets). Although she has been asked about this by some of her past customers, Lisa does not see the need for it nor does she see any monetary benefit of doing so. Her goals are to remain profitable, expand her business, and reach out to new couples; she does not want to spend money on a technology that she feels is not necessary to the financial growth of her
see the commercial advantages that a responsive design affords to her business and why it matters, backed up by real studies and statistics. She will recognize that a new responsive website does not just look good, but it can also be very profitable. Given that she is trying to spend her money in a way that helps her business, a responsive website has the potential to do just that, which Lisa will learn about through her use of The Grid.
clients want to know why.

Why should I care? Why does it matter? Why is it important for my business?
features photos of the venue, wedding package
business. Using The Grid, Lisa will learn about and
with the grid, clients will be educated and understand the benefits and importance of a grid and responsive design.
58 the grid
target audience 59
competition
60 the grid
competition 61
an overview
THERE ARE MANY DIRECT competitors to The Grid, which offer information and demonstrations about responsive design. The website This Is Responsive presents live demonstrations of responsive web design and shows different ways of organizing content including grids, tables, navigation menus, videos, and forms. It also provides a list of links to other sites online about responsive design. Another competitor, Media Queries, focuses on showcasing responsive websites. It has screenshots of each featured site showing how it looks at various browser widths, from desktop to smartphone. Responsive Design Responsively Illustrated provides a way to visualize break points in responsive design and the ways that a site changes based on browser width. As the user resizes the In addition to direct competitors, ` also faces peripheral competitors. Wee Nudge explains different terms to clients, such as the fold, spec work, and wireframing amongst others. It provides a short explanation and a set of links browser, the page changes from desktop, to tablet, to mobile. Additionally, designer and developer John Polacek prepared a presentation What The Heck Is Responsive Web Design?, detailing the process involved with creating a responsive website and a basic explanation of what it is. Lastly, Responsivedesign.ca, which was created by a digital agency, has basic information about responsive design, a few examples, additional resources online, and a blog. explaining the topic in greater detail. A List Apart is a website design and development blog that is very technical and designer-focused and describes itself as for people who make websites. Smashing Magazine is another design and development blog, but is far less technical. It features articles about website design, trends, typography, interaction design, and Wordpress. In addition, The Next Web is a technology blog, which includes articles about the latest mobile apps, technology news, new products, web development, and design. The website Six Revisions is another design and development blog, that writes about CSS, JavaScript, mobile apps, design techniques, project management, and other topics.
competitors
direct
This Is Responsive Media Queries Responsive Design, Responsively Illustrated John Polacek Presentation Responsivedesign.ca
peripheral
Wee Nudge A List Apart Smashing Magazine The Next Web Six Revisions
62 the grid
competition 63
A DIRECT COMPETITOR of The Grid is the client designer focused
focused website Responsivedesign.ca. It explains the basic details of responsive web design in a way that is less technical and more understandable. The website itself was produced by an interactive design agency, Foster Interactive, based in Toronto, Canada. Along with a basic description of responsive design, Responsivedesign.ca shows three well-known examples of it including The Boston Globe, Barack Obama, and Grey Goose. With this site, there is more educational content about what responsive design is that is written clearly the user will have a better understanding about the theory of responsive design. Though Responsivedesign.ca exhibits some examples of responsive design in use today, it does not offer any live examples or demonstrations directly on their site. This website does discuss the impacts of responsive design, citing examples and statistics from major research groups such as IDC, comScore, and Pew Research.
Smashing Mag. A List Apart The Next Web Six Revisions
This is Responsive
Resp Design, Resp Illust.
Media Queries
technical
Responsivedesign.ca Wee Nudge
demonstration
sweet spot
John Polacek
this is responsive
Additional resources are provided, but are largely geared for a designer audience, linking to articles about coding, wireframing, Drupal development, and CSS debugging. The primary areas where Responsivedesign.ca does not compare to The Grid are demonstration and showcasing examples. A core part of The Grid is not only the education about what responsive design is and the benefits, but also demonstrating what it is through the use of screenshots, screencasts,
a list apart
and live demos. Screenshots from different devices and browser widths will illustrate what responsive design is visually, mainly the way a site adapts/adjusts to the device size. Short video demos (screencasts) are used to reveal how a site responds to changes in screen/browser size, so that the user can see exactly where and how it adjusts in a recording where they can control the playback. Screencasts will be narrated and annotated, helping the viewer identify what is
client focused
competition matrix
64 the grid
competition 65
occurring in the video. Additionally, The Grid will feature live demos, which the user can interact with, and test it for themselves on a variety of devices, whether it is their desktop, laptop, smartphone, and/or tablet. Discussing the business impacts for responsive design and statistics related to it are a key part of The Grid, where results serve to prove its importance for a business. Also included in The Grid is a showcase of many sites which demonstrate successful use of a grid and/or responsive design, compared to Responsivedesign. ca which only had three examples. The Grid will showcase and highlight great design, so that users will see the potential and possibilities of choosing a responsive design. Another website which competes with The Grid is This Is Responsive. Created by Brad Frost, this site relies heavily on demonstrations, or what it refers to as patterns. It also has a wealth of
resources, ranging from different approaches, design processes, inspiration, coding techniques, and grid calculators. Overall, This Is Responsive is intended for designers and developers who are interested in creating responsive websites. It exhibits what can be done and the potential that exists with HTML5 and CSS3. Little is said about the impact of responsive design, as the audience is assumed to have some knowledge about what it is. This Is Responsive provides some education, for some of the examples it provides have a short explanation about it, highlighting things to consider if using this technique, and links to more information about it elsewhere. For each, a link in the footer allows the user to view, edit, and preview the source code of that particular demo. This Is Responsive isnt technical in the way that the initial demo is presented. Each demo is solely displaying the technique and the user is encouraged to interact with it to see how it is indeed responsive.
The technical aspects of this site are uncovered when the user wants to view the source code or access many of the resources that are linked to, primarily blogs which are written by/for designers and developers.
The Grid isnt technical; its easy to understand and devoid of technical jargon. The target audience, clients (small business owners), are not interested in the code and underlying technology of their website. What they are interested in however, is the impact it has on their business and the economic gains from a responsive website. An indirect competitor, A List Apart is intended solely for website designers and developers. Its content is technical, sometimes complex, and requires the reader to be knowledgeable and enthusiastic about website design and development. It promotes itself as a site for people who make websites, further exemplifying the anticipated target audience and the type of content presented. From the perspective of a designer or developer, A List Apart is extremely valuable for its in-depth educational articles and insights about the web. It provides a multitude of information,
The Grid is unique in that it emphasizes not just demonstration, but also education, in a way that is client focused.
Whereas This Is Responsive assumes knowledge about responsive design and provides developerfocused demonstrations with little explanation, The Grid contains information about what responsive design actually is with useful, educational demos. Demos that explain what is occurring and why it is beneficial for the user (their customer). Additionally,
66 the grid
competition 67
articles, and columns about user-experience design, typography, surveys, development, and design processes content for designers/developers, by designers/developers. Live demonstrations are rare, though the author may present screenshots to illustrate a point in the article. Pieces that discuss more developer-related topics, such as HTML5, CSS3, and APIs typically will have sample code accompanying it with an explanation of what it will achieve. Largely A List Apart is for designers and developers; it is intended for people who are genuinely interested in web design/development.
the grid answers
why
68 the grid
competition 69
ancillary products
70 the grid
aaaaaaaa aaaa
ancillary products 71
the grid is promoted online as well in print

THE ANCILLARIES and other promotional material developed for The Grid are designed to carry over the brand and the core message. To better promote and market The Grid, a series of ancillaries were developed. As The Grid is primarily an online service, much of its advertising appears online. An element of this is advertisements placed on relevant websites such as Inc. Magazine, The New York Times, Bloomberg Businessweek, and Forbes. These advertisements are strategically targeted to these websites because they are websites that the target audience, small business owners, will most likely access. Social networking pages on Facebook Additional print-based ancillaries include postcards sent to small business owners at their place of business, with impactful statistics and key information relating to the need to be everywhere. The back of the postcard includes copy that will engage the client to take the next step and sign up for a free trial of The Grid using the vanity URL provided. and Twitter are also means of communicating and connecting with small business owners and other users. Posts are intended to drive interaction between users and The Grid.
advertisement in inc. magazine
advertisement in new york times
72 the grid
A client handbook, which is designed to both market The Grid and provide a condensed overview about responsive design. This book includes sections, such as What Is Responsive Design and Showcase of Responsive Websites. The client handbook also includes key statistics and facts relating to responsive design and its importance for a business. An event guide, containing information about upcoming events at local businesses, sponsored by The Grid, will also be distributed at local expositions.
RESPONSIVE DESIGN means creating one site which resizes and adapts to the device it is being viewed on. First described in 2010 by web designer/developer Ethan Marcotte, responsive design has evolved considerably since then, becoming a near-requirement for new websites. Responsive web design has become very important in past few years because of the proliferation and variety of mobile devices, from smartphones to tablets, and anything in-between. It allows your customers to make purchases easily, keep up to date about your company, or find contact information easily for your company, whether if they are on a desktop, smartphone, or tablet. Responsive design creates better experiences for your customers by delivering the best possible experience regardless of the device. It is the future of the web. A web where smartphones and tablets may outnumber traditional desktops and laptops. Your business needs to be where your customers are. Take the first step with responsive design.
the web is everywhere. is your business?

Be where your customers are. They expect it.
gridresponsively.com/three
4 the grid client handbook: responsive design
learn more at the grid
one site anywhere.
this is responsive web design.
what is responsive design? 5
a person has the attention span of a gold fish.
17% of page views last less than four seconds.
advertisement in forbes
According to The Associated Press, the average attention span in 2012 was 8 seconds. The average attention span of a gold fish is 9 seconds.
4% of page views last more than ten minutes.
the associated press

facts and statistics 27
26 the grid client handbook: responsive design
postcard, magazine spread
client handbook sample spreads
74 the grid
Events sponsored by The Grid include Future Trends in Web Design, which discusses what is next in web design, Geolocation + Your Website, which discusses GPS in mobile devices, and E-Commerce on Mobile Devices: What to Know, which discusses the need for mobile-optimized online shopping carts. A monthly question and answer session, Monthly Open Forum, will allow small business owners to ask questions relating to the web, technology, and their business.
the web is everywhere. is your business?
the grid in your community
nyc event guide

mayjuly 2013
events.gridresponsively.com
find more events and register online at
gridresponsively.com
learn more at the grid
may 2013
future trends in web design
tuesday, may 7, 79pm
oslo coffee roasters, 422 e 75th st.
From smart televisions to 5.5-inch smartphones, what is the future of the web? What can you, as a business owner expect? Join The Grid as we speak about the future and its business impacts.
Free. Register at events.gridresponsively.com
june 2013
geolocation + your website
wednesday, june 12, 89:30pm
third rail coffee, 240 sullivan st.
Want to better reach your customers? Did you know your website and advertising can take advantage of the GPS in your customers smartphones? In this session, learn more about this and how to get started.
july 2013
e-commerce on mobile devices: what to know

thursday, july 11, 79pm
ost caf, 441 e 12th st.
Is you websites shopping cart mobile-friendly? Do you know where to begin? How shopping online is different on mobile than on desktops? What your customers expect? At this session, learn more about e-commerce on mobile and how to increase sales.
monthly open forum

thursday, may 23, 79pm
blue bottle coffee, 160 berry st.
Have a question about the web? Curious about a new technology? Want to know if there is anything else you should be doing for your business? Need advice? Now is your turn to ask at our monthly open question and answer session.
monthly open forum

monday, june 24, 79pm
birch coffee, 5 e 27th st.
monthly open forum

tuesday, july 29, 79pm
ground support, 399 w broadway.
print event guide
online event guide
76 the grid
promotional & colleteral materials
78 the grid
promotional & colleteral materials 79
the brand will be extended through supporting collateral

A BRANDED NOTEBOOK is suited for both business owners and designers, who will use it throughout their daily lives. Accompanied with the notebook is a combination pen/stylus, imprinted with the logo of The Grid. This serves a dual purpose of being used as both a pen as well as an electronic stylus for mobile devices with capacitive screens, such as tablets and smartphones. This stylus can be used with note taking and sketching applications on most smartphones and tablets. The inclusion of a stylus speaks to how The Grid exists on not just desktops, but tablets and smartphones. Stickers serve as a way to promote the brand externally as well, and can be applied to electronic devices such as laptops, tablets, and smartphones. Business cards are a traditional and trusted way of giving contact information to potential customers and clients.
business cards
stylus pen and stickers
notebook

80 the grid
promotional & colleteral materials 81
exhibition materials
exhibition materials 83
82 the grid
the exhibition space for the grid is designed to highlight the key messages
THE SPACE IS INTENDED to tell a story and walk the viewer through what The Grid is and what it offers. There are a series of three hubs which detail, each key area of the website. Each hub will integrate content from the websites section and provide key statistics and cultural relevance. The space is designed to drive movement throughout the entire span of the exhibit. At each hub, there will be a giveaway that will correspond with the section. The exhibition space will end with a live demonstration of The Grid website and an area with the exhibition book, promotional materials, and additional giveaways. The exhibition will carry over the arrows found in the rest of the brand of The Grid and will incorporate the same colors and typographic treatments.
postcard
The exhibition postcard for The Grid are intended to draw someone in, by communicating the tagline of The Web Is Everywhere and calls on the viewer to visit the exhibit to find out more about it. The postcard is on brand and repeats the arrows, typography, and color palette from the core visual strategy.
poster
The exhibition poster incorporates elements from the core brand, such as the typography, arrows, and colors, while being generic enough for the entire exhibition.
84 the grid
exhibition photos

The Department of Visual Communications: Art & Graphic Design presents
MAKE YOUR MARK
MAKE YOUR MARK
the web is everywhere

find out how to make it work for you
pitch questions
Should the target audience be designers, as they are the ones to show this website to a client? The primary target audience for The Grid is small business owners because they are more likely not to be familiar with grids, responsive design, and the benefits they afford. How would you expand The Grid? The Grid will continue to expand beyond the website through the hosting of small local events, appearances at small business expos, as well as host workshops and conferences. Why would a designer purchase the pro plan? What benefits are in it for them? For the designer, a paid plan to give them access to useful information and statistics that they can then present to a client. How does Gridsite help in making a website that is usable and responsive? Gridsite will provide a canvas for the user that is built on top of a grid. Gridsite is designed to prove a fair balance between absolute control and no control at all to the user.
the grid
exhibition dates
Mon 4/29 Fri 5/3 Wed 5/1 6Pm 8Pm
jeffrey betts make your mark senior exhibition 2013
opening reception
senior exhibition 2013

An exhibition of products, campaigns and services developed by students graduating from the School of Business Baccalaureate program in Visual Communications: Art & Graphic Design.
senior exhibition 2013
postcard
Jerey Betts Rudy Calderon Frank Corrao
Why would you educate about design concepts? The purpose of including grids in this website is to demonstrate to the user the importance of a grid to organize content effectively. How involved would a designer be in this type of a service? With The Grid, a designer would be involved by recommending the client visit this website,
GROUP 1
Exhibition Dates Mon 4/29 Fri 5/3 Opening Reception Wed 5/1 6PM 8PM
Patrick Flanagan Ellen Gilles Anne Marie Horan Adam Joseph Anthony Kondyra Alyson Prete Robert Wul
Admission is free and the gallery is accessible to persons with mobility impairments. For additional information, please call 631-420-6118 or 631-420-2181.
make your mark title contributed by rudy calderon. poster designed by jeffrey betts.
using the designer-to-client email campaign.
poster
86 the grid
post-graduation plan
88 the grid
business &
business & post-graduation plan 89
THE GRID WILL BE FINANCIALLY VIABLE through a freemium model, which will encourage users to upgrade for added benefits. This freemium model includes a free account with most of the functionality as well as a pro account subscription, which will cost approximately $10 per month. This upgrade will unlock member-exclusive content and demos. Additional videos and professional advice will also be offered with a pro subscription. The pro subscription will also include a basic website using Gridsite. This basic plan is a small sampling of what is included with Gridsite, with limits on the number of pages and features. An optional upgrade is available, which will unlock every feature, offer access to beta features, and allow for an unlimited number of pages and assets. The basic plan is a time-unlimited, feature-limited trial, with reminders to upgrade to a paid Gridsite. The basic site plan will only be available for users with an active pro subscription.
free vs pro subscription plan

Basic Content and Demos Commenting and Sharing Basic Gridsite Website Demo Library Live Bookmarks / Pop-Out Advertising
To aid in the development of The Grid, the role of web designers and developers is pro instrumental. Given that the founder of The Grid has experience and prior knowledge of website design and development, this expense will be alleviated, allowing for costs to remain lower than originally anticipated. With his role, The Grid will remain updated and new features will be added in the future.
free
this semester
Web Hosting $0 Domain names $20 Exhibition books $350 Exhibition postcards $69 Notebook giveaways $181 Styluses $212.50 Business Cards $14.45 Stickers $81 Total $927.95
post-graduation
Web Hosting (3 years) $412.90 Domain names $20 Web designer salary Web developer salary Advertising on Inc. (Online) $97,000 $91,000 $290
In launching the final site, The Grid will work and partner with AIGA and IxDA to gauge interest and support from the design and development community. Through these partnerships, The Grid will seek grants and funding. The Grid will also seek funding from crowdsourcing platforms such as KICKSTARTER or Indiegogo, where it will pitch itself to the web community for support. An additional grant The Grid will seek is Design Ignites Change.
Advertising in Inc. Magazine (Print) $161,400 Total $162122.90
90 the grid
Create basic responsive

website for The Grid with the three sections.
timeline
The first phase of The Grid includes the initial development and ideation of The Grid, which began in late January 2013 to early February 2013. In this stage, the basic concept was developed, written about, and pitched. Over time, the concept was further refined and became more specific through the use of group brainstorming sessions and in-class presentations. By late February 2013, a visual strategy and initial prototypes were presented. These prototypes demonstrated the basic flow of information on the website as well as the responsive nature of it (how it adapts/resizes). Later in March 2013, the prototypes were refined and expanded to the three basic types of pages on The Grid. With the refined prototypes, the branding was also improved to better incorporate the arrows. Over The second phase, which spans from May 2013 to January 2014, is composed primarily of development and establishing partnerships. Within this timeframe, the final site will be launched and final. The Grid will establish partnerships with local Chambers of Commerce and web designers. These partnerships will help promote The Grid and create a local community around the service. The Grid will exhibit at small business expos, where it will be spread and promoted to small business owners. At these expos, local event guides will be distributed to attendees and representatives from that next month, the website content was written and finalized. The Grid will launch as a beta site in May 2013, with the basic sections and demo video.
Establish partnerships
with local Chambers of Commerce
Produce demo video. Set up showcase section.
Exhibit at expos Partner with

web designers
feb 13 may 13 launch
The Grid Final

Beta site
jan 14
Roll out community
features to site
jan 15
Begin holding
Google Hangouts
Partner with hosting

companies (cPanel ad)
Partner with merchants

and banks
92 the grid
The Grid will be stationed to explain what The Grid is as a service as well as demonstrate Gridsite. In the third stage in the development of The Grid, from January 2014 to January 2015, new features will be added to the core website and new efforts will be made to grow the community around The Grid in order to increase interaction. A first step in this process is the addition of social and sharing features, including new commenting features, blogs, and member profiles. The Grid will then begin to hold Google Hangouts, which will generate discussion amongst designers and business owners, allowing them to speak collectively about topics
that are important to them and pose questions. Along with the addition of Google Hangouts, The Grid will continue to expand its reach by establishing partnerships with hosting companies to better promote and distribute the service. Later, it will reach out to merchants and banks, such as AMEX Open Forum, who will promote the service to small business owners in their articles, media, and blog posts.
amex open forum
94 the grid
event recap
I attended WebVisions NYC at the Theater for the New City. The event was held Feb. 27 to March 1 I attended on Feb. 27 and March 1. Overall the two days I attended were very informative, interesting, and helpful. I learned about many new tools and technologies as well as new ways to approach how I work. Wednesday was made up of two sessions and Friday was a series of sessions/keynotes. The first session Jason Cranford Teague: Building Sites That Scale, was all about responsive design: both in theory and actual code in practice. He reviewed the need for responsive web design, the basic idea behind it, where to start when creating a responsive site, testing, best practices, client considerations, and actual code. I found out about a new prototyping tool, Proty (exclusively for Firefox). He stressed the importance of prototyping actual sites, and not solely using Photoshop. In his words,
Photoshop is not reality.

The second workshop Taking Content Everywhere, was with Sara Wachter-Boettcher, where she spoke about the need for effective, clear, and well-written copy, across multiple devices. It was a complement to the morning session about responsive web design. In this workshop, we were split into groups and worked on different activities revolving around optimizing content.
day one at webvisions nyc
96 the grid
appendix 97
supporting media
Gartner Highlights Key Predictions for IT Organizations and Users in 2010 and Beyond
By 2014, over 3 billion of the worlds adult population will be able to transact electronically via mobile or Internet technology. Emerging economies will see rapidly rising mobile and Internet adoption through 2014. At the same time, advances in mobile payment, commerce and banking are making it easier to electronically transact via mobile or PC Internet. Combining these two trends creates a situation in which a significant majority of the worlds adult population will be able to electronically transact by 2014. Gartner research predicts that by 2014, there will be a 90% mobile penetration rate and 6.5 billion mobile connections. Penetration will not be uniform, as continents like Asia (excluding Japan) will see a 68% penetration and Africa will see a 56% mobile penetration. Although not every individual with a mobile phone or Internet access will transact electronically, each will have the ability to do so. Cash transactions will remain dominant in emerging markets by 2014, but the foundation for electronic transactions will be well under way for much of the adult world.
The most powerful position in the context business model will be a context provider. Web, device, social platforms, telecom service providers, enterprise software vendors and communication infrastructure vendors will compete to become significant context providers during the next three years. Any Web vendor that does not become a context provider risks handing over effective customer ownership to a context provider, which would impact the vendors mobile and classic Web businesses. By 2013, mobile phones will overtake PCs as the most By 2015, context will be as influential to mobile consumer services and relationships as search engines are to the Web. Whereas search provides the key to organizing information and services for the Web, context will provide the key to delivering hyperpersonalized experiences across smartphones and any session or experience an end user has with information technology. Search centered on creating content that drew attention and could be analyzed. Context will center on observing patterns, particularly location, presence and social interactions. Furthermore, whereas search was based on a pull of information from the Web, context-enriched services will, in many cases, prepopulate or push information to users. Mobile Web users are typically prepared to make fewer clicks on a website than users accessing sites from a PC. Although a growing number of websites and Web-based applications offer support for small-form-factor mobile devices, many still do not. Websites not optimized for the common Web access device worldwide. According to Gartners PC installed base forecast, the total number of PCs in use will reach 1.78 billion units in 2013. By 2013, the combined installed base of smartphones and browserequipped enhanced phones will exceed 1.82 billion units and will be greater than the installed base for PCs thereafter.
smaller-screen formats will become a market barrier for their owners much content and many sites will need to be reformatted/rebuilt.
98 the grid
appendix 99
Say Hello to the One-SizeFits-All Website

You could drive yourself crazy trying to build different versions of your website to fit every screen. Or you could try this strategy. Websites no longer live on the desktop. Your customers are on their tablets and smartphones browsing the Web, seeking information, often with a transactional intent-serving their mobile needs has become paramount. The trouble comes, however, when you start thinking about how best to build your mobile website. Which devices will you design for? The full-size iPad or the iPad mini? The iPhone 5 or the massive Samsung GS III? Its easy to see how this can become a never-ending problem. Just try opening up your website on multiple devices and see how easy it is to use. You could go crazy building multiple versions of your website to try to fit every possible screen size--but chances are, your site still wont look quite right on every device. Or you could use whats called responsive Web design,
which is a technique that allows your website to adapt, dynamically, to various screen sizes. What is a responsive website? Its one website that adapts to every device size, thus eliminating the need to create a mobile-only website. As screen sizes become smaller, a responsive website reprioritizes content and modifies its design on the fly to meet the needs of users on any given device. Whats different here is that most websites cannot adapt to all screen sizes. They either appear in full size on mobile devices or redirect users to a website built specifically for mobile devices. The problem is that between desktops and smartphones, a huge range of device sizes is neglected. Responsive design ensures that every device displays your content in a usable and visually appealing way, without the need to create multiple versions of your site. Why does it matter if I have a website that adapts to various devices? You could be thinking that because your website looks just fine on an iPad that you have nothing to worry about.
Think again. Tablet users are not using a mouse to browse your website. Instead, theyve got only clumsy, inaccurate thumbs and index fingers at their disposal. If you have a list of links with fewer than 40 pixels of space around them, then users are likely to make mistakes when tapping a link. Are you asking users to fill out a lengthy Web form? Forget about it. No one likes typing an essay on an iPad. Smartphone users have even more needs. Not only are they using their thumbs, but they are also very goal oriented. If a smartphone user is on your website, its most likely because he or she wants to call you, find you, or quickly get an idea for what it is you do. That means providing those actions explicitly, with large buttons, and having a website that loads quickly. Finally, responsive Web design has been recommended by Google as ideal for mobile search-engine optimization. It eliminates the need for multiple URLs and better meets the needs of all types of mobile users.
Who is responsive design for? It can be used for any type of website that is seeing a substantial amount of traffic coming in through mobile devices. Mobile users are as important to your marketing efforts as desktop users are and may be even more valuable in some cases. Its important to give them a positive impression. If you are planning to redesign your website any time in the next year, I recommend waiting to go responsive until then. Unfortunately, rewiring your existing website to become responsive can be as expensive as getting a new website. It is much more cost effective to make a new website responsive from the get-go. If youre on a budget and simply need a mobile website immediately, then do things the old way: Create a separate mobile website. Wait until you can overhaul the whole shebang before you make the move to responsive.
100 the grid
appendix 101
Design Grids for Web Pages

Consistency and predictability are essential attributes of any well-designed information system. The design grids that underlie most well-designed paper publications are equally necessary in designing electronic documents and online publications, where the spatial relations among on-screen elements are constantly shifting in response to the users input and system activity. When used inappropriately or inconsistently, the typographic controls and graphics of web pages can create a confusing visual jumble, without apparent hierarchy of importance. Haphazardly mixed graphics and text decrease usability and legibility, just as they do in paper pages. A balanced and consistently implemented design scheme will increase users confidence in your site. Even when the page grid is solid, good design depends on creating a hierarchy of contrast and viewer attention, so that a few focal areas of the page become entry points and the other page materials are clearly secondary. Without contrast management the design can look like many random elements competing for the readers attention.
The business logic of design grids and templates Regular page gridsand the module and program efficiency and consistency they createare the core element of cost-effective design programs for larger enterprises. One of the most famous and successful design grid systems ever produced has been used by the National Park Service for more than thirty years. Massimo Vignellis Unigrid design system organizes and systematizes a huge array of park service paper publications (and now online pdf documents), from single-page brochures to large park maps and posters. Thanks to the strong, consistent Unigrid design program, the National Park Service has saved many tens of millions of dollars over the decades by not reinventing brochure and map design with every new print project. The National Park Service design grid for print publications. Thinking in a strategic, modular way about design can save a fortune in the long run.
Educating Our Clients About Responsive Web Design

A couple days ago in a post-meeting chat I mentioned to my Project Manager Extraordinaire @GtownNick, that Id like to extend our development time on custom sites by a couple of hours so we could spend a little more time to focus on responsive web design with each build. He responded that just the other day one of our clients was concerned because they resized the browser window on a recent project and elements of the design started to move around on the page. They stated that they would prefer to see a horizontal scroll-bar, rather than have the approved design change with the width of the window. I was confused by this this statement. Why would they not want the site to respond to different size screens? After some thought I realized that their concerns and subsequent statement was entirely our fault. Our development process and mobile strategy in the past consisted of three things: The result was a site that looked exactly like the Photoshop mockup, a second design the client might see if they visit on their iPhone or Android device, and a third that the client would probably never see. The mobile styles were pretty much drop-in since we follow a standard mark-up style on all of our sites, so it had little to no impact on the project timeline. However, with our recent adoption of RWD, Ive found its helpful to have a little more time allotted to make sure the design responds well to different screens, and to be able to test on a variety of devices. 1. A primary design built on the 960 grid, which is client approved 2. A webkit stylesheet for iOS, Android and friends that completely replaced the default style 3. A handheld stylesheet for less capable devices
102 the grid
appendix 103
The problem is centered around the fact we really only explained our mobile approach to clients if they happened to ask about mobile. Its just one of the things we included by default because its the right thing to do. But now that our approach is going to be a lot more visible, its time we have the conversation with each client BEFORE we enter the design stage. Its on us to explain how designs will change and re-flow based on the window width. With a little education about the recent advances in web development, our clients will understand the benefits of this new approach affords their users. Our clients already accept that the final site will not look exactly the same in every browser when compared to the mockup. We already explain that older IE browsers wont get rounded corners, drop shadows and some gradients.
Remember, were the ones that are reading the development blogs, trying all the new tricks and for the most part agree that RWD (when done right) is the future of web development. Our clients will most likely never read A List Apart. Its up to us to be the educators and professionals we are, do whats best for our clients, and help them to understand why were doing what were doing.
Data Monday: Impact of Responsive Designs

As people continue to use an ever increasing number of devices to get online, theres no shortage of companies exploring multi-device solutions for the Web. Some are even sharing data about the impact of their new responsive designs and the numbers look good enough to get even more organizations on board. Time Inc. Responsive Redesign Pages per visit, across mobile, tablet and desktop are up considerably. Mobile is up 23% compared to what it had been. Homepage uniques are up 15%, and time spent is up 7.5%. The mobile bounce rate decreased by 26%.
101.2% revenue growth on iPhone/iPod 407.3% conversion rate increase on Android devices 591.4% revenue growth on Android devices 20.3% conversion rate increase on non-mobile devices 41.1% revenue growth on non-mobile devices
Skinny Ties Responsive Redesign 42% revenue growth on all devices 13.6% conversion rate increase 377.6% revenue growth on iPhone 71.9% conversion rate increase on iPhone 44.6% increase in duration 23.3% lower bounce rate
Regent College Responsive Redesign 99% increase in unique visitors 77% increase pageviews 63% increase in online applications
ONeill Clothing Responsive Redesign 65.7% conversion rate increase on iPhone/iPod
104 the grid
appendix 105
Why Mobile Matters

When I initially proposed the idea of Mobile First over three years ago, there were a lot of skeptics. The situation today has a lot more people convinced that taking mobile seriously matters. But just in case some people remain unconvinced, heres a really vivid way of explaining the situation But theres more. Nokia sold 200,000+ smartphones a day (and 958k feature phones). RIM sold 143,000 Blackberries a day at the end of 2011. This brings the total of smartphones entering the World per day to about 1.45M devices again compared to 317,124 births.
106 the grid
appendix 107
supporting interviews
Erik Runyon
On Wednesday March 6, I had the opportunity to interview Erik Runyon, who is the manager of Interactive Development at the University of Notre Dame. It was very interesting, informative, and helpful for my project. From my time speaking with Erik, the most important thing he emphasized is that The Grid must educate about what responsive design is and why it is important. He suggested that I look at and read lukew.com regularly, especially an article about how conversion rates (as well as revenue) increased with a responsive site, which is very important to a small business owner. He sees a need for this product and feels that education is very important. Erik brought up that a responsive site, when done correctly, shouldnt take any more time than a normal site to build and to drop a vendor if they charge more for a responsive site. He spoke about mobile first and the need for low He also looked at my section overview page prototype, and mentioned that the three columns appear to be getting too narrow as the window narrows. I should consider starting to stack the three columns. bandwidth: under 500KB, optimize images, minify CSS and Javascript, and use ImageOptim for optimizing images). He suggested that I always read .net Magazine, RWD Weekly, and Brad Frosts site for the newest information/trends in the web design/development fields (especially responsive design). I should also follow people on Twitter to keep up and be up to date with the newest developments.
Michael J. Morgan
On Thursday Feb. 28 and Friday March 1, I had the opportunity to speak with Farmingdale alumni Michael J. Morgan, who is a UI/UX Designer and information architect. His work is mainly online, where he creates usable and functional websites and other interactive media. Michael expressed great interest about my product and spoke about the need for this type of website, which educates small business owners about responsive design. He emphasized the need for my work to speak to business owners, in a way that they would understand and realize the benefits a responsive site offers. He noted my site needs this focus in order to succeed educate about the value of responsive design, not as much about design principles (clients feel the designer should know about this). In the case of The Grid, it speaks about the use of a grid to organize content logically and how it is beneficial for a business: your users can find content easily and are less likely to give up when using your site (and possibly go to a competitor). He looked at my pitch deck and noted the typography was excellent and the typefaces I selected work well with/for my product. I also asked about my supporting collateral and any recommendations he may have hadhe mentioned an iPhone and iPad case kit that illustrates how a site responds on that specific device, which I later mocked up and presented at GQ Magazine. I hope to further refine this piece and based on his other suggestions look at additional supporting collateral pieces. He was very happy to hear that I attended WebVisions and we spoke about it and I mentioned highlights from it. At the end of our discussion he sent me the contact information of another web designer who I will later schedule an interview with. Overall it was great to talk about my product more and ask for the comments from someone who works in the industry. It really helped and Michael was very interested in the direction of this project.
108 the grid
appendix 109
supporting research
The Grid: Designer Survey
the grid for designers / february 8, 2013 / 23 respondents
110 the grid
appendix 111
The Grid: User Survey
the grid survey / february 5, 2013 / 40 respondents
112 the grid
appendix 113
photography art direction preparation

The photography direction for The Grid will result in images that will be used on The Grid website as well as photos that will be featured in advertising/ promotional materials, including event guides, handbooks, and general print advertisements. A series of lifestyle photos were taken which captures a business person using different devices to signify the web being everywhere and spread out.
Preparation Materials
iPad, iPhone, and MacBook Pro
Shotlist
Two shots taken indoors and one taken outdoors of people using different devices.
Photo Team
Amanda Carley (Project Leader) Lorenzo Luculano Desiree Adikes
114 the grid
appendix 115
bibliography
Betts, Jeffrey. The Grid Survey Survey. Surveymonkey. Web. 29 Mar. 2013. Erik Runyon. Telephone interview. 6 Mar. 2013. Runyon, Erik. Educating Our Clients About Responsive Web Design. EDUniverse. EDUniverse, n.d. Web. 29 Gartner. Gartner Highlights Key Predictions for IT Organizations and Users in 2010 and Beyond. Gartner Highlights Key Predictions for IT Organizations and Users in 2010 and Beyond. Gartner, 13 Jan. 2010. Web. 29 Mar. 2013. Keser, Alhan. Say Hello to the One-Size-Fits-All Website. Inc.com. Inc.com, 27 Nov. 2012. Web. 29 Mar. 2013. Lynch and Horton. Design Grids for Web Pages. Design Grids for Web Pages. Web Style Guide, 5 Mar. 2004. Web. 29 Mar. 2013. Michael J. Morgan. Telephone interview. 28 Feb. 2013. Michael J. Morgan. Telephone interview. 28 Feb. 2023. Wroblewski, Luke. Why Mobile Matters. LukeW. Luke Wroblewski, 21 Feb. 2012. Web. 29 Mar. 2013. Statistic Brain. Attention Span Statistics. Statistic Brain. Statistic Brain, 16 May 2012. Web. 29 Mar. 2013. Wroblewski, Luke. Data Monday: Impact of Responsive Designs. LukeW. Luke Wroblewski, 25 Feb. 2013. Web. 29 Mar. 2013. Mar. 2013. Prosper Mobile Insights Mobile User Surveys. Prosper Mobile InsightCenter. Prosper Mobile InsightCenter. Prosper Mobile Insights Mobile User Surveys, 31 Mar. 2013. Web. 29 Mar. 2013.
116 the grid
appendix 117
acknowledgements
Prof. Lee for her constant support, feedback, involvement, and help, from week to week. The guest lecturers for their insightful comments and feedback at each pitch: Kayla Schaefer Adrian Jank Brandon Gerena Sean King Rachel Gogel Prof. Puff & Eric Howton Hanny Hindi My entire senior project class for their advice and help along the way. Each week we have shown that we are like a family and it has been really awesome. We have all joined together and supported each other every step of the way during this semester. My family for their support and respect for my time Friends, including Patrick Flanagan and Kayla Tompkins for their frequent help and advice with my speaking and pitching. Michael J. Morgan for his advice and comments during my interview. Erik Runyon for taking the time to speak to me about his experiences with responsive design.
118 the grid
appendix 119

The Grid: Pitch Book

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

The Grid: Pitch Book

Caricato da

Copyright:

Formati disponibili

Bachelor of Technology in Visual Communications Senior Thesis Book Department of Visual Communications: Art + Graphic Design Farmingdale State

College, State University of New York

jeffrey betts may 14, 2013

The Grid: Service Description

Direct & Peripheral Competition

Promotional & Colleteral Materials

Business & Post-Graduation Plan

vii the grid

executive summary viii

the grid: service description

the grid: service description 3

the grid: service description 5

the grid: service description 7

section overview page

individual section page

the grid: service description 9

the grid: service description 11

the grid: service description 13

brand visual toolkit

footer advertisement footer navigation

section overview page

interactive demo footer navigation

showcase examples video players before & after example

initial prototype testing

testing the grid on tablet and smartphone

homepage section overview & section page

homepage overview page browse by section section page

gridsite editor and insert image selector

the grid is everywhere

the grid is everywhere

tour overview on a desktop

tour overview on a tablet

tour overview on a smartphone

the grid is everywhere

section page on a desktop

section page on a tablet

section page on a smartphone

initial storyboard sketches

digital storyboard frames

Learn more at The Grid.

real world statistics

I use my smartphone for all the functions, its my life.

101.7% 407.3% 41.1%

a person has the attention span of a gold fish.

of page views last less than four seconds.

of page views last more than ten minutes.

smartphones activated per day worldwide

users expect responsive design

what do you expect from a website when viewing it on a mobile device?

with The Grid, which will discuss it in a way that

resistant to a responsive site, as they do not see the

clients want to know why.

features photos of the venue, wedding package

business. Using The Grid, Lisa will learn about and

A DIRECT COMPETITOR of The Grid is the client designer focused

Smashing Mag. A List Apart The Next Web Six Revisions

Resp Design, Resp Illust.

the grid answers

the grid is promoted online as well in print

advertisement in inc. magazine

advertisement in new york times

the web is everywhere. is your business?

learn more at the grid

one site anywhere.