Presentation from ConvergeSE 2015 about responsive design for web applications.

1. Cognito Forms
Building Responsive Web Applications
Jennifer Dellacroce

3. Contact

4. Registration

5. Surveys

6. Payment

7. Other

8. Users throughout the world.

9. Quick Demo

10. 1. Build

11. 2. Publish

12. 3. Manage
Entries

13. Is Responsive Design different when
designing an application?

14. Content
Driven
Websites

15. Web Apps

16. Public Forms
Assumption:
Our forms had to be Responsive.
Fact:
Our forms would be used in any site, including Responsive ones.

17. Example
Form

18. Bad
Example
Form?

19. Example
Form
From bad to good.

20. CSS Media
Queries
Typical Technique

21. We don’t use Media Queries
for our Public Forms.

22. It isn’t about
browser
width.
It is about container
size.

23. It isn’t about
browser
width.
Forms could be placed
in any size container.
Element queries
probably would have
helped.

24. And if your
site is
Responsive
Our forms need to be
Responsive, too.

25. Our Solution

26. JavaScript!
Apply a CSS class
based on the size of the
container.

28. Making the Cognito Forms Application
Responsive

29. Desktop – Tablet – Phone

30. Big
Our layouts have a
max-width of 1200px

32. Medium
Same stuff, only
skinnier - % widths

33. Small
Depending on the page
and what going on. The
layout starts changing
around 735px.

34. Build
Assumption:
Most users wouldn’t
want to build a form on
their phone.

35. Build
Reality check:
Creating a responsive
build experience for
small screens would
just take more time.

36. Build on
Tablet
The same, but
narrower.

37. Build on
Phone
Small 

38. Now we have statistics…
Device Type Sessions (%)
Desktop 88.99%
Mobile 8.26%
Tablet 2.75%

39. Entry List
Assumption:
Most users would want
the ability to view their
entries from their
phones.

40. Entry List
on Phone
Small?

41. Entry List
on Phone
Small!

42. Streamlined

43. Entry
Details
Big!

44. Entry
Details
Small!

45. Now that we have statistics…
Device Type Sessions (%) to entries
Desktop 90.84%
Mobile 7.35%
Tablet 1.81%

46. Account
Pages
Big!

47. Account
Pages
Small!

48. Navigation and Menus
Assumption:
If any of our application screens were going to be Responsive, our application
chrome had to be as well.

49. Navigation and Menus
We had 4 navigational requirements
1. Navigate to their other forms
2. Subnav for a form – Build, Publish, Entries
3. Navigate to a different organizations
4. Access your account and support
5. Access other applications (later)

50. Nav 1.0
Big!

51. Nav 1.0
Medium!

52. Nav 2.0
Big!

53. Nav 2.0
Medium

54. Nav Final
Big!

55. Nav Final
Small!

56. Forms Nav
Big!

57. Forms Nav
Small!

58. Forms
Subnav
Big!

59. Forms
Subnav
Small!

60. Org
Switcher
Big!

61. Org
Switcher
Small!

62. Account
Access
Big!

63. Account
Access 1.0
Small!

64. Account
Access
Small!

65. That was our journey.
Responsive isn’t hard. Design is challenging.
The technical stuff can be easy.
We spent the most time designing the navigation menus.
We also had the most disagreements over the navigation menus.

66. Questions, comments, suggestions?
Fill out our conference survey!
http://convergese.com/feedback
Try it out: CognitoForms.com
Email: Jennifer.Dellacroce@VC3.com
Twitter: @jdellacroce @cognitoforms