Determining the App’s Functionality and Structure - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 78

Figure 5-5. Home page wireframe for narrower screens
Organizing the Q&A Page for Attendees
After an attendee has joined a room, the app needs to display the room's name and who the presenter is, as well as
showing her the form to ask a question and the list of existing questions.
The header and footer will stay consistent across the app, so only the main content area needs to change.
Wireframing for Wider Screens
Again, on a wider screen, the content can flow to two columns, but in this case one of the columns should be wider
than the other because not much will be displayed in the sidebar.
The form to ask a new question should be prominently featured at the top of the main column with questions
underneath.
On the right side, the name of the room and the presenter's information should be displayed.
With this information plugged in, the wireframe looks like Figure 5-6 .