One of the joys of managing this site is I get to “follow my muse”. By that I mean, I get to play with a lot of software that catches my attention. Some of it is amazing, some of it is OK, some of it requires a degree in “Computer Rocket Scientry” to decipher and some of it is just plain awful. Then there is the software that falls into the category of “Category Pioneer”. These are the applications that create a whole new branch of creative tools for the designer.


For example, MacDraw, MacPaint and GraphicWorks from MacroMind appeared in the late 80’s and set the straight line to Photoshop and Affinity Photo today. Visual editors for web design such as SiteMill and PageMill appeared in the mid 90’s and their straight line leads to Dreamweaver and Adobe Muse. Mobirise has the potential of joining this category.

As we continue the move into a Responsive Web Design and “Mobile First” web design universe, a lot of web developers have made extensive use of such frameworks as Foundation and Bootstrap 3 to create fully responsive web sites. I have to admit these are extremely powerful frameworks but, to make full use of them, a working knowledge of HTML, CSS and JavaScript will make your life easier.

Mobirise goes in the opposite direction which is why I regard it as a “Category Pioneer”. In many respects it can be regarded as a Visual Graphical User Interface (GUI) for Bootstrap 3 and , for the code-challenged or those of you  who embrace the Rapid Prototyping and Constant Iteration workflow that is so common in today’s web design environment, Mobrise has the potential of becoming a “go-to” tool for just that purpose.

Before you get all excited about Mobirise, be aware:

• The application is in Public Beta
• It is still a bit limited in the feature set
• There are still bugs that need to be worked out

Having said that you really should download a copy and try it out.

Mobirise is available in Mac and PC versions and the installer is available right on the Mobrise home page.

When you first launch the application, maximize the window and click the + button in the bottom right corner to open the interface.

When the interface opens, a Blocks panel appears. The blocks are “drag and drop” elements which can be regarded as the components found in Bootstrap such as Jumbotron, Hero units, Buttons and so on. Drag a block onto the page and it becomes fully customizable. In the above example I swapped out the image in the header block with one of my own, changed the text in the body, changed the logo the Menu block and changed the color and text for the menu items.

Modifying the parameters of a block is also dead simple. Rollover a Block and and you will see three icons appear in the block. There icons allow you to move the Block to a new position on the page, delete the Block or, if you click the Gear icon, open the Parameters panel for that block. For example, if you add the media block containing the video player, the Parameters panel will ask you to enter the URL for the YouTube or Vimeo video, whether the video is to autoplay or loop and even to be treated as Full Screen Background Video.

At the top of the page are icons for Mobile, Tablet and Desktop. Click one of them and the design surface shrinks to that viewport. Over on the left is a Preview button which will open the project in your default browser. Click the Publish button and you are asked if you want to save the file locally, upload to an FTP server or to Google drive.

On the left, if you roll over the Index.html menu the Pages panel opens. Here you can add new pages or clone existing pages. At the bottom of the panel you can open new projects or an existing project.

Due to the fact this application is so new– it hit the market in May, 2015 – and in Public Beta there are aspects of the app that really need some attention. My top 3 feature requests would include:

• The ability to resize and rearrange the blocks. At the moment they can only be stacked on top of each other and not placed beside each other. This is OK for Parallax scrolling but for static pages using a Grid the ability to rearrange and resize the blocks when, for example, moving from the Desktop to Tablet viewports is important.
• Being able to resize graphics. The logo in the above example is far too small and there seems to be no way of making it larger.
• The ability to add SVG graphics. Though you can add jpg and png graphics, things like the logo at the top are simple and easily converted to svg in Illustrator in order to keep them even smaller in file size. Unfortunately, they can’t be used in Mobirise.

Conclusion

Due to its newness, it would be grossly unfair to assign some sort of rating to this product. It is a work-in-progress with some very cool features. I like that it has an intuitive, easy –to-master interface. More important is the fact that as a Category Pioneer, Mobirise is one of those products that has the promise of making the Bootstrap 3 framework accessible to graphic professionals, hobbyists and web designers without their having to master the code base and using common layout drag-and-drop principals. Having said that, if Mobirise does gain traction, I suspect it will be the first step on the path to opening a code editor and going to work.

There are also some holes in the product and some interface “hiccups” that will need to be addressed throughout the beta process.

In the meantime, I suggest you install the app and start playing around with it. It may not be “Production Ready” but, if it takes hold, Mobirise will be among  the first of what will be many Visual Editors for the most important frameworks out there.