Jonathans Blog » web

Typography and the Web

Jonathan — Sat, 25 Jun 2011 04:00:58 +0000

How to Actually Make Text Look Interesting: Minimalist Web Design — Space

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.

(tags: text design minimalist)

KompoZer – Easy Web Authoring – FREE

Jonathan — Tue, 08 Mar 2011 04:00:48 +0000

KompoZer – Easy web authoring

Easy Web Authoring!

KompoZer 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

Jonathan — Tue, 01 Mar 2011 04:00:58 +0000

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

Jonathan — Wed, 23 Feb 2011 04:00:57 +0000

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

Jonathan — Sat, 22 Jan 2011 04:00:46 +0000

15 Web Services We Rely On Every Day

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…

(tags: webservices popular services)

Wireframing using Eclipse and WireframeSketcher

Jonathan — Mon, 15 Nov 2010 12:13:09 +0000

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!

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

Google StreetView now has 3D View

Jonathan — Sat, 03 Apr 2010 09:28:17 +0000

I notice now that Google Maps StreetView now has 3D view (assuming you have the correct 3D Glasses)

Embed Google Docs document within your web page

Jonathan — Thu, 01 Apr 2010 17:01:50 +0000

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

I have created an example of the above page here

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:

http://docs.google.com/viewer?url=test.doc

Or, paste this HTML tag into your blog or website for a link to the viewer:
View

For an embedded viewer, use this HTML tag instead:

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

jQuery and AddToAny social media generator

Jonathan — Tue, 30 Mar 2010 17:01:32 +0000

5 Steps Toward jQuery Mastery | Encosia

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

Share button and Subscribe button generator – AddToAny – FREE

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

(tags: tools web2.0 social bookmark bookmarking button wordpress socialnetworking)

Cache selector results

Fiddler debugging and storyboarding templates

Jonathan — Mon, 29 Mar 2010 17:02:03 +0000

Storyboards for eLearning

Storyboards for eLearning

(tags: e-learning elearning design storyboarding storyboard storyboards)

Practical Strategies for Debugging Cross-Browser Display Issues

Practical Strategies for Debugging Cross-Browser Display Issues

(tags: css browser compatibility development web)
A Case Study: Rapid #WordPress Design and Prototyping with #Expression Web 3

A Case Study: Rapid WordPress Design and Prototyping with Expression Web 3

(tags: expression list prototype video web wordpress)
Videos :: Microsoft MIX10 – great techy videos for web developers

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.

(tags: microsoft video silverlight videos .net tutorial programming conference)

Fiddler Web Debugger – Useful Extensions

Fiddler Web Debugger – Useful Extensions

(tags: #fiddler debug http tools extensions web development performance)
Recording web traffic with #FiddlerCap – great html/web traffic debugging tool

Capturing web traffic logs with fiddlercap
Advanced Web Debugging with #Fiddler

Advanced Web Debugging with Fiddler

(tags: fiddler video debugging debug http list silverlight traffic)
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.

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.

(tags: software tools screencapture screenshot freeware image testing utilities)
ASP.NET: 10 Tips for Writing High-Performance Web Applications

10 Tips for Writing High-Performance Web Applications

(tags: .net tips optimization)
How to cache in ASP.NET by using Visual C# .NET

How to cache in ASP.NET by using Visual C# .NET

(tags: cache asp.net .net article c# dev programming work)
How to Modify the Cache-Control HTTP Header When You Use IIS

How to Modify the Cache-Control HTTP Header When You Use IIS

(tags: iis asp asp.net cache microsoft performance)
#Fiddler (Free web tool) PowerToy – Great article on HTTP Performance

Fiddler PowerToy – Part 2: HTTP Performance

(tags: fiddler performance http tools asp.net optimization web ie)
Liu Bolin - Eli Klein Fine Art – find the body in the art…

Liu Bolin – Eli Klein Fine Art – find the body in the art…

(tags: fineart art jpcart)