10 Tips Your Development Partner Wants You To Know

8,983 views
8,341 views

Published on

Learn why constraints are relevant to content, design, and development. Find out how to streamline the design and development phases to reduce risk, stay on budget, and fix the project process.

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,983
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
33
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • 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.
  • Twitter: Fr0s7
  • The Nerdery
  • 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
    15. FrostSimula.com Growth patterns
    16. FrostSimula.com Growth patterns
    17. FrostSimula.com Growth patterns
    18. FrostSimula.com Growth patterns
    19. FrostSimula.com Growth patterns
    20. FrostSimula.com Growth patterns
    21. FrostSimula.com Growth patterns
    22. FrostSimula.com Growth patterns
    23. FrostSimula.com Growth patterns
    24. FrostSimula.com Growth patterns
    25. FrostSimula.com Growth patterns
    26. FrostSimula.com Growth patterns
    27. FrostSimula.com Growth patterns
    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
    30. FrostSimula.com How soon should you get your developer involved?
    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
    33. FrostSimula.com Section 508 – ADA compliance Start Finish
    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
    36. FrostSimula.com Subtracting from the Labor $100,000 Budget -$30,000 Design -$70,000 Development
    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
    45. FrostSimula.com Design should be most prominent in the content.
    46. FrostSimula.com Design should be most prominent in the 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?
    49. FrostSimula.com Johnny Holland Magazine Problem #3: We thought you were creating the content. Meghan Casey Content Strategist
    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.
    52. FrostSimula.com Modal Windows
    53. FrostSimula.com Modal Windows X
    54. FrostSimula.com Modal Windows X
    55. FrostSimula.com Modal Windows X
    56. FrostSimula.com Slideshows
    57. FrostSimula.com Slideshows
    58. FrostSimula.com Slideshows
    59. FrostSimula.com Slideshows
    60. FrostSimula.com Slideshows
    61. FrostSimula.com Media Players
    62. FrostSimula.com Iconography Expandable Expanded + - Expandable Expanded Buffering / Loading Settings RSS Feed Information Download Menu
    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
    67. QUESTIONS? frost @ frostsimula.com Fr0s7 Frost simula FrostSimula.com
    68. FrostSimula.com

    ×