www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

Building Your Startup: Improving the Mobile Web

Final product image
What You’ll Be Creating

This tutorial is part of the Building Your Startup With PHP series on Envato Tuts+. In this series, I’m guiding you through launching a startup from concept to reality using my Meeting Planner app as a real-life example. Every step along the way, I’ll release the Meeting Planner code as open-source examples you can learn from. I’m also addressing startup-related business issues as they arise.

Mobile Apps vs. the Responsive Web

Strategically, building mobile apps for Meeting Planner on iOS and Android makes sense, but financially I haven’t raised the resources for this yet. Mathew Ingram recently wrote in Fortune that due to the plethora of offerings for mobile users, “statistically speaking at least—no one is going to download your app.” So while certainly I could enhance the Meeting Planner experience with an app, its likelihood of adoption doesn’t make immediate sense with my current resources.

However, it’s extremely important to make Meeting Planner a great web experience on mobile devices.

In today’s episode, I’ll review and discuss making changes oriented to doing just that—essentially making our web application more of a responsive website, easily usable on mobile devices and tablets. Check out the results (on your phone or tablet)!

One of the challenges coding for today’s episode was that I’m not a designer or CSS coder. Some days I feel like I shouldn’t even be coding myself; at Microsoft I was a Group Program Manager, i.e. we had graphic designers, a fully-staffed usability lab, CSS didn’t exist, etc.

Leading up to this work, I felt intimidated trying to learn media queries, breakpoints, and specialized CSS—it’s not a subject matter I’m skilled at, and it’s time consuming and very detail oriented. Yet, within 48 hours, everything came together quickly and beautifully. If you scan to the bottom of the story, you’ll see how few lines of CSS were ultimately needed for all the changes. Suddenly as I began to browse Meeting Planner on my phone, I grew excited for how well the new responsive web experience was working.

Frankly, it made me feel that a dedicated mobile app just isn’t necessary at the moment. We can build our audience with the mobile web experience for now, especially through the critical upcoming alpha and beta phases.

In the meantime, if you haven’t tried out Meeting Planner yet, go ahead and schedule your first meeting from your phone or tablet. I do participate in the comment threads below, so tell me about your experience! You can also reach me on Twitter @reifman. I’m always interested in new feature requests and suggested tutorial topics.

As a reminder, all of the code for Meeting Planner is written in the Yii2 Framework for PHP. If you’d like to learn more about Yii2, check out our parallel series Programming With Yii2.

The Current Mobile Status

To begin, I browsed the current state of the Meeting Planner service with my iOS phone and took screenshots of the initial application. It’s not terrible, but it’s not great. Let’s review what I found.

The Home Page

The home page looks good, although aesthetically I wish the lead text, “Making Scheduling Easy”, would break a bit differently, i.e. on three approximately equal length lines. However, Bootstrap manages the drop-down menu well, and the rest of the page works functionally:

Meeting Planner Responsive Web - Home Page

The Sign-Up Page

Again, other than the headline’s aesthetic layout and left margin consistency, the sign-up page is basically functional:

Meeting Planner Responsive Web - Signup Page

Planning Meetings

Once the person begins planning meetings, the current index page needs improvement. There are too many columns. The subject is squished. Perhaps the information I chose to display here in the first place isn’t essential. And, certainly, the command options aren’t in view. The page needs to be adjusted for mobile more significantly.

Meeting Planner Responsive Web - Meetings List

Other pages function well, such as the new meeting request for a subject. However, mobile users probably don’t want to be offered a textarea field to type in a longer message introducing the meeting:

Meeting Planner Responsive Web - New Meeting Subject Form

Adding participants also becomes a bit dysfunctional with the bootstrap extensions we’re using:

Meeting Planner Responsive Web - Add a Person Form

And the planning views for places and times begin to break down. Again, the desktop design offers too much detail and too many options for mobile:

Meeting Planner Responsive Web - When Times Form with Switches

Other Areas

The Places page functionally works but needs an improved layout of the buttons. And perhaps this functionality isn’t needed for mobile users.

Meeting Planner Responsive Web - Add Places Form

Similarly, the desktop tab and photo layout breaks down on mobile. It also needs to be rethought:

Meeting Planner Responsive Web - Profile Settings

Developing Solutions

Certainly, there are a lot of areas of the site that can be improved. Some areas need to be rethought for mobile, some minimized, and others just aesthetically adjusted. Let’s get to work.

Different Approaches

I had pretty much zero experience with media queries and breakpoints when I began this task. For a few days before, I procrastinated over diving into what I feared was an unfamiliar quagmire. I began with a practice media query to tease my editor:

Joking around helped break the mental ice in my head. I’m always available and visible to Envato’s editorial gods.

There were a number of areas I began to consider:

  • Simplifying functionality, especially with the meeting planning process
  • Identifying the critical information to display for mobile
  • Concealing some functionality on mobile devices, such as elements, columns and menu options
  • Working with media-queries and breakpoints
  • Staying focused on the most important areas for the alpha release

One helpful concept I kept running into on the web was “Design for Mobile First.” Unfortunately, I’m old school and hadn’t done that. But it was helpful to rethink every page with this theme: Mobile First. 

For example, the meeting index with four table columns had to go and was disorienting on portrait phones.

I kept asking myself how I would have designed all the pages to work from a phone.

Warming Up to Media Queries

Drop-Down Menus

It took me some effort to overcome my hesitation at diving into deep CSS. To warm up, I began working on minimizing the drop-down menus and simplifying the scope of mobile functionality.

For now, I decided to create a single basic media query for smaller devices and use that across the site. Here’s frontend/site.css:

Making changes turned out to be relatively simple. For any menu item I wanted to hide on mobile, I just needed to add a CSS property, e.g. menuHide.

Here’s the menuHide property added to /frontend/views/layouts/main.php:

Suddenly, the drop-down menu had less complexity:

Meeting Planner Responsive Web - Responsive Dropdown Menu

Gradually, I realized that simplifying and reducing functionality in the mobile web would create the best experience. People can always go back to their desktop to access other features, at least for now. This would also be an opportunity to gather feedback from people during the alpha and beta phases.

Breadcrumbs

Yii’s default layout includes a breadcrumb widget which is loaded via composer and harder to customize. I experimented with adding CSS to hide the first element and the first “/” divider:

Meeting Planner Responsive Web - Desktop Breadcrumbs

It took some time but got me diving deeper into CSS, e.g. nth-child content, and built my confidence:

I had no idea that CSS could modify content.

Here’s the result:

Meeting Planner Responsive Web - Responsive Breadcrumbs

Enhanced Button Spacing for Fingertips

Next, I added CSS to provide additional padding for buttons on mobile to make fingertip presses less error-prone. For example, here are the submit and cancel buttons on desktop devices:

Meeting Planner Responsive Web - Default Button Spacing Desktop

This is the CSS I used and began adding to various buttons and clickable icons around the site:

Here’s what that form looks like on mobile—notice the new padding between Submit and Cancel:

Meeting Planner Responsive Web - Enhanced Button Spacing

Responsive Text Wrapping

Meeting Planner Responsive Web - Home Page with Text Wrap

Making the home page heading, “Scheduling Made Easy,” wrap actually turned out to take a bit more time. Ultimately, I added a <br /> tag to the text and hid it by default when not on mobile. But I also had to add a space in a span tag with the itemHide class.

Here’s the CSS for .rwd-break. It’s hidden by default and only appears in responsive displays, breaking the header text the way I want. 

Without the span tag space, the text would break without proper centering.

Simplifying the Meetings List Page

As I thought “mobile first” more and more, I realized that the phone-based user doesn’t need all the functionality on my pages. They don’t need all the tabs, they don’t need the table of data about meetings, and they don’t need all the icon button options. In fact, for the meeting page, they just need to be able to open meetings (they can cancel meetings from the meeting view page itself).

I combined the subject and participant columns into a single vertical column, and the result looks much better.

Meeting Planner Responsive Web - Responsive Meeting List

In /frontend/views/meeting/index.php, I added .tabHide to two of the four tabs:

And, in /frontend/views/meeting/_grid.php, I restructured the column to combine subject and participant:

Hiding the ActionColumn required a bit of research, but looks like this:

Ultimately, these changes simplified the desktop interface in the process of improving mobile.

The Big Challenge: Meeting Scheduling

Meeting Planner Responsive Web - Existing When Times Planning Form

By far the most challenging task for me was to adapt the meeting scheduling page above for mobile. It was a mess on phones, and I was daunted. Separately, I’ve always worried how I would adopt this interface for multiple participants in the future—responsive requirements might just make this more difficult.

My use of Kartik’s Bootstrap Switch Widget extension for Yii has its own limitations when it comes to modifying layout. Placing these elements in table columns worked well, but making table columns responsive wasn’t as straightforward with media queries.

Certainly as I showed with the Meetings list page above, hiding columns is easy, but modifying the placement not so much.

I began by moving away from a horizontal table design for showing time and place options and towards a vertical, portrait style. And, apparently, tables and columns have their own capacity to wrap with HTML5 and CSS without media queries. 

You can see the improved, empty meeting plan page here:

Meeting Planner Responsive Web - Responsive New Plan a Meeting Form

Each partial view required additional css columns for pre-defined Bootstrap grid layouts to work well, e.g. left col-xs4 and right col-xs-8. Here’s an example:

Making the place and time scheduling forms responsive was the most difficult. I experimented and ultimately succeeded in using table columns that naturally wrap as the content window (or device) shrink. 

I also eliminated showing participant status in its own column with disabled switches—you can’t change them, so why show them as switches? Instead, I created a textual summary of the status of your participants for places and times. Here’s the code for getWhenStatus():

Here’s what it looks like on desktop —notice the landscape layout of the rows of text and switches:

Meeting Planner Responsive Web - Desktop Layout of Times and Places Form

And here’s the mobile version, more portrait and stacked without media queries:

Meeting Planner Responsive Web - Final Responsive Meeting Planning Form

As an example, here’s the CSS for the way I coded the table columns on the When (times) panel:

And here’s the code for this partial form from /frontend/views/meeting-time/_list.php:

The best thing about these meeting view changes is that they’ll simplify the UX design challenge for future meetings with many participants. Regardless of the number of people in a meeting, the view will remain basically the same as above. Essentially, this solved the greatest barrier to me expanding to multiple participant meetings—UX design.

What’s Next?

I hope you’ve enjoyed following along as I work on the minutiae of responsive web design. As the code and visual changes to the site came together, I felt extremely satisfied and impressed with how little CSS was required. Taken together, you can see it here:

My future design efforts will begin, “What should this look like on mobile?”

As mentioned, I’m currently working feverishly to prepare Meeting Planner for alpha release. I am primarily focused on the key improvements and features that will make the alpha release go smoothly.

I’m tracking everything in Asana now, which I’ll write about in another tutorial; it’s been incredibly helpful. There are also some interesting new features still on their way. 

I’m also beginning to focus more on the upcoming investment gathering effort with Meeting Planner. I’m just beginning to experiment with WeFunder based on the implementation of the SEC’s new crowdfunding rules. Please consider following our profile. I will also write more about this in a future tutorial.

Again, while you’re waiting for more episodes, schedule your first meeting (from your phone!). Also, I’d appreciate it if you share your experience below in the comments, and I’m always interested in your suggestions. You can also reach me on Twitter @reifman directly. You can also post them at the Meeting Planner support site.

Watch for upcoming tutorials in the Building Your Startup With PHP series.

Related Links