jQuery Image Gallery with next and previous images displayed

Recently for a client project we were tasked with producing an image gallery to showcase the client’s Spring/Summer and Autumn/Winter Collections.

One idea we came up with was a gallery that displayed the next and previous images in the same browser window partly to aid navigation for the user, partly to entice further viewing of the Collection images.

Although the client did not choose this method – we went through three major revisions on this project – it was an interesting way to display images and we thought we should share the methodology.

We’ve created a page that showcases the image gallery. Soon, we’ll post a short tutorial on TXP Tips with further information on how this was put together with the jQuery Cycle plugin.

Credit goes to the talented James Muspratt from whom we got the idea for this gallery.

The problems with going mobile

As mobile data traffic continues to rise, more and more web developers are creating content for these platforms and their oft tiny screens.

But simply porting existing web content to a smaller screen size or using new CSS media selectors to target various devices will miss huge marketing potential to tap into device-specific features that’ll benefit your audience. And it may cause unnecessary problems for your users in terms of data transfer and performance.

CloudFour warns of the pitfalls: why add more code to your pages to support devices that usually have more restricted bandwidth limitations than a desktop? It’s far better to design for the device and intended audience than it is to port.

Yes it may be more expensive than a simple port, but it comes down to a simple choice: do you want mobile users to enjoy using your site or go elsewhere because it’s too slow or difficult to navigate?

Of course, we at TXP Builders always take your customers’ needs into account and deliver what best fits your demographic :-)

Those who stay up late are smarter!

Enjoyed this article on Pyschology Today via Interface Architects. Makes those of us who stay up too late feel much better!

The most interesting part is the “Bedtimes and wake-up times for Americans in their 20s by IQ.”

Using Google Page Speed to speed up your site

Just came across this excellent new tool from Google – Page Speed.

According to Google, this is what it does:

• Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
• Page Speed performs several tests on a site’s web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance. Webmasters who run Page Speed on their pages get a set of scores for each page, as well as helpful suggestions on how to improve its performance.

On first test Page Speed is very useful and helpful. Our own front page scored a very respectable 85 out of 100, and the three main areas for improvement (Leverage browser caching, Minify CSS and Serve static content from a cookieless domain) are all explained very clearly in the Page Speed docs.

Overall, a very useful tool for web developers.

Pia Petterson site using a TXP Builders template

After some tinkering over the weekend, my wife’s new site is up and running – Pia Petterson.

The site is based on a new (not yet released) template by TXP Builders – a tumblelog or Tumblr style. No plugins, forms or images are used in the template and it has been designed to work out of the box. Content types are set according to custom fields (blog, quote, link, video, image). Markup is HTML 5.

I am a designer, not a...

This is too good not to post! To that one client who wanted zoom-in-and-out-swords, this is for you!

Via: Ffffound

Proposed changes to Textpattern comments forms

Today I sent in some proposed changes to the comments forms of a Textpattern base install.

In case you are new to Textpattern, forms are Textpattern-speak for snippets or includes – essentially a means of including chunks or blocks of content. The main use for forms is repeating content – headers, footers, sidebars and the like.

In a clean install (as of TXP version 4.2), Textpattern offers an in-built mechanism for the control and display of comments. This is very helpful but the markup is a little out of date. In addition, I believe it would be helpful to include more conditional arguments – arguably one of the most impressive of the Textpattern feature-set.

Here is the proposed changeset and printed below.

This proposed changeset does not address the any possible future changes to the comments system

Let me know what you think!

comments_display form

<txp:if_comments>
<h3 id="comment"><txp:comments_invite textonly="1" showalways="1" showcount="0" /></h3>
</txp:if_comments>

<txp:comments />

<txp:if_comments_preview>
<div id="cpreview">
<h3>This is a preview of your comment. Press "Submit" in order to post it.</h3>
<txp:comments_preview form="comments_preview" />
</div>
</txp:if_comments_preview>

<txp:if_comments_allowed>
<div id="comments-form" class="clearfix">
<txp:if_comments>
<txp:else />
<h3 id="comment" />">Leave a comment:</h3>
</txp:if_comments>
<txp:comments_form />
</div>
</txp:if_comments_allowed>

comments form

<txp:comment_anchor />
<div class="comment_post">
<div class="comment_meta">
<txp:comment_name /> <txp:comment_permlink>#</txp:comment_permlink>
</div>
<div class="comment_details">
<txp:comment_message />
</div>
</div>

comment_form form

<txp:if_comments_error>
<txp:comments_error break="li" wraptag="ul" />
</txp:if_comments_error>

<fieldset>
<legend>Comment form</legend>
<ol>
<li><label for="name"><txp:text item="Name" /></label><br /><txp:comment_name_input /></li>
<li><label for="email"><txp:text item="Email - required but not displayed" /></label><br /><txp:comment_email_input /></li>
<li><label for="web"><txp:text item="Website" /></label><br /><txp:comment_web_input /></li>
<li><label for="message"><txp:text item="Your comments" /></label><br /><txp:comment_message_input /></li>
<li><txp:comment_remember /></li>
<li>Style your comments with <txp:comments_help />.</li>
<li><txp:comment_preview /> <txp:comment_submit /></li>
</ol>
</fieldset>

Brandon Grotesque

Brandon Grotesque is a sans serif type family of six weights plus matching italics. It was designed by Hannes von Döhren in 2009/10. Influenced by the geometric-style sans serif faces that were popular during the 1920s and 30s, the fonts are based on geometric forms that have been optically corrected for better legibility.

Brandon Grotesque has a functional look with a warm touch. While the thin and the black weights are great performers in display sizes the light, regular and medium weights are well suited to longer texts. The small x-height and the restrained forms lend it a distinctive elegance.

The Regular weight is free through April 15.

Via Zeldman.

Steve McQueen: 20 Never-Seen Photos

LIFE magazine has published some never before seen photos of Steve McQueen.

LIFE sent photographer John Dominis to California to hang out with the 33-year-old actor and see what he could get. Three weeks and more than 40 rolls of film later, Dominis had captured some astonishingly intimate and iconic images, photos impossible to imagine in today’s restricted-access celebrity world. Only a handful of those photos have ever been published… but now, in celebration of what would have been McQueen’s 80th birthday (March 24), LIFE.com presents these never-before-seen gems from that legendary assignment, along with insights from Dominis about the time he spent with the man who would become known as the King of Cool.

Hat tip: The Mid-Century Modernist – a very cool site.

The house is great, but I’ll take the car!

Mies Van Der Rohe building refurbished

German-American architect Mies Van Der Rohe’s building in Chicago – 860-880 Lake Shore Drive – has been recently refurbished by Krueck & Sexton.

Van Der Rohe’s work never fails to impress and inspire. Designers can learn from Mies not what to put into a design, but what to leave out.

Hat tip and photos courtesy: De Zeen

A new blog section

Welcome to our blog, the aim of which is to talk about things that interest us as designers and developers – coding, Textpattern, general design and trends in the web development industry.

There is still some tidying up to do, especially with the comments and styling, so please excuse our mess while we clean up.