{"id":250001,"date":"2014-03-04T14:48:33","date_gmt":"2014-03-04T22:48:33","guid":{"rendered":"https:\/\/divi.ameravant.com\/ameravant\/?p=250001"},"modified":"2022-06-14T10:13:34","modified_gmt":"2022-06-14T17:13:34","slug":"5040-responsive-web-design-and-content-management-systems-why-a-mobile-first-perspective-is-the-future-of-siteninja-cms","status":"publish","type":"post","link":"https:\/\/ameravant.com\/article\/5040-responsive-web-design-and-content-management-systems-why-a-mobile-first-perspective-is-the-future-of-siteninja-cms\/","title":{"rendered":"Responsive Web Design and Content Management Systems – Why a \u201cMobile First\u201d Perspective is the Future of SiteNinja CMS"},"content":{"rendered":"\n[et_pb_section fb_built=”1″ theme_builder_area=”post_content” _builder_version=”4.14.7″ _module_preset=”default”][et_pb_row _builder_version=”4.14.7″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.14.7″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_text _builder_version=”4.14.7″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]
Recently, I was having a conversation with my girlfriend about replacing her old 13\u201d Macbook. It\u2019s getting up there in years and is still running Tiger OSX. Initially, she was planning on replacing it with a new 13\u201d Macbook Pro.\u00a0<\/p>\n
<\/a>\u201cDo you think I should just get an iPad 3 instead?\u201d she asked. My first reaction to this question was that a tablet is not a direct-replacement for a laptop. You wouldn\u2019t 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\u2019s going to be used far less.<\/p>\n The fact is that she\u2019s 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\u00a0mobile usage is slated to overtake desktop by 2014<\/a>. 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.<\/p>\n 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<\/a> 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<\/a> takes things further by completely hiding the standard Windows desktop behind an all new Start experience based on their Metro UI<\/a>, originally introduced in Windows Phone 7, controlled primary through touch.<\/p>\n 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.<\/p>\n I\u2019ll just give a quick overview of the concepts behind responsive web design<\/a> and mobile first<\/a>, as there are already excellent resources available about them (just follow the links), and that isn\u2019t 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.<\/p>\n 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.<\/p>\n While designers are now focusing on responsive themes, CMS applications themselves still use a desktop experience to manage content. But it\u2019s very likely that admin users will want to be able to access certain things from a mobile device. What\u2019s important is to determine what functionality they might desire when they\u2019re not sitting at their desk. <\/p>\nThe shift away from the traditional desktop environment<\/h2>\n
So just what is responsive design and mobile first, and why should you care?<\/h2>\n
How it applies to Content Management Systems<\/h2>\n