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 under 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.
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.
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 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;
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 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…
WireframeSketcher – an Eclipse Wireframe plugin
I 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!
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!
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.
I notice now that Google Maps StreetView now has 3D view (assuming you have the correct 3D Glasses)
One way of showing a formatted document on your web page is to embed a Google Document as an iFrame within your pageThe iFrame would then contain the document you wanted to view, including the ability to scroll the pages and print, etc. this is a good way to show the final document to your viewers in an easy to read format.The document viewer http://docs.google.com/viewer has two parameters:
1. url: the URL of the document
2. embedded: if set to TRUE the viewer will use the embedded mode interface
So, if you wanted to view a PDF or DOC on your web page you would use an IFrame and the document (PDF, DOC, etc.)
http://docs.google.com/viewer? url=http://freesoftware.mit.edu/papers/sturmer.pdf &embedded=true
If, for example you have a document called ‘test.doc’ the various options to view this document would be:
Paste this link into email or IM:
Or, paste this HTML tag into your blog or website for a link to the viewer:
For an embedded viewer, use this HTML tag instead:
<iframe src=”http://docs.google.com/viewer?url=test.doc&embedded=true” width=”600″ height=”780″ style=”border: none;”></iframe>
The benefit of using this method instead of just using the native Google viewer is that the user still has the focus of your web page with all the surrounding information and is not taken off to the google site to view the document. You can use this technique to view all supported Google documents, which would be very useful for such things as presentations and spreadsheets. The ifame is the container to hold the document, in the above example the width and height were set to keep the document within the page of the web page, these are of course not required. There are other attributes for iFrames such as the frameborder and scrolling properties. You could also apply some CSS styling to make the appearance more in keeping with your sites theme. for example:
You could use the iFrame generator to create all the basic code for you and then just add your Google document to the src attribute. There is a Google Docs Generator that you can enter a url of a document and then generate all the various links automatically.
Lastly… if you just want to view a PDF or other document online you could go directly to: http://docs.google.com/viewer
Five quick tips that I found valuable while learning jQuery in depth. I learned them the hard way so you don’t have to! Really good post outlining using jquery with:
- Using Firebug to experiment interactively
- Caching selector results
- Explains about the best times to use jQuery (e.g. NOT all the time!)
- Advanced selectors, filters and traversals
Help your visitors share & bookmark your pages and subscribe to your feeds using any service. System to interactively create a bookmarking widget that allows your users to subscribe to all the popular social networking systems. Easy to use and can generate in multiple languages.
Addtoany has a comprehensive API that allows you to get and set key parameters. The API page has plenty of good examples of how to use. The button can be small and unobtrusive. This system can be used with Feedburner, and the service is absolutely FREE
Storyboards for eLearning
Practical Strategies for Debugging Cross-Browser Display Issues
A Case Study: Rapid WordPress Design and Prototyping with Expression Web 3
This page provides a handy “all-in-one” list of MIX10 session recordings that are available to download and watch on-demand. While we commit to publishing the highest quality video of a session within 24 hours of its completion, it often takes many hours to encode, edit, and upload each video before it becomes available. So, if the session you’re looking for isn’t here, be sure to check back later.
Fiddler Web Debugger – Useful Extensions
Capturing web traffic logs with fiddlercap
Advanced Web Debugging with Fiddler
Capture your Screen. Edit the Screenshot. Add Arrows, Text and more to the Screenshot. Send the Screenshot to a Bug Tracking or Issue Management System. Or send the screenshot via Skype or Email.
10 Tips for Writing High-Performance Web Applications
How to cache in ASP.NET by using Visual C# .NET
How to Modify the Cache-Control HTTP Header When You Use IIS
Fiddler PowerToy – Part 2: HTTP Performance
Liu Bolin – Eli Klein Fine Art – find the body in the art…