Steven Louie

Future of Web Design NYC 2015: Some Takeaways

Flightpath has been sending team members to the Future of Web Design Conference for many many years now. We returned this year for a couple of days of education and inspiration. As our team tends to keep up-to-date on all the new design trends, this conference is not so much about learning something brand new but inspiring us to implement new ideas by hearing about things others are actively doing, in person. I have always found that the folk presenting at FoWD not only “talk the talk” but they “walk the walk.” and have the battle scars to prove it.

Every person takes away something different from these conferences, but in general, here are some of our takeaway lessons:

Everything About the Future is Now

Before we can even get into the specifics, ask yourself: are you trying to be different? Do you believe you’re doing everything you can to put out the best product? Whether you’re on the design, or coding, or management team, are you continuing to do things the same way that you did yesterday, or are you looking ahead and embracing new changes? We all find comfort in consistency and routine, but chances are you’re missing out on something big, new, or even better. Adaptive designers should find comfort in flexibility and in knowing that the future of web design is here; we just have to be willing to embrace it.

Collaboration & Ownership

Staff your projects with team members who truly collaborate across all stages of the project. A sense of belonging and ownership should permeate through each person. Use software that provides teams with a single platform to communicate, track and share ideas on. Collaboration should be present throughout the entirety of any project. Encourage ownership by fostering the philosophy that everyone’s ideas – good or bad – can offer value.

Design and Prototype in Code

While static mockups may have a place at the very beginning of a design phase, very soon in the process, still comps become inadequate to demonstrate to stakeholders – and more importantly testers (see User Testing) – how things work from a dynamic, interactive and multiple screen-size perspective. Flightpath designs experiences that are unique for the user from device to device. Static mockups fail to demonstrate these diverse interactions during the critical design phase. Web designers should never sit idle or wait for visual QA to find inconsistencies or inaccurate excecutions of the original designs. For design teams whose designers don’t code, provide a system in which they can learn and have hands on experience with coding. Think of Photoshop, Sketch, etc. mock-ups as mere design concepts that you can flush out and iterate as needed in code.

User Testing

Everything we do is to serve the user. Business goals, stakeholder opinion, designer intuition, etc. mean nothing if the users don’t understand the interface or believe there is an easier solution to their task/problem. As much as possible, include user testing throughout the process of designing a project. Even a half an hour of user testing a week can go a long way to hone design decisions. Experience can only take you so far, and relying only on designer experience, with or without client input and direction, will increase your risk of missing the best option or even risk the failure of the design entirely.

Minimum Viable Product

“Less is more” is an adage we often use, as we find apps and sites are frequently ‘over-featured’ to the point they are very hard to use. Try to design, build and release product in iterative fashion. Arrive at something that is a minimum viable product (MVP), ship, get feedback and iterate. A minimum viable product doesn’t have to be weak – in fact, it ought to be good and useful, but it doesn’t have to do everything.  Trying to “bite off” too much at once often results in a compromised or over-complicated product which takes too long to release often with features that were unnecessary.

Even more than for learning about new ideas and techniques, we find these conferences are an excellent place to find a wake up call. When we take home ‘homework’ and scrawled notes about new things others are doing, we come back to the workplace inspired not only to employ the new strategies we’ve learned, but to build on them, and continue to adapt and improve our approach to design.

Fundamentals of Responsive Website Design

As you probably know, Responsive Web Design (RWD) delivers one website, with one code base, to a multitude of devices from laptops to tablets to mobile phones. At Flightpath, we get so many questions from clients and potential clients about responsive website design these days that we thought it would be a good idea to briefly summarize some fundamentals and best practices.

 

Responsive Web Design Benefits

 

  • Better user experience by supporting a wide range of devices, particularly mobile
  • Better Google search engine ranking – With Google’s recent mobile-friendly algorithm update, websites that are responsive have a higher likelihood of ranking higher than desktop-only
  • Easier and cheaper site management compared to maintaining separate desktop and mobile websites

 

Responsive Web Design Conventions

 

  • RWD utilizes flexible images and media atop fluid grids that ebb and flow with a devices’ screen size
  • Major “breakpoints” are established to allow a design to adapt and optimize better to certain screen widths. Typical breakpoints are as follows:

 Screen Shot 2015-09-24 at 11.02.23 AM

 

Responsive Web Design Creative and Production Considerations

 

  • A non-responsive site cannot be simply “converted” to a responsive site.
  • The code framework is entirely different
  • Non-responsive website design elements will likely not work well on small screens
  • To start, website content and design should be developed with smaller mobile screens in mind – where the focus is only on core content and functionality.
  • While one of the hallmarks of RWD is to provide the same content to all devices, it is not only permissible but recommended to optimize some site attributes for different device sizes. (Example: Use show/hide button to limit the amount of content that shows at one time on small mobile screen.)

 

Responsive Web Design and Google Rankings

 

Google has updated its algorithm to prioritize search results per a variety of criteria associated with mobile usability and responsive design. These include:

 

  • Font sizes
  • Touch/tap element size & relative proximity
  • Pop-up/interstitial usage
  • Viewport configuration
  • Flash usage

These factors should be borne in mind to ensure optimal search engine visibility for your responsive site. You can learn more about this via this blog from Google.