Can it Core an Apple (or Android)?
With the prevalence of Smart Phones, there are various strategies to consider when it comes to supporting these devices while dealing with web design. Two common buzz phrases are “Mobile First” and “Responsive Design”. These approaches have gained popularity, and as is often the case with technological solutions, are used without much analysis about whether or not they are the best approach.
To start, let’s look at the Mobile First approach.
What is Mobile First? This approach focuses on creating the “harder” design for small screens first, then shifting gears to the “easier” design for a normal screen size. For our purposes, let’s pretend my site is geared towards the social media using, smartphone crowd (Twitter, Facebook, etc.). Since like we said, we are doing small screens first, Mobile First makes the most sense to use as my approach.
However, if I am that focused on the mobile aspect, I would probably have an application for that, so my mobile web design would say: “Here’s a link to load my app”.
But what if I don’t have an application developer, and my audience is half mobile & half not mobile? In this case, it would seem like Mobile First would be a good approach because mobile users will not look favorably on your site if it isn’t ‘mobile’ friendly.
Contrarily, what happens when this Mobile friendly site shows up on a large desktop screen? What will this portion of the audience think?
At the end of the day, you could choose your target audience and run with it, or, as I like to do, work two designs parallel to each other to make life easy for both audiences, and have both platforms ready for simultaneous launch.
A big issue with Mobile First approach is that some pages are too large to display on a cellular device. This means I would need to create a scaled down version to let the user know that there is something on a particular page that requires a larger device to view it. This is one of the times where Mobile First does not help me out very much.
Instead of just “Mobile First”, I choose between “Mobile First”, “Mobile Also” or “Mobile In-Case”.
When do I use each of these approaches?
- Mobile First if the site is primarily geared for mobile users.
- Mobile Also when there is a need for both mobile and non-mobile; the goal here is to remember the mobile design.
- Mobile In-Case is for the sites that are primarily desktop/laptop but may need some adjustments in case a mobile user accesses the site.
Next, we look at Responsive Design.
This approach is pretty neat. With a program like that of Bootstrap, I can have my 12 column row on my desktop become 2 rows of 6 columns on my landscape mini iPad or 6 rows of 1 column on my phone. Also, when I am on my desktop, and I resize the browser window to smaller dimensions, it reacts as well. Awesome, right?
What if my site has some fancy navigation with multiple levels of fly-out menus, and for the mobile, I have hamburger menus and slide-outs, which are both rendered in my HTML? No big deal for my desktop/laptop, but not too friendly for my cell data and speed. If you are a really well-organized developer, managing a Responsive Design site is a walk in the park. However, the key word here is organized, it is crucial to be organized when using this approach or things could get messy.
An alternate consideration to this approach might be a mobile subdomain. If a site is primarily geared for mobile users, maybe the alternate is a desktop subdomain. By having different subdomains based on device, the rendering can be better tuned, reducing payload size, and potentially cleaner design implementation. However, there are aspects of Responsive Design (adjusting to browser sizing or mobile portrait/landscape modes) that are useful even if you have different subdomain sites. It should be noted that I have had one issue with Responsive Design. When the customer starts resizing the browser window, it jumps to a smaller size, and they don’t like the sudden adjustment.
Ultimately there are value points to whatever method you choose. I am one of many Zilker Consultants who can help you choose the right solution and optimize your site for any user, anywhere.
Don't miss out! Get updates on new webcasts, events, and blogs.