You can read and see plenty of articles about mobile and responsive development, but this is quite different than actually making an existing production site fully responsive. Here's how I went at it for our own Six Feet Up site, which is powered by the open source CMS Plone.

The idea was to take our existing design and modify it to look good on mobile browsers.  Previously, the site was using a fixed width at 980px wide. The decision of how the site would look on narrow browsers first went to the marketing team. They decided how the elements would rearrange, and which would be dropped, if any. They came up with a wireframe of the narrow design.

I then chose how everything would fall in to place for all the in-between widths. The site continues to be fixed for browsers greater than 980px, but becomes fluid as you get narrower than that. I then set break points at widths when either something broke the layout, or a column became too narrow.

The biggest code changes in the site happened to the main_template. Still being on Plone 3, we were using the tabled version of the site. The table cells were converted to divs, and the divs were arranged to match how they would appear for the narrowest view. The order became content column, right column, left column. Nearly all other site changes were done in CSS, including those for the global navigation.

A common challenge for developers working on a responsive design can be to get it to actually work in a mobile browser. You can do all your testing using Firefox, and get a decent responsive design together, but it will not work in any other browser.  You may need to add a meta tag for viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

As far as I am concerned, I ran into an unusual problem - the media queries were not working for me when put inline into the CSS. I ended up creating a separate stylesheet for each breakpoint, so the media query is on the style tag that imports each file.

<style type="text/css" media="screen and (max-width: 690px)">@import url(690.css);</style>

Once you know those two tricks, future experiences with responsive design should be much faster.  For me, writing the CSS was the easiest part. One of the most time-consuming parts will likely be getting the client and designer to decide how the site should display at various break points.

Are you working on a responsive design project yourself? Feel free to email me with questions and/or comments.

Yes, Plone4ArtistCalendar is alive, and 2.1b1 has just been released! Plone4ArtistCalendar are extensions that give you nice Calendaring support for Plone, with day, week and month views. There are other alternatives, most notable solgema.fullcalendar, but Plone4ArtistCalendar doesn’t use JavaScript, so it is accessible for those who can’t use JS.

Version 2.1b1 has the following major improvements:

• It now uninstalls cleanly. Again. I fixed that years ago, but I thing p4a.subtyper since “lost” the uninstall. The 1.2.2 release of p4a.subtyper now has a proper uninstall again.
• It no longer uses p4a.subtyper. You no longer mark folders and collections as being of the Calendar subtype, instead you just choose one of the calendar views from the Display-menu. This is more “Ploneish” and less confusing, and also makes uninstalling easier.
  
• It now supports Plone 4.2. That includes supporting the new Collection-type.

Other changes are that there is no longer any official support for Plone 3.0, 3.1 and 3.2. Plone 3.3 is still supported, though, and although I didn’t test it under Plone 4.0 it seems unlikely that it would run under Plone 3.3 and 4.1 but not 4.0. There is also no longer any official support for p4a.ploneevent, and hence no official support for recurrence. No code has been removed, so it should still work, but I’m not aware of anyone using p4a.ploneevent anyone. Recurrence will in the future be done through plone.app.event, but this is not supported yet.

Support for plone.app.event is the only planned future feature, otherwise the plan is to clean up and remove code, and simplify, simplify, simplify.

Plone's Products.TinyMCE versions 1.3beta+ provide custom shortcut links in Add link and Add images dialogs. You can add your site specific shortcuts there yourself.

The most common use case is a shortcut link into a folder which acts as a site image bank. On multilingual sites this folder is

• Below natural language folders in the site root (e.g.  /image-bank when you have /fi and /en)
• Language neutral – images are shared across the languages

Because of the special language neutral nature, navigating to the image bank folder using normal Plone navigation is difficult.

For adding images use case we can fix this by including a shortcut which directly takes you to the image bank from main Add image screen.

Below is an example of Finnish shortcut “Kuvapankki” which is a custom addition besides Home and Current Folder.

New TinyMCE shortcuts can be registered as global utility via Products.TinyMCE.interfaces.IShortcut interface.

We’ll register our image bank as a shortcut into TinyMCE image dialog.

First make sure your add-on is grok’ed.

Then drop in the following file shortcut.py file into your add-on:

from five import grok
from Products.TinyMCE.interfaces.shortcut import ITinyMCEShortcut
class ImageBankShortcut(grok.GlobalUtility):
    """Provides shortcut to the language neutral image bank below language folders """
    grok.name("imagebank")
    grok.provides(ITinyMCEShortcut)
    # This time we don't bother with i18n and assume
    # the whole world understands Finnish
    title = u'Kuvapankki'
    # Portal root relative path
    link = "/kuvapankki"
    def render(self, context):
        # http://collective-docs.readthedocs.org/en/latest/misc/context.html
        portal_state = context.restrictedTraverse('@@plone_portal_state')
        return ["""
        <img src="img/folder_current.png" />
        <a id="currentfolder" href="%s">%s</a>
        """ % (portal_state.portal_url() + self.link, self.title)]

After this you still need to go to TinyMCE control panel (http://localhost:8080/Plone/@@tinymce-controlpanel) and enable the link button in the settings for Image Shortcuts.

 Subscribe to this blog in a reader Follow me on Twitter