Did you know that there are more mobile users than there are laptop users now? So, it makes sense that when you are creating a new website, content marketing strategy, launching landing pages or looking for a re-design you take into consideration the mobile content design for user experience. Frequently, you hear new clients wonder does this price include the mobile website? Will this look good on my phone or even how will we make it mobile-friendly?
All websites need to look good on desktops, laptops, tablets and on all cell phone sizes.
How to create mobile content design for user experience
Almost all designers when starting a new project or updating an old one understand that content design for user experience will take multiple forms over the coming years. The styles and what’s popular on service and product websites is always changing just like in the fashion industry. Not only is the look and feel changing, but the way people code gets better and smarter over time. This is no different with creating websites.
The most important thing is to create pages and functions that can easily be updated, recreated to make the jump in the future.
But, how do you do that?
Two ways to create content design on the mobile device.
- Creating two separate entities.
- Creating one page that has styles and classes that update based on which size screen the content is being looked at.
The second option is the way we design at TracSoft. Let’s get started.
Create your Content
Gather your content materials including: copy, relevant links, images, gifs, numbers, tables, etc.
There is a weird relationship between designer and content writer that seems to exist:
You may not understand why it matters, but content strategy is the most fundamental job. This is what frames the project for the designer. As a content strategist, it your job to articulate the why, where, who, what and how of the content.
- Why is it important to convey this message? This speaks to purpose.
- Where on the website should the message appear This speaks to context.
- Who is the audience? This speaks to the precision of the message.
- What are we trying to say? This speaks to clarity.
- How do we convey and sequence the information for maximum impact. This speaks to persuasiveness.
A good strategy to bypass the struggle of first getting started on your content is to have a specific route you take for each website. Know up front a specific word count you like to use throughout the page. For example, the title will be up to 25 characters, the header section will have up to 150 characters, the next section will have three columns with 75 characters each, ands so forth down the page. A good way to stay organized is to use a project management system like Basecamp, which we use here at TracSoft.
How to Create Mobile-friendly content on all screen sizes
First, you will need to make sure you add the following meta-tag to the documentelement on your website:
< meta name="viewport" content="width=device-width, initial-scale=1.0” >
Using responsive code to adjust for screen size
Use media queries (breakpoints) to allow the design to adjust for screen size. This is done at the end of the existing CSS ode. We will add our first media query at 980px wide or less, a second at 700px and the third at 480px or less.
Creating sections that look good on all browser sizes
Next you are going to want to add your content and style out your sections. One of the ways we have been able to do this is by using the GSPS (Genesis Simple Page Sections) shortcode. This is an easy way to make full width pages sections on WordPress that typically automatically look good on mobile depending on the CSS and in-line HTML that you have used throughout the page.
Using margins in mobile content design for user experience
Margins in content design can make your content look great, but it can also be detrimental to content looking good on both your laptop and your phone.
The recommended sizing for margins is 1-px – 20px for it to look good on either size without having to do too much work to update the entire page for mobile content design. A lot of times, margin: 0 auto; will be what you need, especially when using columns.
Using padding in mobile content design for user experience
When you use padding, you are designing the innermost portion of the section such as creating space around an element’s content, inside of any defined margins and or borders. Padding values are always initially set to 0. The recommended sizing for padding is 10-15px.
Designing Mobile Content Design for User Experience
Responsive design is the foreseeable future. Take advantage of these techniques to have the skills to design for many screen sizes. Gone are the day of designing separate entities for your laptop, tablet and phone. Now, in mobile content design for user experience, you can design once and display everywhere.
Let us know if you have any questions or are looking for help building a responsive website. Contact us Today!