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 website 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, smartphone, tablet, or watch, and this is achieved by designing different layouts for different screen sizes. Your website responds to the visitor’s device, displaying the layout that best suits the device being used.
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 website 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 website, the settings and content will apply to all screen sizes – desktops, tablets and mobiles.
Responsive editing allows you to customize many of 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 website 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 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 tablet and 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 tablet or mobile views:
Block Visibility
On CCK you have the option to hide blocks on the tablet and mobile views. To do this, switch to tablet or mobile view and click on the icon of the tablet or mobile for the block you would like to hide:
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 which is hidden from desktop view but visible on both tablet and mobile views:
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 tablet and mobile views. You can stretch the columns to display below each other or have the columns display in a similar way as on the desktop version:
Another great feature is the ability to change the column order on tablet-only or mobile-only views:
