The document provides 10 tips for development partners, including: hire experienced partners; involve partners early in the process; consider legal and technical constraints from the start; use sample content rather than placeholders; clearly define content responsibilities; reuse common interfaces; maintain consistent site components; prioritize content over design; understand how technology choices affect budgets; and share long-term goals to allow for flexible systems.
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
10 Tips Your Development Partner Wants You To Know
1. 10 Tips Your Development
Partner Wants You To Know
Frost Simula
FrostSimula.com
2. Frost Simula
Software Analyst, Strategist, and
Digital Producer
17 years of thought leadership17 years of thought leadership
and experience developing weband experience developing web
applications and digital products.applications and digital products.
The NerderyThe Nerdery
Minneapolis, Minnesota, USAMinneapolis, Minnesota, USA
FrostSimula.com
3. Most Valuable To
Project stakeholdersProject stakeholders
Web designersWeb designers
FrostSimula.com
User eXperience (UX) engineers & Content Strategists (CS)User eXperience (UX) engineers & Content Strategists (CS)
Digital ProducersDigital Producers
Project ManagersProject Managers
4. In this presentation
Review the paradigm shift in online software priorities.Review the paradigm shift in online software priorities.
Pitfalls to avoid in your project process.Pitfalls to avoid in your project process.
How to spot the most overlooked parts of software design.How to spot the most overlooked parts of software design.
How to make the most of your development budget.How to make the most of your development budget.
FrostSimula.com
5. The Way We’ve Done It
FrostSimula.com
Start Finish
UX/IA/CS and
Visual Design
Development
6. The Way We’ve Done It
FrostSimula.com
Start Finish
UX/IA/CS and
Visual Design
Development
7. The Way We’ve Done It
FrostSimula.com
Start Finish
UX/IA/CS and
Visual Design
Development
8. The Way We’ve Done It
FrostSimula.com
Start Finish
UX/IA/CS and
Visual Design
Development
Disconnected!
9. The Way We’ve Done It
FrostSimula.com
Start Finish
UX/IA/CS and
Visual Design
Development
Form follows function… That has been misunderstood. Form
and function should be one, joined in a spiritual union.“
”- Frank Lloyd Wright
10. FrostSimula.com
As we increase our
dependency on online
information and services,
technology grows more
complex to meet the
demand.
Concept
Taking advantage of New
Media means planning for new
complexities, new variables,
and new dimensions of
thought.
Impact
Dependency vs. Complexity
11. FrostSimula.com
Common website priorities through the years:
1993
Having an actual
website
1994
Animated GIFs
1995
Page load speed
1996
Cross-browser
support
1997
Flash animations
1998
Support for
many screen
sizes
1999
Programming
Languages
CGI, ASP, JSP
2000
Higher search
engine rankings
2001
Adding
database
functionality
2002
Content
Management
Systems (CMS)
12. FrostSimula.com
Common website priorities through the years:
2003
Usability
2004
Internationalization
2005
Selling ad space
2006
Syndicated
content
RSS Feeds
2007
Social Media
pages
2008
QR codes and
getting “Likes”
2009
Content Delivery
Networks (CDN)
2010
Responsive
Design / Mobile
compatibility
2011
iPhone
Compatibility
Replacing Flash with
jQuery
2012
Remarketing
13. The Most Skilled Development Partners are
those with experience. Like anything in life,
you get what you pay for.
Tip #1
Hire History
FrostSimula.com
14. FrostSimula.com
The most cost-effective
solutions are those that
have a vision bigger than
their implementation.
Concept
Revealing your long-term
plans to your development
partner empowers them to
design systems that can grow
with you.
Impact
The Big Picture
28. Consult your development partner about every
future possibility, even if you don’t intend to
build them right away.
Tip #2
Confess.
FrostSimula.com
29. FrostSimula.com
The Development phase
introduces new project
constraints that directly
affect the Design.
Concept
Identifying development
constraints at the outset of a
project guides the production
of initial designs, rather than
having to spend time and
money on design re-work later
in the project.
Impact
Form AND Function
31. Engage your development partner as early as
possible.
Tip #3
Sooner the Better.
FrostSimula.com
32. FrostSimula.com
Many websites are
required to comply with
government regulations
regarding ecommerce
(PCI), education standards
(SCORM), handicap
accessibility (ADA), and
other important areas.
Concept
These constraints affect
process flows and designs,
but do not necessarily have
major impacts on timeline if
considered early.
Impact
Playing by the Rules
34. Research and address compliance
requirements before beginning design.
Applying legal considerations as an
afterthought always increases the required
effort.
Tip #4
legal from the start.
FrostSimula.com
35. FrostSimula.com
The labor portion of a
budget and timeline are
directly affected by
technology choices.
Concept
Some platforms require
licenses that reduce budget,
or include complexities that
require an extended timeline.
Impact
It All Adds Up
37. Work with your development partner to
choose a platform that financially balances
your technology needs with your production
effort.
Tip #5
Allocate your budget.
FrostSimula.com
38. FrostSimula.com
Sample content provides
real-world examples that
guide design in a far more
productive fashion than
placeholder copy and
media.
Concept
Designers and developers
alike can plan for unique
instances of content
presentation when sample
content is used. This is often
difficult or impossible with
placeholder content.
Impact
Realism Trumps Impressionism
39. FrostSimula.com
Lorem Ipsum vs Sample Content
Lorem Ipsum Dolor Sit
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Curabitur eu ornare ligula. Donec
dolor leo, malesuada vel purus
non, vestibulum mattis eros.
Maecenas vitae orci accumsan,
imperdiet est at, imperdiet eros.
Aenean eu tincidunt eros, sit amet
facilisis dolor.
40. FrostSimula.com
Lorem Ipsum vs Sample Content
Lorem Ipsum Dolor Sit
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Curabitur eu ornare ligula. Donec
dolor leo, malesuada vel purus
non, vestibulum mattis eros.
Maecenas vitae orci accumsan,
imperdiet est at, imperdiet eros.
Aenean eu tincidunt eros, sit amet
facilisis dolor.
41. FrostSimula.com
Lorem Ipsum vs Sample Content
Lorem Ipsum Dolor Sit
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Curabitur eu ornare ligula. Donec
dolor leo, malesuada vel purus
non, vestibulum mattis eros.
Maecenas vitae orci accumsan,
imperdiet est at, imperdiet eros.
Aenean eu tincidunt eros, sit amet
facilisis dolor.
42. FrostSimula.com
Lorem Ipsum vs Sample Content
Lorem Ipsum Dolor Sit
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Curabitur eu ornare ligula. Donec
dolor leo, malesuada vel purus
non, vestibulum mattis eros.
Maecenas vitae orci accumsan,
imperdiet est at, imperdiet eros.
Aenean eu tincidunt eros, sit amet
facilisis dolor.
Proposal Submission
Instructions
PLEASE REFER TO THIS
DOCUMENT WHEN PREPARING
A FULL PROPOSAL.
TECHNICAL ELIGIBILITY
Technically eligible submissions
are those which: 1) arrive
electronically via the official
website by the designated due
date before 11:59 p.m. Eastern
Standard Time (EST); 2) heed all
instructions contained in the
solicitation document and Proposal
43. Always provide sample content whenever
possible. Only use “lorem ipsum” copy and
FPO content as a last resort.
Tip #6
Get Real.
FrostSimula.com
44. FrostSimula.com
The layout of a site is
secondary to content.
Concept
Site content should comprise
the bulk of the design effort…
not the inverse.
Impact
Fueled by Content
47. The content of your site should always drive
the design. Presentation of the dish means
nothing if it’s not satisfying to the palate.
Tip #7
Content First.
FrostSimula.com
48. FrostSimula.com
Allocating production
effort of the content is
critical to the development
process.
Concept
Content production is often
overlooked in terms of project
budget and timeline.
Sometimes confusion can
arise as to which party is
responsible for content
creation and entry into a
content management system.
Impact
Who’s Doing What?
50. Clearly define who is handling content and
when it is being incorporated. If at all
possible, produce the content before
development begins.
Tip #8
Divide and Conquer.
FrostSimula.com
51. FrostSimula.com
Relying on proven
methods saves effort in
both development and
design.
Concept
Many common practices and
tools are already part of a web
user’s normal browsing
habits. There is no need to
create a unique experience for
these typical interactions.
Impact
Been There. Done That.
63. Re-use existing mechanics and widgets
whenever possible.
Tip #9
Don’t Reinvent The Wheel.
FrostSimula.com
64. FrostSimula.com
Compartmentalizing
designs into repeatable
patterns reduces design
and development effort.
Concept
Keeping the same layout,
position, and styles of
common components from
page to page improves
usability and production
efficiency.
Impact
Faster when it’s Familiar.
65. FrostSimula.com
News Article Variants
Finns Revolt Over Nokia Buyout
Sisu at an all-time high, sources say.
Thousands gathered outside Nokia headquarters in an act
of protest following a pivotal announcement that software
giant Microsoft will purchase the mobile device
manufacturer and its patents for what some are calling…
Finns Revolt Over Nokia BuyoutFinns Revolt Over
Nokia Buyout
Thousands gathered
outside Nokia
headquarters
Read more…
66. Make sure the common components of your
site use the same format. Reduce the number
of unique layouts as much as possible.
Tip #10
Be Consistent.
FrostSimula.com
Whereas other presentations at the Content Strategy Forum 2013 have focused on a “blank slate” approach from content through design, this presentation will reveal why projects need to consider development constraints early in the process.
I’m Frost Simula, and I’ve been designing and developing web applications for 17 years.
ANYONE who is a decision-maker or involved with the design of a website can find value from this presentation.
We’ll be looking at how priorities have changed over the years, how to streamline your project process, and how to keep your project on-time and on-budget.
For the most part, this will be a very high-level look at the project process and how we can make it better. To do that, let’s examine how we’ve approached web development in the past and why this way is broken. Typically, we START a project with skill sets revolving around UX/IA/CS and graphic design. After that is done, we simply “throw it over the wall” to our development partners to implement our design.
But what if the design is more than the technology can handle? We can’t simply “truck along” and design to our wildest dreams, because they are not aligned to the technology.
The opposite can also be true. What if the technology requires MORE from the design than has been completed? Again, without alignment, this could spell disaster.
The root of the problem is that we have disconnected the design and development “phases” of a project. We split them in to different skill sets, and the gap poses challenges.
The solution is to eliminate “phases” and to keep both design development involved throughout the project processes, from start to finish.
Users have evolved to become DEPENDENT on complex services such as online banking, online stores (like Amazon), and online music service such as iTunes, Pandora, or Spotify.
Here’s a fun walk down Memory Lane, and reviewing what was a priority for most website owners over the years. Some of these priorities were simply “buzz words” that have become irrelevant over time. Others are incredibly important, even today.
About 2003, usability, user experience, and CONTENT became a priority for website stakeholders. At that time, we stopped treating the internet as a toy, and began vigorously monetizing it. It became foundational for businesses, because we gave users what they WANTED.
Imagine buying a large amount of land that you eventually want to build a summer home on. Your vision for this is HUGE! But you don’t have the resources to build much right now. So you hire a carpenter, and tell him to build you a cabin. First he lays the foundation…
And then builds you the cabin you asked for. But in a few years, you decide you need a bigger, better establishment. So you tell your carpenter to build you a house. But the foundation for a cabin was already laid.
Your carpenter has no choice but to demolish the entire cabin and foundation, and start over.
He lays a foundation for a house…
… and then builds you the house you asked for. But in a few years, you want something even BIGGER. So you tell your carpenter to build you a mansion.
Once again, your carpenter has no choice but to demolish the entire house and start over.
He lays a foundation…
And builds you the mansion you had always dreamed of. But do you see how destructive this process is? And imagine how frustrating it must have been for your carpenter!
If you had told your carpenter about your long-term vision, he could have helped you plan a long-term solution. Perhaps you could start with a good foundation…
… and slowly build up your dream as you can afford it.
With collaboration, it IS possible to have a product that scales WITH you.
So when you start your project, how soon should you get your developer involved? Let’s just say that when you start a project, don’t leave your developer behind!
Let’s take a look at Section 508 ADA compliance as an example. If it’s introduced early in the process, the cost to you is next to nothing. But if it’s introduced as an afterthought, it can be quite expensive.
This is a fairly typical budget breakdown. But we have forgotten about the technology cost when it comes to things like licenses, hosting, and maintenance.
Let’s try an exercise to see the difference. We use Lorem Ipsum and create a headline, and some body copy. We give each their own fonts, colors, styles, etc.
And now let’s add some design. Perhaps we have some containers with background colors. This looks great! Let’s just call this the “finished design”.
So we have a design, and our developers build it. It looks great! Now all we need is the content.
Uh oh. The actual content doesn’t fit the design. The headline wraps to more than one line. There is more teaser text than we expected, so it bleeds outside of the container. It also appears that there is more than one type of headline that we didn’t account for in the design.
Treehouse is an excellent example of keeping the creativity in the CONTENT. The illustrations and photos support the message.
This is one of the worst website design primarily because it invests all of the creativity into the INTERFACE, which is beautiful and animated, but confusing and pointless. The content is difficult to reach and provides zero value to the user.
We all know how modal windows work. Their controls and operation are now a standard. We click a thumbnail to launch the modal.
We can close the modals with the X in the upper right…
… or you can click outside of the content frame to close the modal…
… or you can use the escape key to close the modal window. These are STANDARDS, today. Do not waste design or development effort on building unique experiences that differ from this.
The same is true for slideshows. There are many implementations, but some things are STANDARD.
They all have markers showing the number of slides in the show.
The active slide has a highlighted marker, and clicking on that marker activates the corresponding slide.
Hovering over a slide pauses the animation.
And some slideshows have manual controls to cycle the slides forward and back. Users already know how to do this.
The same is true for media players. We do not need to spend more design or development effort on this.
The same is true for design. Iconography is very powerful, but some icons have become “operational” and should never be changed. Your users already know what each of these icons mean, and how to use them.
For example: Different ways a news article might be presented in different ways throughout a site. But the fonts are always the same, the order of elements is always the same, colors do not change, etc. This makes it easier for your users AND easier for your developers. The fewer variants, the more usable and efficient your design is.
