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
- 13. Is Responsive Design different when designing an application?
- 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
- 19. Example Form From bad to good.
- 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.
- 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.
- 42. Streamlined
- 45. Now that we have statistics… Device Type Sessions (%) to entries Desktop 90.84% Mobile 7.35% Tablet 1.81%
- 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!
- 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