Name:

Student Number:
Course & Section:
Date:

Case study: The Boston Globe

1. One-line summary
BostonGlobe.com invests in a responsive design website to enable readers to enjoy their site
via various devices.

2. The Problem
The Boston Globe is an American daily newspaper and needed a website that would be
viewable and usable on a range of devices. They turned to Upstatement, editorial designers
who specialize in websites and applications, to assist them in solving this problem (Bottitta,
2012).

3. The Solution
Upstatement decided to build a responsive site for Boston Globe, to cater to all the devices on
which their target market would be viewing the site.
Before this website could be built, there were some key decisions that needed to be made.
Among a few other considerations, the project leaders needed to establish the various
breakpoints. Breakpoints are the points at which the device screen is too narrow or wide to
display the site optimally. Once identified, the elements that needed to change at each of these
breakpoints could be accounted for and a smooth user experience could be created (Bottitta,
2012).
Which breakpoints and screen widths to design for
Upstatement had some big questions to answer before they could start the design process.
Some of these were:
● What are the key breakpoints?
● What do major templates look like at each breakpoint?
● What do the header and footer look like?
● What content appears on the home page, various section fronts, and article page?
● What’s the overall look and feel? (Bottitta, 2012)
In order to identify the breakpoints, a variety of available devices were looked at: PCs, laptops,
tablets, smartphones and dumb phones were among these. Upstatement identified six
breakpoints. Some of these were specifically for smartphones and iPad (Bottitta, 2012).
The following breakpoints were selected:
● 1200px
● 960px
● 768px
● 600px
● 480px
● 320px
Key pages were then designed to accommodate these different widths (Bottitta, 2012).
The process
Designing with mobile in mind first is a well-supported school of thought, but this team designed
with the desktop in mind first, at least for the design phase. They found it easier to design this
way since most content fits in the desktop version. The design was then simplified for smaller
screens. In the coding stage, the mobile first approach was used. They found this worked well
and used it in their subsequent projects (Bottitta, 2012).
Designing for desktop is the most complex, since most elements are included, but it is also
easier to design for, since the elements are all likely to fit in. Different breakpoints were looked
at throughout the design process, with the mobile breakpoints providing the greatest insight.
Given the limited screen size provided by mobile phones, tough decisions had to be made about
which elements were the most important to display. Simplicity was a key theme in this design
process, with the question constantly asked being, ‘what’s absolutely necessary and how I can
simplify?’ (Bottitta, 2012).
Which elements need to change to accommodate the next breakpoint?
In order to illustrate some of the decisions made in this process, the design of the header
element of The Boston Globe website will be discussed in more detail. Above the navigation
bar, the logo, search bar and weather information needed to be displayed. The user’s account
information also needed to be accessed here. Another important element was ‘My Saved List’,
where users could ‘bookmark’ site contents (Bottitta, 2012).
Designing for 960px
Once the design elements were determined, all the header elements fitted well for this
breakpoint and scaled to the larger screen size of 1 200px. A large dropdown enabled each
subsection to be included, where top stories and subcategories could easily be found (Bottitta,
2012).
Designing for 768px
When designing for the smaller screen size of 768px, header elements that had previously fitted
no longer did. To solve this, they looked at what could be excluded. ‘Home’ couldn’t be
excluded, and menu items couldn’t be shortened and stay meaningful (Bottitta, 2012).
As a solution, ‘My Saved List’ was moved from the navigation to save space (Bottitta, 2012).

Designing for 600px

Once again, fewer elements fit in at this breakpoint. The large dropdown was the first element to
be excluded. Search, however, is a key element and had to remain, while individual sections
were slotted into a section called ‘Sections’. ‘Today’s Paper’ and ‘My Saved List’, although also
sections, were important enough to promote individually and so kept their spots (Bottitta, 2012).

Designing for 480px

This breakpoint signified the first significant design change to accommodate the mobile
landscape view. To accommodate all the elements in this view, the weather was positioned
above the logo. This was done to ensure that there was space for the other website elements
on the home screen.
The ‘Today’s Paper’ section was included in the ‘Sections’ dropdown to save space, and the
search box became an icon which expands to an input box when the user needs it (Bottitta,
2012).
Designing for 320px
With more vertical space in this view, the weather, logo and navigation bar all appear
underneath each other. Things were also simplified through code, with all the menus using the
same style (Bottitta, 2012).

What do we need to solve in the coding process?

Not all screen needs and interactive states can be planned out in the design process. In the
coding process, these gaps need to be filled in. It is also faster to solve some problems in the
coding stage. For this reason, it’s beneficial to start coding when the major design decisions
have been made (Bottitta, 2012).

4. The results
This resulted in an effective and usable design for a variety of devices (Bottitta, 2012).
Answer the following questions:

1. When deciding on breakpoints, what popular devices were considered and have these
changed?

- There are variety of devices used to identify the breakpoints such as; PCs, laptops,
tablets, smartphones and dumb phones.

2. Constantly simplifying the design is important as screen size decreases. What should
you ask yourself about the user in order to make these decisions?

- What are the possible things a user looks for and what do they prefer to have in
terms of designs. I would also identify what is the most suitable and efficient design
for the users.

3. Why would designing and coding with a mobile first or desktop first approach be
beneficial?

- This approach is beneficial because it would help accommodate the users

accordingly. It would also make the website accessible and user friendly.