March 11, 2014

Chicago HTML5 Recap - Show and Tell: Tools for UX, Design and Development #ChiHTML5

Charles Proxy Chicago HTML5

Mattie Landenberg (@mattienodj) discusses the latest features on Charles Proxy

In February, the Chicago HTML5 Meetup presented a mix of web development tools in a gathering called Show and Tell: Tools for UX, Design, and Development. Each presenter offered a brief overview featuring tools such as Charles, Table XI, and Autoprefixer.

Chicago HTML5 has fast become a popular group with web developers in the Chicago area. The group shares information on new platforms and coding techniques, with guest speakers covering a range of HTML5 related topics.

Here are a few highlights from the presentations.

Charles

Charles is probably the most web analytics related solution, given its frequent mention alongside Fiddler as diagnostic tools. Mattie Landenberg (@mattienodj), the meet up organizer and director of technology at Hy Connect, shared a terrific overview on Charles features that can make web development easier.

Charles has a feature called Blacklist, which ignores certain calls to the server.  This feature can be useful for testing a page performance while ignoring server calls.

Charles also permits throttling, manipulating the speed of your simulation.  So at say 700KB, developer can see how a page loads a few files at a time. This is particularly useful for mobile development and focusing on

There is a map local and remote feature, meant for testing code rewrite URL on a remote server. Another feature is Mirror, designed to grab local copies of assets as well as l record website assets into folders and files.

Mobile Prototyping - Alternaties to Balsamiq

Balsamiq has long been a serviceable choice for a wireframe.  Mark Rickmeier of Table XI notes that its status as one of the earlier sketch tools overlooks the experience bases of users.  Thus Mark gave the most interesting highlight, demonstrating how there is not one good tool for every user.

He provided an overview of alternatives based on the persona of professionals who need to condor user experience in their digital assets planning. He came up with three personas of users and matched a tool with each persona.

Annie, the business professional who pitches app ideas (design side over build side). For this persona, Mark recommended Proto.io (mimic interactions and a mobile experience) and Flint

Rachel the entrepreneur who has funding but is not from a tech environment. An example to demonstrate a wire framing alternative  Balsamiq / POP (prototyping on paper)

Finally, there is Ed, the mobile developer. For him, Xcode is a comfort.  Thus Testflight is a useful wireframe solution.

Other highlights

Mike Gibson, also from Table XI, reviewed Autoprefixer, a parse for CSS file.  Other solutions noted in the presentations shown include Screenhero for screen sharing and Slack, a chatroom platform.  For those with a hankering for data, a Github link to Divvy bicycle data was also provided.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram