BigBlueButton HTML5 Client Responsive UI

This is the fifth day of BigBlueButton Developers Summit in Porto Alegre, Brazil. The HTML5 Client team finally finished the refactoring of client and server side’s code. On client side, we use twitter bootstrap and LESS template to organize our design and made our layout more responsive for different screen size. The followings are some screenshots of current UI:

1. Laptop, deskop screen, displaying whiteboard, video, and chat box:

Capture5

2. Move video and chat box to the bottom to fit smaller screen size such as tablet:

Capture3

3. Hide navigation bar and only show whiteboard:

Capture6

4. Show whiteboard and chat box for laptop and desktop:

Capture11

5. Only show navigation bar and whiteboard:

Capture8

6. For mobile, only show one component at a time—whiteboard:

Capture10

7.For mobile, only show one component at a time—user list
Capture1

In the afternoon, we have a community call to present what we have done during the summit, and demonstrate where are we now. Our project manager, BigBlueButton core team, HTML5 Client, WebRTC, and Native mobile client (iOS and Andriod) team did presentation to the whole BigBlueButton community separately. The funny thing is that one of my team member was too nervous. He kept reading our presentation slides, and forgot where to handover to next presenter. As the result, I lost an opportunity to present my experience during this summit.

Generally speaking, I learned a lot during this summit. It’s a very good opportunity for me to get help from BigBlueButton core team. Although I am not able to contribute a lot to our html5 client, I am pretty sure that I will become a core developer of BigBlueButton team.

After we wrapped up everything, we went to a very good steak house and tried different kind of Brazilian barbecue and beer. I can’t remember how much meat I have eaten during this summit. I know I am going to stop eating meat for a couple of days after I go back to Toronto.

Advertisements
This entry was posted in open-source. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s