Mobile-first Design in Wildfire
Principle #1:
Most users are viewing your site on a mobile phone
Smartphone preview
Wildfire gives you a preview of smart phone view, use it`to check out how your site looks on a mobile phone!
Dropdown menu in the topright corner when viewing (not editing) a page
Test on a physical Smartphone
Click Guest preview
Copy link
visit https://www.qrcode-monkey.com/
Scan QRcode with phone
Principle #2: Less is More
Show the most important content first
Use text only when images aren't enough
Short sentences, large font
Avoid cramming too much onto small screens
White space
#3 Speed
Fast loading Speeds:
Slow loading times will drive users away
Do not have too many videos on the first page (especially not autoplay)
Too many large images could also make it slow
Principle #4: Easy Navigation
Menu is hidden in mobile, so give the users a clear path to find content
Call To Action
Icon navigation
Icons and links to content on home page
Call to Action button on homepage
Pages with Submenus
Pages that also have a submenu are a usability problem in Mobile view.
Either have links on the page to all submenu pages, or use a Menu Item rather than a Page
| Menu Item | Page |
|---|---|
| Does not open a new page | Opens a new page |
| Contains no content - holder for menu links only | Can contain content, but will start out blank - bringing visitor to a blank page (not a good look!) |
| Created in "Arrange menu links" |
Usability
Check usability on mobile:
e.g. PDF - single item is not as usable on mobile - PDF Library is preferred
PDF - Single item works well in Desktop
but becomes very small in mobile
PDF Library is preferred, since the PDF is viewed in fullscreen
Font size in Image with Text
Looks alright in Desktop view...
But on Mobile:
Where's my text gone on the image?
Leave Font size as Default
Here's the text, set to default, automatically resized to fit
This will no longer be an issue in Wildfire 5.18 - the new version will not allow Font Size to override the Automatic text size in Image with Text.
Image with text Style
Image with text has three styles: Text on image, Side by side, Wrap text. They are designed for different uses. Here are some examples:
The Wrap text option in Image with Text is useful for longer text, e.g. a paragraph, or a longer quote. The image can be large or small. If the image is too large, the text won't actually wrap around it.
Layout changes in Mobile view
Mobile view is single column, and it is always left column first (in LTR languages.)
2 column or IWT Side by side?
An alternating text/image looks good on desktop, but does not look as balanced in mobile view
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Website name, icon and slogan
There is only a small amount of space for the website name in mobile view, and a longer name or slogan takes up too much screen real-estate.
The icon will be very small, so should not be too detailed.
Domain names don't make good website names
Summary
- Most users are on mobile
- Show content first
- Speed
- Easy navigation (CTAs)
- Usability
