Typography and the Web

  • Ty pog ra phy is not merely the process of ar rang ing font on a page. It is a liv ing crea ture; it feels joy in an ex cla ma tion point, takes deep sighs at pe ri ods, grabs con scious ness with each bold strike and begs for un­der stand ing in the space be tween every italic. It has in tri cate rhythm and har mony, stac cato para graphs and legato head ers that blend into a melody of en light ened web de sign. Ty pog ra phy is an art as much as it is an es sen tial de sign process, and it is one that is best un der stood by fo cus ing on the con trast be tween tex tual el e ments in a given de sign.

KompoZer – Easy Web Authoring – FREE

KompoZer – Easy web authoring

Easy Web Authoring!
kpz-scr-01thumbKompoZer is a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing.
KompoZer is designed to be extremely easy to use, making it ideal for non-technical computer users who want to create an attractive, professional-looking web site without needing to know HTML or web coding.

Key features of Kompozer:

  • WYSIWYG editing of pages, making web creation as easy as typing a letter with your word processor.
  • Integrated file management via FTP. Simply login to your web site and navigate through your files, editing web pages on the fly, directly from your site.
  • Reliable HTML code creation that will work with all of today’s most popular browsers.
  • Jump between WYSIWYG Editing Mode and HTML using tabs.
  • Tabbed editing to make working on multiple pages a snap.
  • Powerful support for forms, tables, and templates.
  • The easiest-to-use, most powerful Web Authoring System available for Desktop Linux, Microsoft Windows and Apple Macintosh users.
This great HTML editor is often used in conjunction with GIMP (THE opensource free graphics editor) to produce some great websites. If you are lucky enough to have a subscription to Lynda.Com (video tutorials) then you can watch a great tutorial on how to create a great website using pure .CSS by just using opensource tools (namely Kompozer and GIMP)

Mobile Website Development

Mobile Website Development

Do you know how to create a mobile website? Or more importantly, do you know what a mobile website is? Domus Dish has covered this topic quite a bit, but in case you’ve missed it, a mobile website is what smart phone users see when looking at your webpage from their phones. There are many differences between mobile and traditional websites, which is why your website may not work for many smart phone users.

    Making Websites Mobile Friendly

    Making Websites Mobile Friendly

    Making website more mobile friendly – Google article on how to make your website more friendly for those people browsing using a mobile phone. This article from Google looks at both SmartPhones and traditional mobile phones (using WAP, etc.). It then talks about how Googlebot-Mobile trawls your website and the user-agent strings that help it ascertain the information required for mobile phones. The format used being:

    [Phone name(s)] (compatible; Googlebot-Mobile/2.1;
    +http://www.google.com/bot.html)

    The article then goes on to talk about:

    */ Websites with only Desktop Experience Content

    */ Websites with Dedicated Mobile Content

    15 Web Services we rely on everyday

    • 15 Web Services We Rely On Every Day – an interesting article blog about 15 key web services used everyday. 

      The list includes:
      Zendesk, GetSatisfaction, SendGrid, MailChimp (my favourite mail manager for newsletters, etc.), Apigee, String, ExpressionEngine, Chartbeat, Mint, PivotalTracker, SalesForce, RightSignature, GotoMeeting, Xero, DropBox, Office Glico.

      These are amongst the best cloud based services out there and I recommend most of them. I may be blogging about individual ones over the next few weeks…

    Wireframing using Eclipse and WireframeSketcher

    WireframeSketcher – an Eclipse Wireframe plugin

    WireFrameSketcher LogoI came across WireFrameSketcher whilst looking for an easy to use, extensible wireframe tool for help show clients concepts and ideas. This product appealed to me because:

    • WireframeSketcher is an addin to Eclipse
    • WireframeSketcher is easy to use
    • WireframeSketcher is modular – in other words screens and wireframes can comprise other screens and wireframes (effectively templates and masters) which means that one change to the master has the effect of updating all child wireframes – BRILLIANT
    • WireframeSketcher can easily export to both PDF and PNG graphics
    • WireframeSketcher has a Storyboard facility which creates dynamic, hot linkable walk-throughs for the customer that can be easily exported
    • WireframeSketcher works in XML format files, making it easy for me to re-use and create import and exports to other systems
    • WireframeSketcher is plain and simple without so many options it takes weeks to learn
    • WireframeSketcher integrates into most Eclipse based systems including Flex3 from Adobe
    • WireframeSketcher has a free version that is NOT crippled except for an export cross on images

    Another think I liked about Peter’s philosophy was that he was open to providing full versions for those people (like myself :) ) who were happy to blog about products that were actually very good at doing what they say they do!

    Refactoring

    After having used the software within Eclipse Helios, Ganymede and Flex3 Builder I found it very easy to use and integrate with other applications. WireframeSketcher has recently (within the last few days) been updated with ‘Refactoring‘. Refactoring overcomes the problems with linking to master screens and then changing the names or locations of those screens. Any changes are automatically propogated via Eclipse – WireframeSketcher now supports the plugins that support this feature.

    In use, refactoring is a MAJOR saving of time… When screens are created they inevitably get created in an unorganised manner. As time goes on the repositories for the screens gets tidied up and re-vamped. Refactoring allows you to move and rename objects without breaking all your wireframe designs – this is VERY useful!

    Extensible Palette

    The WireframeSketcher’s extensible palette option extends the concepts of assets so that you create and maintain your own repository of objects to be used within your wireframe. These objects can be images or screens (master). The rendering in the palette shows a small preview of the object which can be further divided sown into categories for grouping purposes. This is a great concept and works really well within the whole Eclipse framework.

    Other useful WireframeSketcher facilities

    Generallyy speaking wireframeSketcher works straight out of the box, it’s simple to use and install within any Eclipse based environment. I was using this tool within minutes and have added it to my essential tools. Wireframing is key to creating good customer feedback and helps so much with the design process; before critical resources have been allocated ideas can be shown for approval.

    Overall here are the main aspects I love about WireframeSketcher:

    • It’s EASY to use (I was using this tool within minutes)
    • It uses COMPONENTS. Screens and wireframes are composed of other screens and components, which means one update affects multiple screens instantaly
    • It utilises HOTSPOTS so that links work, and enables a create INTERACTIVE prototype to be demonstrated to the customer.
    • It has support for STORYBOARDS. It will even bundle the storyboard automatically into a single file PDF that can be sent to the customer – including all hotspots.
    • It uses a good selection of generic WIDGETS provided with the installation
    • It’s easy to UPDATE (of course via Eclipse!)
    • It uses a set of WIKI syntax to create options within the WIDGETS – for example in the tab control, you can set which tab is enabled and highlighted, the Treeview control has mutliple otptions for the look and feel that can all be set within the actual widget.
    • There is the start of a MOCKUPS GALLERY that has a small selection of completed screens that would be useful for starting projects (for example there is an iPhone selection for prototyping iPhone applications)
    • WireframeSketcher shows GUIDE LINES on the screen when objects line up properly and also allows nudging, zooming, etc. with keyboard controls for accuracy.
    • WireframeSketcher comes with a great collection (over 140) of icons for contours in various sizes (small, medium, large, extra large) so that adding arrows and icons for forms is merely a question of selecting from a list (again all keyboard controlled if required)
    • There is much much more than discussed here! Lastly I love the fact that the whole system is based on open XML formats – which means that each wireframe could easily be repurposed for other systems.

    In summary, WireframeSketcher is a comprehensive system that allows effective wireframing within the Eclipse environment. For any developer out there using Eclipse, I would say without hesitation that this addin should be at the top of your list and your design process. It is worth every penny of the official registration, and allows another dimension to the development cycle – especially if you already use Eclipse for your development platform. 5 out of 5.

    Goto: http://wireframesketcher.com/index.html