Watch this video to learn how you can optimise your CCK website for mobile devices.
What is responsive design?
Responsive web design optimizes the look of your site for any device. In other words, a responsive web design responds to a visitor’s screen size.
Responsive web design automatically optimizes the look of your site for any device. In other words, a responsive web design responds to a visitor’s screen size.
A well-designed responsive website looks great on a desktop—and equally terrific on a smartphone, tablet, or watch. To do this, you design different layouts for different screen sizes. Your site responds to the visitor’s device, displaying the layout that best suits your device.
The idea of responsive web design is relatively new. Until recently, designers assumed that users would generally access the web on their desktop, and mobile devices were a secondary concern. Today, however, more than 50% of visitors to your site will be using mobile devices. What’s more, mobile devices run the gamut from large pads to tiny watches, and may have almost any aspect ratio.
This is what a typical website looks like on a desktop computer.
The same site as above, but this time as it would appear on a tablet.
The same site as above, but this time as it would appear on a mobile.
When you design your site, by default, the settings and content will apply to all screen sizes – desktops, tablets and mobiles.
Responsive editing allows you to customize many of the these elements for specific devices.
For example, your site may specify unique font sizes or even different background images for different size screens.
This article will guide you through the process of customizing your site, so that it looks great on any size device.
Using Responsive Design Effectively
While responsive design was once an afterthought, today’s best practice is to design your site for all screen sizes simultaneously. This makes sense because far more than 50% of users are accessing websites on smartphones and tablets.
The CCK Editor supports this approach with its responsive mode, which allows you to quickly shift between editing a page in desktop, tablet and mobile mode.
When designing for a smaller screen, it’s important to select the right elements and create an optimal responsive design for each screen.
Be mindful of how users will interact with very small elements which may be easily accessible on a large screen but nearly invisible on a mobile device.
CCK Tools for Responsive Design
CCK offers a full range of tools for creating and managing your responsive website:
Tools for hiding elements of your site on selected devices, so that you can optimize user experience for each device
A responsive mode to change the look and feel of the site on different devices.
Options for changing background images, borders, the order of columns, and other elements for devices of different sizes
Buttons
When adding or updating button styling on your desktop view, always make sure to check what the styling looks like on the mobile views. This ensures that your buttons are displayed correctly on all devices.
Always start on the desktop view when changing the styling of the buttons, then move to the different mobile views to see what it looks like and if you are satisfied with the styling.
To edit the width of the button manually, setting the button to Expand to full width, enables you to set the width manually on desktop view as shown below by dragging the sizing arrows:
A good suggestion is to keep the text on your buttons short to avoid the text running over two lines when displayed on the mobile views as shown below:
Block Visibility
You can choose to Show / Hide a Section according to the device.
On CCK you have the option to hide blocks on the mobile views only. To do this, switch to mobile view and click on the icon of the mobile device you would like to hide as shown below:
In the example below, the block with the image is hidden from both Tablet and Mobile views, but still visible on the desktop view:
Another option is to add a Mobile Only block or widget and hide it from desktop view.
To do this, head over to your mobile view, click on add block or on the widget button and add it to your page
In the example below, we have added a block, notice the Mobile Only tag as well as the displays where this block is visible, in this case the block is hidden from desktop view and visible on both tablet and mobile views only:
Images
CCK offers two ways of adding images to your blocks and pages:
Adding background images to columns or blocks
Adding a background image to your column can give your page a unique, custom look.
You have the ability to change the cover effect, repeat, and height of the background image, but this may result in the image not being displayed correctly on all the different views.
Adding image widgets to your blocks
By using the Image Widget when adding images to your blocks and pages, CCK optimizes the image to display better on all the different views and offers more flexibility when changing the display of the images in terms of size, spacing, alignment and stretching.
Also, when adding an image widget to your blocks and pages instead of a background image, it allows you to display an image or logo with a link, to enhance your block content.
Multiple Columns (Stretch)
A great feature when having multiple columns is being able to change the way columns display on the mobile views. You can stretch the columns to display below each other or have the columns display in a similar was as on the desktop version as shown below:
Another great feature is the ability to change the column order on mobile only views as shown below:
Responsive Support
Get the CCK team to optimize your CCK website for you.