Responsive Web Design and Content Management Systems - Why a “Mobile First” Perspective is the Future of SiteNinja CMS

By Dave Myers // Mar 04, 2014 at 02:45 PM
Robot or Not? Robot or Not?, demo site for Responsive Web Design, demonstrated by Design Modo.

Recently, I was having a conversation with my girlfriend about replacing her old 13” Macbook. It’s getting up there in years and is still running Tiger OSX. Initially, she was planning on replacing it with a new 13” Macbook Pro. 

“Do you think I should just get an iPad 3 instead?” she asked. My first reaction to this question was that a tablet is not a direct-replacement for a laptop. You wouldn’t want to do heavy word processing on a tablet (although a bluetooth keyboard might make that more practical). But she made a good case for the switch. Most of her online time is used to browse, shop, or watch videos; three activities that suit the iPad perfectly. She also does most of her browsing while relaxing, where an iPad would be the ideal device from a comfort standpoint. If she needs more, the laptop is still there, but it’s going to be used far less.

The shift away from the traditional desktop environment

The fact is that she’s not alone in her desire to ditch the laptop/desktop environment to suit her Internet needs. Mobile and tablet Internet usage has been increasing at an astounding rate. Research shows that mobile usage is slated to overtake desktop by 2014. With this in mind, the necessity to shift focus away from catering to a desktop user experience (and cramming all of that onto a small mobile device) needs to happen yesterday.

OSX Lion Launchpad
OSX Lion features "Launchpad", which is almost a direct copy of iOS's SpringBoard.

Even the desktop environments we have become so familiar with are drastically changing to better fit the simplified user experience of mobile. OSX Lion started to implement iOS features, such as Launchpad, which behaves almost identically to the iOS SpringBoard app-launching interface. OSX Mountain Lion is continuing this trend, ditching some of the original OSX apps for their iOS equivalents, as well as adding a Notification Center straight from iOS 5. Windows 8 takes things further by completely hiding the standard Windows desktop behind an all new Start experience based on their Metro UI, originally introduced in Windows Phone 7, controlled primary through touch.

Windows 8 Start Menu The Windows 8 Start Menu has been completely redone to focus on the needs of touch-based devices.

So just what is responsive design and mobile first, and why should you care?

Well, if you happen to be a person who has a website to connect to people (be they customers, clients, users, or whatever your audience may be), you should care a great deal.

I’ll just give a quick overview of the concepts behind responsive web design and mobile first, as there are already excellent resources available about them (just follow the links), and that isn’t the focus of this article. The layout of a website should be responsive to how the end-user is receiving that content. On a mobile device, using a multiple column format is not very practical. Content is best viewed in a single, vertical-scrolling column. Also, you need to prioritize the main content of the page over all other elements. Content not directly related (such as side column content) either needs to drop down the page or be completely removed. Where navigation is usually prominently displayed at the top of a website when viewed from a desktop environment, it needs to be tucked out of the way. Fonts need to be larger to be more readable on small screens. Clickable elements need to be easy to interact with through touch.

Yiibu Yiibu is a proof of concept for Rethinking Mobile Web. Notice how the secondary content goes from a three column format to one column and the menu and search are repositioned for mobile.

Mobile first is the process of solving these problems first and then progressively enhancing the layout to adapt to other formats. This is counter to how we web designers have been approaching layouts throughout the years, and it takes a real effort to challenge the direction of our workflow to accommodate this new perspective. But the advantages to working from mobile first and progressively enhancing the user experience are huge. Working this direction forces you to really focus on what is of core importance to users and trim all of the excess. In fact, you might find yourself completely abandoning some of the complexities that just convolute the experience.

Smashing Magazine Responsive Layout Smashing Magazine has a multitude of different layouts, ranging from the mobile to the very wide display. Each of these layouts still maintain a comfortable, readable line length for the main content.

How it applies to Content Management Systems

While designers are now focusing on responsive themes, CMS applications themselves still use a desktop experience to manage content. But it’s very likely that admin users will want to be able to access certain things from a mobile device. What’s important is to determine what functionality they might desire when they’re not sitting at their desk.

First and foremost, being able to write blog articles with a simplified form seems important. This is a similar need to mobile facebook posts or tweets. There is 2 times more facebook activity from mobile devices than desktop.

A site author isn’t always at their desk when news breaks that they want to share on their website. Why not give users the ability to easily write a simple article to connect with their audience, regardless of where they are at the time?

The scenarios where mobile blog posting could come into play are many. Imagine you are an author live on the scene of an event related to your website. In this case, let’s say you have a blog about iDoohickeys and that the event is Doohickey Incorporated’s unveiling of their new iDoohickey 5Gs. Of course, the event is absolutely packed with reporters desperate to get the scoop on the product. Sure, you could be jotting down key points for an article you’ll be posting when you get back to the office, but then somebody else is going to get to the story first. Instead, equipped with your trusty iDoohickey mobile device, you start posting to a live blog on your website, informing your users in real-time as the event unfolds. You could be posting as easily as if you were to send a text, tweet, or post to facebook about it. Website users could be commenting and interacting on the live blog, wherever they are and with whatever device they’re using.

Live blogs are not a new concept, but giving any blog author easy access to posting from a mobile device would really open up the opportunities to connect immediately to an audience.

How SiteNinja CMS is addressing it

SiteNinja Responsive Theme
SiteNinja Responsive Theme. Coming soon, I promise.

Responsive themes for users

First and foremost, new sites will be rolling out based on new, responsive themes. These are being approached from a mobile-first perspective, and new, mobile-only interface controls will be introduced. This includes mobile-friendly navigation options and a touch-oriented slider for feature content. Adaptive versions of existing themes might be considered if there’s enough requests for them, but we’ll be encouraging users to instead use one of our newer themes for their site.

Mobile experiences for administrators

The SiteNinja Dashboard, Blog, and Pages will all be getting responsive, mobile-friendly layouts first. These updates should be rolling out in the coming few weeks, followed by the Events and Listings modules.

Enhanced previewing for designers

Preview functionality for Pages, Articles, Templates, and Themes will be extended to 4 separate previews; each intended to simulate the size of key devices (Mobile, Tablet, Standard Desktop, Wide Desktop).

But how will I post without a WYSIWYG?!

It’s true: WYSIWYGs (What-You-See-Is-What-You-Get editors) are unsupported by many mobiles and tablets. The reason for this is that the mobile browsers lack “contentEditable” support, which WYSIWYGs rely on to replace textareas with content-rich editors. This lack of support could actually be very helpful in the separation of content and formatting. I have been begrudgingly supporting the WYSIWYG now for the past 5 years, while encouraging users to instead use our built-in “Ninja Tags” (previously known as Ninja Code) instead of formatting their own HTML.

TinyMCE in iOS 5
The latest TinyMCE within SiteNinja on iPhone 4S, using iOS 5's contentEditable support.

The major problem with WYSIWYGs is that you are potentially giving a user control over the format of their content when they might not be very HTML and CSS savvy. In addition, if they are using formatting like tables to layout their content, they are formatting the content only for the desktop user experience. As the separation of formatting and content is central to semantic code (and responsive design), I encourage users not to do anything beyond basic formatting within the HTML editor. This ensures that their content is presented in a clean, professional manner that their users can easily read. When it comes to any pages that require special formatting, the client should probably still depend on their web company to format the page optimally.

The solution is to enable some of the basic formatting options with simple tags that are outside of the typical HTML formatting of a WYSIWYG. Textile is one option, although it’s not extensive enough to encapsulate all of the needs of our users. Instead, we’ll encourage the adaption of our own proprietary parsing, “Ninja Tags”. We’ll provide a simple key as a guideline for users to follow, but there are very few rules an end-user will need to learn. These basic hash tags will provide users a way to mark up their code from any device without the need to understand HTML or having a device that supports a WYSIWYG.

3/5/12 Update: I stand partially corrected on mobile's support for contentEditable. iOS 5 Mobile Safari added support, and newer versions of TinyMCE are now supporting these devices (the content of this article has been updated to reflect this). Of course, that doesn't mean it's available to everyone. From a progressive enhancement standpoint, we still need to provide an easy-to-use interface for those on devices without support. The mobile editor should also be much simpler to use, as the smorgasbord of buttons and options would overwhelm the experience.

Conclusion

Oh sure, I know what all of you are thinking right now. “How can you possibly take such an authoritative role on this subject when your own website doesn’t adhere to the message you present?” Don’t worry, that problem will be addressed in the near future, but only after it is addressed for our clients.

Our top priority is providing you with the tools that you need to manage your website, regardless of how you are accessing that content. We’re excited about the opportunities these new technologies will provide you, and encourage you to explore the new features as they become available.

3/13/12 Update: These features are beginning to roll out; take a look at my article announcing mobile CMS tools and responsive content previews.

Posted in SEO and CMS.