Knowledge Base: Design Screen
Use the Design screen to perfect the look and feel of your mobile view
Overview
- Edit and rearrange your selections by clicking in the Preview.
- A single stylesheet is used to style the Templates of your mobile view.
- HTML id and class attributes are preserved from your source site.
- Add content by clicking "New Block" above CSS or returning to "Choose" and choosing additional content.
ToolBar
Save (ctrl+s): Save you work
CSS
Mobify uses a single stylesheet across the Templates of your mobile view. The HTML class and id attributes from your source siteare preserved in your mobile view so that you can use these to make your mobile view pop!
Preview
Shows a simluation of your mobile view on different devices. Click blocks inside the preview to edit them. Change the Template you are editing by selecting one from the drop-down box.
Controls
You can edit the selected block in the Preview using the Controls panel.
- New Block: Add a new static HTML block to this Template.
- Move Up (ctrl+up): Move the currently selected block up.
- Move Down (ctrl+down): Move the currently selected block down.
- Delete (backspace): Delete the currently selectecd block.
- Sticky: Make the selected block appear on all Templates. Use this to create a header or footer for your site.
- HTML id/class: Add an HTML id or class to the selected block allowing you to stye the contents.
- CSS Filter: Filter elements which match this CSS selector from the selected block.
- Image Ratio: Constrains the width of images inside this block to a percent of the screen size.
Best Practices
- Use em or named font sizes for the font-size property.
- Use the Firebug plug-in for FireFox in a second window to help migrate styles from the source site.
- Choose as much content from the source site as possible, instead of inserting manually.
- Design all image assets at 320px width so they can be scaled appropriately for mobile devices.