Every screen deserves special attention
Adapting to the needs of the platform is the only way to create optimal experiences for users.
Mobify believes every screen deserves special attention. Every image asset on your desktop site deserves to have a supporting custom mobile asset to match. Sometimes the differences may just be the way the image is cropped. In other cases, a large landscape photo with overlaid typography will be transformed into a square image with supporting content below.
Working With HTML and Imagery
Working with both an image and HTML is what we would consider the "gold standard" — it produces the best results across all of your platforms. This approach involves using images for any graphic or photographic elements, and HTML text for any text-based content or interface elements, such as buttons.
This workflow allows you to manage a single code base and transform content to create the optimal user experience for a given screen size. This has a few benefits. Text and interface elements harmonize with existing site styles, allowing your content to appear consistent across screens. The user experience also benefits from improved accessibility as all headlines, supporting content, and call-to-actions are readable by screen readers. You also have the advantage that all content and links are readable by search engines.
The Image-Only Approach
Many of our customers are not setup to support front-end development within their marketing teams, which rules out an image and HTML text approach. You can still create compelling mobile assets.
The image-only approach seeks to customize mobile assets to a precise standard. Text sizes fall above a minimum size, call-to-action buttons are suitably sized to make interaction easy, and images are cropped and sized in a way that makes them appealing on a small screen.
By implementing some simple standards you will be able to create and manage your promotional banners and get them live quickly. You will also have the flexibility to control your layouts as you see fit. You will, however, lose the accessibility and performance of a modular image and HTML approach. Some basic guidelines for creating a full-width mobile asset:
- Assets that span the full width of a mobile device should be a minimum of
72dpi. This will allow for images to display clearly on @2x and @3x devices.
- Text should be no smaller than
- Call-to-action buttons should a minimum of
132pxand contain a clear call-to-action no smaller than
The easiest way to include mobile-specific assets is to add a unique attribute to the image tag, and add the mobile-specific asset URL as the value. We would recommend using attribute data-src.
<a href="/URL/to/promo" title="Shirt and Top Sale"> <img alt="Shop Women" src="/URL/to/women/shirt-and-top-women.jpg" data-src="/URL/to/women/shirt-and-top-women--mobile.jpg" /> </a>
As most desktop images do not work well on mobile, we suggest you avoid using them, even if there is no mobile asset. In our example above, if the image tag does not have the data-src attribute, it will not be included on mobile.
It is the designer’s responsibility to hand over icons to their team’s UI Developer.
Mobify uses the
.svg format for iconography.
The format decision comes down to browser support, primarily. This CSS-Tricks article, Inline SVG vs Icon Fonts, offers a great side-by-side comparison of why
.svgicons are far superior.)
1. Setting Up Your Icons
You'll want to make artboards uniform in size. In the project, icons will be relative to the Artboard size. Here (screenshot below) is an example of
.svg icons in a project, with the artboard highlighted to show the relationship between artboard and icon.
Typically, you will size your icon artboard according to your base font-size value — most likely
16px. You can position your icon anywhere within this artboard. There are many free-to-use icon libraries on the web — as long as the icon license allows for usage, you may use whichever icons you deem appropriate. Keep in mind the ecosystem you are designing for (iOS/Android/Web) and brand aesthetic.
2. Exporting Your Icons
In Sketch, a default
.svg export is fine. Give it a descriptive name, such as
heart.svg. There is no need to prefix or suffix it, unless you are exporting different sizes.
.svg files are fully scalable, so there is typically no need to export a small or large version.
3. Cleaning Up Your Icons
There is quite a bit of bloat that goes on inside a default export. You’ll want to remove that bloat, which you can do with an
.svg file optimizer such as SVGO or SVGOMG. Simply drag your
.svg icons into the terminal window, and watch as they get crunched down. Note that any
.svg files exported from Sketch will automatically be cleaned and optimized with SVGO.
Once compressed, you should open up the
.svg file with a text editor. These files are simply vector images, created by calculating curves and shapes between points. It’s all code! That means you can optimize them further with a little manual tweaking. Within your text editor, change the
<title>...</title> element to something descriptive, if it is not already. (i.e. Heart Icon.) You’ll also want to remove any
fill="..." instance so that the icon can inherit a colour defined by your CSS. (An exception: if your icon uses multiple colours, like an illustration, keep the fill value, otherwise the colour will be lost and will inherit whatever the parent container’s colour is.)
You can now deliver these icons to your UI Developer, or dump them directly into a project yourself (typically in the
/static folder) and let them know it is available for them to use.