FITC is hosting SCREENS, a two day conference dedicated to development for mobile device and operating systems, this September 27-28 in Toronto. The conference features two full days of presentations covering a ton of topics relevant to iOS, Android, Windows Mobile and BlackBerry development including HTML5, NFC, PhoneGap, jQuery, responsive design and much more.

Update: The contest is closed and the winners are: Kevin Sato and Caroline McGregor.

The Giveaway

I have two conference tickets to giveaway. For your chance to win a free ticket, post a comment in this post before August 17, 2012. If you are interested in purchasing tickets, the early bird deadline is August 24. To save 10% use discount code: webdesignerwall

Contest Rules

• Enter a comment in this post (one entry per person)
• Winners will be selected randomly and contacted by email
• Contest ends August 17, 2012
• Visit fitc.ca/screens for more details

The winners are:

Congrats to Kevin Sato and Caroline McGregor!

The previous post on creative business cards was very well recieved. Today we going to share another 60 well designed embossed business cards that stand out of the crowd. Embossing your business card is a great effect to grab your audience’s attention, along with printing on different mediums, sizes of card and utilising complimentary techniques such as letterpress, spot UV and die cut. If you are considering to make an embossed card, be sure check this post for inspiration.

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

Hopefully you are now feeling suitably inspired! Have you considered embossed business cards What other techniques have you used to stand out from the crowd (with your cards!) Please let us know in the comments!

Author Bio

This post was compiled by Simon Goble of MOO. MOO love to print business cards online, as well as their unique MiniCards, postcards, stickers, labels and much more. Follow them on Twitter @overheardatmoo.

Long ago I wrote a tutorial on how to make decorative image galleries using an extra <span> tag. It requires jQuery to append the span tag which isn’t quite user friendly. Today I’m going to share a better method without using Javascript. The same result can be achieved by using :before or :after pseudo element. The :before element is one of the commonly under used elements, but it is quite useful for adding additional elements or content. Learn it now and start using it.

View DemoDecorative Gallery

HTML

Below is a sample image gallery markup in a <ul> list.

 <ul class="gallery clip">
 	<li>
 		<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">
 	</li>
 	<li>
 		<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg" alt="image">
 	</li>
 	<li>
 		<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">
 	</li>
 </ul>
 

CSS

Below is the base style for the .gallery. The key property you have to add is relative position on the .gallery a element.

 .gallery {
 	margin: 0 0 25px;
 	text-align: center;
 }
 .gallery li {
 	display: inline-block;
 	margin: 5px;
 	list-style: none;
 }
 .gallery a {
 	position: relative;
 	display: inline-block;
 }
 

:before element

Now I’m going to specify a 30 x 60px container with the paper clip background image to the a:before element. Note that I leave the content property empty in the CSS rule. Without the empty content property, the container will not appear.

 .clip a:before {
 	position: absolute;
 	content: ' ';
 	top: -5px;
 	left: -4px;
 	width: 30px;
 	height: 60px;
 	background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat;
 }
 

Art Frame

You can use this trick to add any overlay graphic element on top. In this example, I just replaced the background image to an art frame graphic and adjusted the dimension and position.

 .frame a:before {
 	position: absolute;
 	content: ' ';
 	top: -22px;
 	left: -23px;
 	width: 216px;
 	height: 166px;
 	background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat;
 }
 

HTML5 Gallery

Let’s create a more advanced gallery using HTML5 markups. In the example below, I have a <figure> tag wrapped around the image and a <figcaption> for image caption.

 <ul class="gallery tape">
 	<li>
 		<figure> 
 			<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-4.jpg" alt="image">
 			<figcaption>Image Caption</figcaption>
 		</figure>
 	</li>
 	<li>
 		<figure>
 			<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-5.jpg" alt="image">
 			<figcaption>Image Caption</figcaption>
 		</figure>
 	</li>
 	<li>
 		<figure> <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-6.jpg" alt="image">
 			<figcaption>Image Caption</figcaption>
 		</figure>
 	</li>
 </ul>
 

CSS

In the CSS, I added two :before elements: one on the <figure> element and another one on the <li> element. The overlay.png (mask image) is applied to the figure:before element and the tape graphic is applied on the a:before element.

 .tape li {
 	width: 170px;
 	padding: 5px;
 	margin: 15px 10px;
 	border: solid 1px #cac09f;
 	background: #fdf8e4;
 	text-align: center;
 	box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2);
 }
 .tape figure {
 	position: relative;
 	margin: 0;
 }
 .tape a:before {
 	position: absolute;
 	content: ' ';
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/overlay.png) no-repeat;
 }
 .tape figcaption {
 	font: 100%/120% Handlee, Arial, Helvetica, sans-serif;
 	color: #787568;
 }
 .tape a:before {
 	position: absolute;
 	z-index: 2;
 	content: ' ';
 	top: -12px;
 	left: 50%;
 	width: 115px;
 	height: 32px;
 	margin-left: -57px;
 	background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/tape.png) no-repeat;
 }
 

CSS3 Transform

In this gallery, I added a cork pattern background on the gallery and use transform property to rotate the images.

 .transform {
 	background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/cork-bg.png);
 	padding: 25px;
 	border-radius: 10px;
 	box-shadow: inset 0 1px 5px rgba(0,0,0,.4);
 }
 .transform li {
 	border: none;
 }
 

Nth-of-Type

To make the image rotation look randomized and more natural, I applied a different rotation angle using nth-of-type.

 .transform li:nth-of-type(4n+1) {
 	-webkit-transform: rotate(2deg);
 }
 .transform li:nth-of-type(2n) {
 	-webkit-transform: rotate(-1deg);
 }
 .transform li:nth-of-type(4n+3) {
 	-webkit-transform: rotate(2deg);
 }
 

Update:

I’ve updated the gallery demo and CSS so now the images are linked. Now the :before element is added to the tag.

I’m sure you all are using viewport meta tag for responsive design, but did you know that the viewport tag can also be very useful for non-responsive design If you haven’t got the time to convert your design to responsive yet, you should read this article on how to use viewport tag to improve the appearance of your design on mobile devices.

General Use of Viewport Tag

Viewport meta tag is generally used for responsive design to set the viewport width and initial-scale on mobile devices. Below is a sample viewport tag.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 

Using Viewport Tag for Non-responsive Design

As you may know, the default viewport width on iPhone is 980px. But your design might not fit in that range. It could be wider or narrower. Below are two examples where you can utilize the viewport tag to improve the rendering of non-responsive design on mobile devices.

Example

Take a look at the Themify site on your iPhone.

The screenshot on the left shows how the site would render without the viewport tag. As you can see, the page is touching on both sides. I added viewport tag to specify the viewport width to 1024px so it leaves some margin space on the left and right sides.

 <meta name="viewport" content="width=1024">
 

Another Example

If your design is too narrow, it might also cause an issue. Lets say the container width of your design is 700px and it is not responsive, it would look like the screenshot on the left where there is a big empty space on the right.

You can simply fix this by setting the viewport width to 720px. The width of your design doesn’t change, but iPhone will scale it to fit in 720px.

<meta name="viewport" content="width=720">
 

Common Mistake

A common mistake is that people often apply initial-scale=1 on non-responsive design. This will make the page render at 100% without scaling. If your design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. This will disable the scaling and zooming capability of your site. With scaling disabled, users have no way to zoom out to see the complete page. Remember: if your design is not responsive, do not reset the initial-scale or disable scaling!

 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 

Resource Links

Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn’t require any first or last class and the number of columns can be adjusted base on the viewport. In other words, it can be toggled from 4-column to 3-column or 2-column, etc.

View Demo Responsive Column/Grid

The Inconvenience of Using The First & Last Classes

Normally we would add a .first or .last class to clear the margin space and float in the grid. Adding the first and last class is very tedious, not to mention that it gets more complicate if you need to make it responsive.

Using nth-of-type

The :nth-of-type(An+B) expression makes it very easy to clear the float and margin without having to add .first or .last class. For example:

• .grid4 .col:nth-of-type(4n+1)= target every 4th .col element, starting from the first
• .grid3 .col:nth-of-type(3n+1)= target every 3rd .col element, starting from the first
• .grid2 .col:nth-of-type(2n+1)= select every 2th .col element, starting from the first

 .grid4 .col:nth-of-type(4n+1),
 .grid3 .col:nth-of-type(3n+1),
 .grid2 .col:nth-of-type(2n+1) {
 	margin-left: 0;
 	clear: left;
 }
 

Making it Responsive With Media Queries

To make it responsive and fluid, use percentage value instead of pixel value.

 /* col */
 .col {
 	background: #eee;
 	float: left;
 	margin-left: 3.2%;
 	margin-bottom: 30px;
 }
 
 /* grid4 col */
 .grid4 .col {
 	width: 22.6%;
 }
 
 /* grid3 col */
 .grid3 .col {
 	width: 31.2%;
 }
 
 /* grid2 col */
 .grid2 .col {
 	width: 48.4%;
 }
 

Changing From 4-column to 3-Column

To change the 4-column to 3-column on viewport width that is less than 740px:

1. change the .grid4 .col width to 31.2% (one-third width)
2. reset the left margin and clear property
3. then re-apply the left margin and clear property using nth-of-type(3n+1) to form a 3-column grid

 @media screen and (max-width: 740px) {
 	.grid4 .col {
 		width: 31.2%;
 	}
 	.grid4 .col:nth-of-type(4n+1) {
 		margin-left: 3.2%;
 		clear: none;
 	}
 	.grid4 .col:nth-of-type(3n+1) {
 		margin-left: 0;
 		clear: left;
 	}
 }
 

Changing 4-column and 3-column to 2-column

To switch the 4-column and 3-column to 2-column on viewport width that is less than 600px: basically use the same trick as above to reset the .col width and float.

 @media screen and (max-width: 600px) {
 	/* change grid4 to 2-column */
 	.grid4 .col {
 		width: 48.4%;
 	}
 	.grid4 .col:nth-of-type(3n+1) {
 		margin-left: 3.2%;
 		clear: none;
 	}
 	.grid4 .col:nth-of-type(2n+1) {
 		margin-left: 0;
 		clear: left;
 	}
 
 	/* change grid3 to 2-column */
 	.grid3 .col {
 		width: 48.4%;
 	}
 	.grid3 .col:nth-of-type(3n+1) {
 		margin-left: 3.2%;
 		clear: none;
 	}
 	.grid3 .col:nth-of-type(2n+1) {
 		margin-left: 0;
 		clear: left;
 	}
 }
 

Making all columns Fullwidth (see demo)

To make all columns to full width on viewport width that is less than 400px: set width to 100% and reset the margin and float.

 @media screen and (max-width: 400px) {
 	.col {
 		width: 100% !important;
 		margin-left: 0 !important;
 		clear: none !important;
 	}
 }
 

Internet Explorer Issues

Both media queries and nth-of-type are not supported by Internet Explorer 8 or older. You can use selectivizr.js to provide nth-of-type support for IE and respond.js for media queries. Unfortunately, selectivizr.js and respond.js don’t work well together (ie. nth-of-type doesn’t work within the media queries). This means the only fall back with this responsive grid is that the columns can not be switched from 4-column to 3-column or 2-column.

The value of paper depends on whose hands hold it. To a first grader, it could mean a canvas to roll crayons on. To an office clerk, it could mean a sheet to print a report on. But to an artist, it could mean a sculpture, an entire advertisement, or even an avenue to deliver an inspiring message.

As with any craft, there are those who are capable of further pushing the envelope and transform what was otherwise an ordinary material into an amazing artwork. Look into the lives of these seven ingenious artists and see how they gave life to regular pieces of paper:

Jeff Nishinaka

This man has been building his reputation as a paper artist for three decades. A pride of Los Angeles, Jeff Nishinaka earned his undergraduate degree from UCLA and then went to pursue his craft and career at Art Center College of Design, a distinguished art school in California.

Though Nishinaka was originally interested in painting, his experiences in Art Center enhanced his talent by handling different elements, including paper. The realization that paper was a very flexible medium converted him to creating masterpieces by shaping it and still maintaining its character. Some of the most popular brands that benefited from Nishinaka’s ingenuity were Paramount Pictures, Visa, and Coca Cola.

Cheong-ah Hwang

Born and raised in South Korea, Cheong-ah Hwang was blessed with a natural gift in creating art, especially when it comes to manipulating paper. Her fascination with this medium began at a young age as her parents ran a printing shop in her hometown. Her access to different kinds of paper unleashed her innate potential in making ornate pieces out of them.

Now living in the US, Cheong-ah Hwang has made a name for herself through her amazing skills. Among her most famous projects was a 2010 campaign for Kickstarter, an organization that funds creative programs. This project allowed her to reproduce her complicated pieces and be sold at significantly cheaper prices. She is also known for creating the cover image for Grimm Tales for Young and Old, a book written by famous author Philip Pullman.

Alexei Lyapunov and Lena Ehrlich

The focus of this duo’s art is creating 3D figures and settings using paper. Alexei Lyapunov and Lena Ehrlich, both from Russia, maximize the use of cutting and slicing tools, tweezers, rulers, and metal wirings when making their elaborate works of art.

Some of their most remarkable paper sculptures include music icons Michael Jackson, Elvis Presley, and The Beatles. They are also applauded for their elaborate 3D miniature installations entitled “People Too.” This particular piece depicts mundane scenarios, such as an office setting and airplane travel, laced with a sense of humor and livened by vibrant colored paper.

Yulia Brodskaya

Another brilliant paper artist from Russia is Yulia Brodskaya. Even before undergoing formal art education, Brodskaya has already developed her interest in origami, collage, and textile painting. When she finally moved to the United Kingdom and took a master’s degree at the University of Hertfordshire, she incorporated three of the things she loved the most—paper, typography, and intricately-detailed handicrafts—and gave birth to magnificent projects that only a true artist can pull off.

Yulias hard work surely paid off seeing as some of her clients include the largest brands in the world, such as Hermes, Starbucks, and Nokia.

Peter Callesen

One of paper’s apparent characteristics is its frailty, but a real artist knows how to put such things to his or her advantage. This is what Danish paper artist Peter Callesen does to paper once he begins his magic—a ‘flimsy-looking’ material metamorphoses into a structure conveying a message.

Along with creating 2D and 3D paper sculptures, Callesen specializes in reliving his personal interests, his memories, and even classic stories in his work. He effectively transforms a flat piece of paper into a 3D sculpture by cutting parts of a single sheet and using those exact pieces to form detailed figures. The result It looks as if the final product literally rose from their paper graves and was brought to life.

Ingrid Siliakus

Working with paper can be quite exhausting but given sufficient talent, imagination, and patience, a dedicated artist can turn one sheet into a multi-dimensional centerpiece. This is what Dutch artist Ingrid Siliakus has been doing for the past two decades. Inspired by the works of a Japanese professor and artist Masahiro Chatani, Siliakus began researching about the art that could be done with cutting and folding paper.

0

After a few years of studying, she began rendering her own grand paper architectures. Siliakus’ creations can be considered as the product of marrying two disciplines of paper art—origami and pop-up. Before she was able to design pieces by herself, she created paper renditions of famous buildings, such as Spain’s Palace Del Marques De Salamanca.

1

Bovey Lee

Artist Bovey Lee was bestowed with multiple blessings that helped her reach the state where she is now—literally and figuratively. After finishing fine arts in her homeland, Hong Kong, she pursued painting at the University of Berkeley in California and then took digital arts at the Pratt Institute in New York. Though she was originally into painting, she eventually discovered her passion for paper cutting.

2

Bovey has succeeded in incorporating her native culture to her art by choosing to work with rice paper. Rice paper has characteristics ideal for her projects, and it allowed her to practice the centuries-old Chinese art of paper cutting. Many of her works have been exhibited in the most prominent museums in the world, such as the Museum of Fine Arts in China, Fukuoka Museum of Art in Japan, and Brooklyn Museum of Art in the United States.

3

Paper has served a great many functions in art. From being a canvas to being actual artworks itself, paper has proven to be one of the most indispensable media in creating masterpieces.

Comments and Reactions

Beyond any question, responsive web design has become the standard for anybody who wants to make a strong presence on the internet. With the passage of time, rules, best practices, layout standards and guidelines have been commonly created, implemented and accepted by most web designers and developers.

However, let us not forget that even though responsive web design is being widely used, it is still a youngling and in spite of its awesomeness, it still has to improve in many aspects, such as taking into account that newer devices are being introduced with each passing day.

One of those scenarios where RWD critically fails is the correct handling of information in favor of responsiveness. For example: sometimes, after applying any of those widely accepted standards of responsive web design, we may have a desktop design displaying three or more columns, but the design for smaller resolutions downplays a lot of this information by piling it up so that it is not visible at first sight, or in some cases, it will completely disappear from the layout.

Of course, this inaccurate handling of information is not going to be a problem for all sites, but the truth is that each site layout and responsive scheme should be designed on the basis of the content and the desired impact on the visitors.

The foreground ad from the desktop version of the Boston Globe homepage disappears when viewed on a mobile.

A new position: Responsive design analyst

Every project is different from all others, and in most cases the main characteristics are unique. Thus, the design and architecture should be unique too. This is the main reason why standard rules of responsive design do not work for everybody and a deep analysis of every project is needed in order to take full and proper advantage of RWD. At this point, a new position may play a key role: every project needs a person who can analyze the content and structure and help in finding an equilibrium between handling of important info and responsiveness. The importance of this task has started to emerge; for example, we found this interesting quote while surfing on Linkedin:

“Although there are hundreds or probably even thousands of examples of web sites based on responsive design there is only a limited number of big companies that have adopted it and usually more as an experience or only partially (…) I believe that the reason is actually that although it is possible to do, it actually complicates the layout of pages and information architecture a lot. You have to plan for most common denominator between different devices which will usually lead to a compromise.” Magnus Jern, CEO Golden Gekko

An interesting challenge: a closer step to accurate user experience

One of the key challenges for any responsive design analyst is the creation of accurate structures to avoid the downplay of information that could actually make the difference. Owing to the desire to keep your latest post on top, there is a tendency to remove the other containers from the first row of the desktop layout when shrinking to fit the smaller screens. Generally, such ‘other containers’ include information of your main advertisers: no foreground sponsor would like to see their ad going out from the very first shot of the site — that isn’t what they are paying for, is it Thus, strategic content placement is key in this responsive design process.

It should not be forgotten that responsive design has been evolving due to the continuous development of devices with access to the web and the need to display the accurate layout of the site on those different devices. Without losing that sight, it’s time to start giving more importance to content placement and its impact on viewers, and as quoted above, this work cannot really be done by a single designer/developer — it demands a specific person or team, indeed, set to analyze and consider a large amount of variables summarized in target, type of content as well as structure and relevance of the information to display.

Furthermore, such teams or individuals should be able to create an accurate set of structures for every resolution and have clear and powerful communication skills to express their ideas and structures to the development and design teams. This will help in providing the project with an aesthetic responsive design and a powerful adaptive content placing.

Content choreography: a first glance to responsivity analysis

An interesting approach that helps in providing more and more importance to content when designing responsive layouts, introduced by Trent Walton in the middle of 2011, is called Content Choreography.

One of the first steps of this concept is to establish content priorities, and once that is done, content may start dancing over the layout. You can take a look to this simple approach which exemplifies accurately how structure and hierarchy is broken and content is rearranged on the basis of priority.

Content Choreography, an interesting approach for giving more importance to content.

Using this method, content placed horizontally should not have to place itself in the same order when transposed. Instead, such content would follow a set of preset rules to place according to the importance of every box of content.

One of the main issues that responsive layouts have is the predictable behavior of boxes when resizing to mobile resolutions (the situation we described above about the wrong placement of advertisements), Content choreography might be a good solution to face this problem. In the image below we can see two stages: the one on top shows the typical horizontal box arrangement transposed to a vertical pile keeping the same order and thus, the foreground ad loses its privileged place and may be hidden on small mobile screens.

The one on bottom shows an implementation that could be the result of applying content choreography: the typical horizontal arrangement is piled up according to its relevance, and then, the advertisement will stay at the top of the V-arrangement, keeping a foreground position irrespective of the resolution of the device which displays the website.

Comparison between regular a responsive implementation and a choreographic responsive implementation.

An advanced implementation of content choreography for advertising was featured by Responsive Ads, and its named Stretch. It’s not just changing positions depending on relevance, but also changing ads appearance to display much better in smaller resolutions and keep them displayed in main impression, so that any foreground sponsor’s investment is going to be worth every penny (as the content will keep showing up and the ad will not be lost by a bad implementation of responsive design).

Different approaches about how ads are smartly positioned on and adapted to screen depending on resolution. [Image Source].

There’s still a long of way to go, and that is why this specialized position should be implemented in the process of web design because when it comes to content, there can be no specific predefined template – each category of content is different and thus it needs different ways to be shown to the audience.