This page contains some guidelines to help you make sure your content is mobile-friendly.
Keep content short
People don't like to read lots of text on a web page. Readers tend to skip around the page, looking for what they need. The average amount of time a user spends on a single page is about a minute and a half. Keep this in mind as you create and edit content for your pages. Break your content into small chunks. Use subheadings to help readers find what they need on your page. Bulleted or numbered lists are also good ways to deliver information efficiently.
Avoid directional references
Keep in mind that with responsive layouts content elements get repositioned depending on the visitors screen size. Because of this, referring in your content to the location of other elements on the page (e.g., "...the menu on the left" or "...in the right sidebar") is not going to be helpful when someone is reading on mobile. The menu may now be collapsed, and the sidebar is no longer on the right.
Working with sidebars
One thing you'll realize when looking at the mobile layout is that sidebar elements get positioned below the main content. This makes sidebar content less visible to mobile users. Thus, you may not want to place critical information in the sidebar but instead keep it high up in the main content area.
Working with images
You can continue to use images as you have to date. Images will resize themselves to fit the mobile layout. You will notice however that horizontal images work a bit better on mobile than vertical images. This is due to how images need to resize for a mobile screen.
Once in awhile you may see an image that gets disproportionately stretched instead of scaled properly. To fix this, double-click on the image when in the editor. Click on the Advanced tab, then in the Stylesheet Classes box, add img-responsive to the list of classes, including a space if necessary.
Avoid long URLs
Please avoid including long URLs in your text. They don't wrap well in mobile. It's best to add a link to a phrase in your text. Please try to avoid using 'click here' for your links. It is best practice to link a phrase that communicates the content of the destination.
Mobile-friendly: Download the Application
Not mobile-friendly: http://www.law.nyu.edu/academics/colloquia/legalandconstitutionalhistory/application
Resist hidden layout tricks
In the past it was sometimes possible to achieve a desired layout using tricks like non-breaking spaces ( ) or fixed-width tables to position an element on a page. Now that we are using dynamic layouts, these tricks need to be retired. If you spot awkward formatting on any of your pages--large gaps, misaligned text, etc.--you may need to go into the Source view on your page and remove unwanted tags or other fixed-size markup.
Tables and responsive
Tables and responsive layouts can be a challenging mix. While tables don't need to be entirely avoided going forward, they should only be used when necessary. Bullet lists can often accomplish the same result as tables and they reflow beautifully in responsive layouts.
If you do need to add content into a table, you can make the content scroll horizontally by modifying the table properties. This needs to be done in the HTML source of your page:
- Click the Source button in the editor.
- Look for the
<table>tag. - Add
class="table-responsive"as one of the properties of the opening <table> tag. - It should look something like this:
<table border="1" cellpadding="1" cellspacing="1" class="table-responsive">
If you run into trouble with tables, please reach out to the web team and we can assist you.
Test your changes
As with any edits to your pages, it is important to test them after you save changes. Now with the responsive layouts we recommend first checking your changes with the desktop view, then drag your browser window as narrow as possible to make sure your changes behave correctly in the mobile view.