In Part 1, we covered the basic elements involved in designing a modern website; today, we’ll begin examining methods of creating a mojoPortal skin.
There are two basic ways to begin a custom skin for mojoPortal; modify an existing skin, or create one from scratch. Even with the “from scratch” route, there’s the school of thought to “hand-code everything”, or use an automation tool to handle some of the more tedious aspects of design. If you’re faster at writing your own .css code from the ground up, by all means, do so – for me personally, that’s far too time-consuming, so I use an automation workflow to address some of the more tedious aspects of this phase.
The UI automation workflow I employ is a combination of Artisteer, which bills itself as an “automated web designer”, and the mojoPortal Skin Exporter for Artisteer 4. While Artisteer doesn’t exactly provide “automated” web design, it can provide a visual canvas to preview your static design in a dynamic setting. The free export plugin from mojoPortal allows Artisteer users to export a basic template formatted for mojoPortal, which is a great time-saver. On average, Artisteer and the mojoPortal plugin can provide about 70% of my layout and implementation needs.
What this workflow can do:
1. Colors: testing colors for mouseover and active states, as well as color scheme and generation of CSS3-based gradients (with IE support built in)
2. Fonts: allowing testing of web fonts via Google Fonts in various sizes for H1-H6, block headings, etc.
3. Menu options: Artisteer does support MegaMenu, as well as a vertical menu option
4. Header placement: test your logo placement, as well as any slogan, or other additional items
5. Responsive design: Artisteer 4 supports responsive design, so you can test how well your static design will translate to a dynamic implementation
What it won’t do:
1. Custom CSS: In order to implement some grid-based designs, it’s important to be able to assign custom CSS classes to your HTML content blocks in mojoPortal, to preserve maximum editability. You can’t test custom CSS classes on your blocks in Artisteer, so plan on implementing these post-export.
2. Web Fonts: Artisteer’s support for web fonts is currently limited to what’s accessible via Google Fonts. If you’re using a custom font-kit generated from Font Squirrel, you’ll have to manually implement it in your skin CSS post-export.
3. Div-Based Internal Layouts: Most designers plan for div-based layouts for internal content; Artisteer still relies on table-based layouts for internal content – again, you’ll have to implement that manually post-export.
4. jQuery Elements: If you’re planning on using jQuery/jQueryUI elements in your design, don’t plan on using Artisteer to test them. You can use a basic slider built into Artisteer, but for more complex functionality – you guessed it, post-export.
Next time, we’ll pick up on getting these custom items into your design.