Ingeniux Mobile Solutions

In recent years, there's been explosive growth in the variety and availability of Internet-enabled devices. From smartphones to tablets, the way we browse and view the Internet is constantly changing. Web design and development standards must adapt to meet the demands of this new technology. Responsive design and mobile websites are two important web-design trends that have emerged to meet the needs of new devices. 

Highlights

  • Drag-and-drop visual Page Builder
  • 100% Native Bootstrap 3 or Foundation templates
  • Automatic image optimization
  • Full mobile device library
  • Desktop, tablet, and smartphone preview     

Responsive Design

Responsive design is the latest trend in web development. It refers to flexible web page layouts that automatically adapt to the size of the viewing device. Because responsive design allows you to deliver one set of content with one design to desktop websites, tablets, and smartphones, it has quickly gained momentum in the web industry.   

Making Responsive Design Possible

The good news is that as new devices such as Apple iPhones and Google Android phones are being released, browser support for web standards is growing as well. Cascading style sheets (CSS) empower designers to manage the presentation layer independent of the content. New advances in CSS set the foundation for responsive design. As web standards expand, new specifications have been added by the W3C, the organization responsible for setting web development and browser guidelines. A new set of CSS rules using media queries allows a HTML5 or XHTML layout to adapt to different screen sizes, regardless of the device type. Web developers can now scale fonts, re-size graphics, and even change their layout based on the size of the screen.

Ingeniux CMS Responsive Design Page Builder

Ingeniux CMS provides a visual responsive page builder that empowers designers and marketing users to update or create website templates and layouts using responsive design. The page builder uses a responsive grid based on the Twitter Bootstrap or Foundation frameworks. Layouts can be easily changed to add or remove rows or columns, add content items or new elements for editing content.

Recommendations for Successful Responsive Design

With responsive design, you have a series of breakpoints depending on what screen sizes you want each view to target. Generally, most responsive sites will have a full-size desktop or horizontal iPad view, a slimmed down view that still maintains a column structure for a vertical iPad orientation, and a third view without columns that will scale well on all smaller devices, such as an iPhone. Most responsive websites set breakpoints at 1200 pixels, 979 pixels, 768 pixels, and everything below. With each breakpoint, you can write code to hide elements, show elements, or change element positioning and size to fit your content to the appropriate screen size. These sizes can also be targeted using jQuery or JavaScript if elements need to be added or removed dynamically. 

Responsive Design Breakpoints (adapted from Twitter Bootstrap Supported Devices table)

 

Device Type Layout Width Column Width Gutter Width
Large display (e.g. HDTV) 1200px and above 70px 30px
Default (e.g. desktop computer) 980px and above 60px 20px
Portrait tablets (e.g. iPad) 768px and above 42px 20px
Phones to tablets (e.g. iPhone or iPad) 767px and below Fluid columns, no fixed widths
Phones (e.g. iPhone) 480px and below Fluid columns, no fixed widths

 

The coding process for any responsive design site is to develop a desktop view and then use standards-based media queries to resize elements based on minimum and maximum widths. This will support the widest range of browsers. Older browsers that do not support responsive design - such as Internet Explorer 8 and below - will default to the desktop view of the site. Ingeniux recommends that your responsive design layouts in Adobe Photoshop or Illustrator match at least three of the views and breakpoints recommended for desktop, tablet, and smartphone layouts. From there, Ingeniux can simply add a custom CSS file to theme your site according to your branding.

Your Responsive Design Strategy

The Ingeniux CMS architecture makes the integration of responsive design into a new or existing website fairly straightforward. There are several strategies you can use to integrate responsive design depending on the state of your website and how much your content will change per display. For brand new websites or full redesigns using Ingeniux CMS, responsive design should be given serious consideration. With responsive design, your content strategy is more important than ever, as your content will determine the priority of your design elements, how they respond to screen resizing, and what is shown in each view. Based on your strategy, you can construct Ingeniux schemas to hold all of your content, and in some cases, you may have three different versions of a single element or component that would render conditionally. For websites that already exist, the process is less straightforward. It is often difficult to take an existing design and adapt it to be responsive. Responsive works best when the site is designed from the ground up to flow and adapt to multiple form factors and sizes. Often with an existing website design, or with websites that have a lot of conditional content due to external application integrations, table-based layouts, and other challenges, it is better to develop a dedicated mobile view. 

Dedicated Mobile Websites

Ingeniux provides the ability to detect mobile devices and deliver content optimized for any mobile device. Within Ingeniux CMS users can define a mobile web experience that uses new design but delivers existing content. The mobile version of your website will display on mobile devices and smaller tablets and adapt to fit the dimensions of the device. In this scenario, your existing URLs stay the same, just as in a standard responsive design. From a schema standpoint, you simply create a separate area of the site tree for the mobile experience pages. With user agent detection, you can then serve a different set of mobile-optimized content to mobile devices based on the content that already exists on your desktop pages. Just as in responsive design, you can still add new elements to content pages that would only display on smaller, mobile screens.

Ingeniux Multiple Device Support

Ingeniux has been in a position to handle content output on multiple platforms since its inception, and in CMS 8 we made enhancements that make multiple device output easily accessible for all users. Ingeniux CMS provides a Framework for full-featured mobile device detection. Rather than having to manually detect mobile devices, the CMS includes a full device library which is updated weekly so you're always serving up the correct content to a vast array of devices.  In addition, Ingeniux CMS allows you to preview your site on an iPhone, iPad, or any other mobile device display. This is a fantastic way to define different content for mobile devices and be able to preview it before you publish it out to your site. It also allows your users to know exactly what they're putting on the site for each mobile platform. Rather than rendering elements responsively based on CSS media queries, mobile-only sites use user agent detection. Ingeniux also integrates jQuery Mobile so that elements are rendered in a mobile-friendly way and support multi-touch interactions like taps and swipes.

Your Mobile Content Strategy

Regardless of whether you choose the pure responsive design route or the separate mobile architecture route, your content strategy and existing content are going to play a major factor.  You have to ask yourself if the content you have on your desktop site is appropriate for mobile. If it's a basic body copy area, the answer is probably yes, although the content may need to be shortened. If it's a table-based layout, fixed-width video, or other element that will break the layout as it resizes, the answer is no. You may need to create new elements or schemas to manage additional data. In some cases, it may not be feasible to re-use content. For instance, if you have an external application that you're pulling in with an iFrame and it doesn't resize, this content will automatically break. In most cases, a new mobile site is a great opportunity to examine your existing content, simplify it, and remove outdated information.

The Future of Ingeniux and Mobile

As mobile and tablet devices continue to be released, and the technical approaches available to us grow, our strategy will change in tandem. Ingeniux continually looks for ways to make each client project easier and better, and that means making continual modifications to our strategy. We're constantly refining our library of mobile code and researching ways to make responsive design and the unique mobile website approach more closely integrated. Standardizing our approach and embracing new trends in the industry will ensure our content strategy stays up to date with an industry that is constantly changing.

Getting Started

Ingeniux is available to discuss a responsive design or mobile website project. Traditional responsive design websites can be implemented on any version of Ingeniux, with the required updates to your schemas and CSS. For a dedicated mobile site, we recommend being on the latest version of Ingeniux so you will have access to important mobile tools including the native multiple device preview and mobile device detection.