Tag: kranthi

It’s Not All Doom And Gloom On The Web // Opinion Column


  

In this article I’d like to discuss the changes happening on the Web and argue that its future is not as problematic and endangered as a lot of people make it out to be. The article is based on the talk I’ve presented at the Smashing Conference a couple of days ago, and you can also see the slides and watch the screencast (see below).

I have been developing websites professionally for the greater part of the last 15 years, and written quite a few books and a lot of articles. Yet when I look around right now, I do feel incredibly… stupid and wonder if I should hang up my coat and do something else. Almost daily we see new tools, new best practices and systems to use, and a lot of them are very far removed from the original Web development technologies that are defined by the standards bodies.

I am also very confused about the message of doom and gloom we have right now about the Web. Many spokespeople look at the sales numbers of smartphones and call us out for not doing enough to keep developers interested and to get newcomers to start on the Web rather than somewhere else.

To me, not everything is doom and gloom, and the Web isn’t losing. I am actually very excited about what we are doing on the Web, and I see a lot of great things happening right now. I look back at what I had to work with in the past and see how professional and rich our development environments are now, and I am very happy indeed.

So, what happened? How come I am excited about the Web and its immediate future, while others feel an urge to protect it from certain doom?

Ubiquity And Speed Of Innovation

Two of the problems we see right now are ubiquity of technology and connectivity. The Web is not the cool new thing any longer. Instead, everybody seems to be on it and using it all the time — not like we did in the past with a desktop computer and browser, but through apps and short updates in social media.

Another issue is the speed of innovation. Almost monthly, something exciting comes out that makes the last big new thing seem boring and unwieldy.

One thing is that we perceive constant new demands from our end users and people who spend money on marketing in our environment. A lot of this is just people repeating things they’ve heard — suspension of disbelief. A video is going around of people being handed an iPhone 4S and being told it is the new iPhone 5. What did they think of it? Nearly all of them found something extraordinarily cool about it and said it is better than the last one — even people who owned the same version!

Of course, in getting excited about these cool new things, a lot of us say that everyone these days has these cool devices and new technologies and that we need to keep up. As Thomas Fuchs puts it:

“Let’s put this in context: mobile Internet usage has doubled last year, and right now about 20% of all Web traffic in the US is from mobile devices. This means Retina screens will soon become the norm.”

It is a very myopic way of thinking, though. The Web is worldwide, and first of all, only a few of us can afford these devices. Secondly, a big chunk of us cannot get these devices where we live. Thirdly, people forget that when the initial investment hurts, people don’t want to replace their hardware a few months after. Not to mention that high-speed connectivity is not as ubiquitous as we consider it to be, especially for mobile devices.

Don’t Always Trust The Web

We seem to be not quite at ease with what we are doing at the moment, despite the fact that our job market being ridiculously good and that we get paid very well for a relatively easy job. Instead of considering this, we constantly measure ourselves against success stories that have been inflated by tech blogs that exist to inflate such stories. Or, as Steve Furtick puts it:

“The reason we struggle with insecurity is because we compare our behind-the-scenes with everyone else’s highlight reel.”

At TechCrunch Disrupt, Mark Zuckerberg was interviewed, and in the immediate coverage by the tech press, he was quoted as saying that HTML5 was a big mistake. The quote that was repeated all over went like this:

“I think that the biggest mistake that we made as a company was betting too much on HTML5 as opposed to native, because it just wasn’t there.”

The interesting bits, though, were ignored in the coverage:

“It’s not that HTML5 is bad. I’m actually long-term really excited about it. And one of the things that’s interesting is we have actually more people on a daily basis using mobile Web Facebook than we have using our iOS or Android apps combined. So, mobile Web is a big thing for us.”

It seems that the main failure was Facebook’s approach to and internal system for creating HTML5 apps — not the technology itself:

“But there’s no doubt that we went for this approach, we built this internal framework that we called Faceweb, which was basically this idea that we can take the infrastructure that we built out for pushing code everyday, not having to submit to an app store, building Web code on the Web stack that we have, and that we can translate that into mobile development. We just were never able to get the quality of it we wanted…”

It seems to me that the path to keeping your sanity in this world of ours is not to care about the shouting news outlets that need clicks to make money.

It’s All About Hardware

A few things are going wrong right now, and most of them are related to the fact that we emulate native apps and the practices of thick client development, rather than embracing the fact that the Web is a different challenge. Yes, it is software. No, it is not a defined platform with established processes.

There is a secret behind all of the failures of HTML5 in the mobile market, and it is actually very annoying: it is all about the hardware.

We can innovate HTML5 until we are blue in the face, and we can optimize browser performance to reach rocket ship-level speed, but if the hardware and operating system providers don’t allow us to be on their hardware or give early access, then there is no way browsers can perform as well as native code.

When you think about it, most of the money on mobile devices comes from app sales. And the Web gets in the way of app sales as they exist now. So, there is not really much incentive to make Web apps perform well or access all of the good parts in the hardware because then developers wouldn’t have to become part of a vendor’s program or pay to get access to their sales platform.

The lack of drivers that would enable apps written in Web technologies to access the whole hardware is the biggest issue. This even affects laptops and desktop machines — a lot of WebGL cannot even be used in brand new computers.

Firefox OS
Firefox OS will be the first truly open operating system for mobile devices. Image credit.

Mozilla is going full force right now to change this dilemma. Firefox OS will be the first truly open operating system for mobile devices. Underneath the hood of Firefox OS are the Web APIs: open-source drivers with JavaScript interfaces to access all of the hardware of the phone.

The Beautiful Side Of The Web

But that is by the by. Let’s go back and see why the Web actually is a great idea for us to work with. Mozilla Webmaker (which I’m involved in) is an ongoing project to turn pure consumers of the Web into makers. We teach basic Web editing skills, how to publish and mix video with online content, and basic ways to keep safe and have a good time on the Web. Attending one of these events is not only humbling but incredible. It is amazing to see how things that we consider boring and “common knowledge� make people go crazy for creating and doing things they haven’t done before.

A lot of the frustration we see stems from people — us included — having forgotten the main principles that the Web is based on. I am right now reading New Model Army by Adam Roberts, a science-fiction book about a war in England between the traditional army and the New Model Army, a group of mercenaries organized via the Web and wikis.

Mozilla Webmaker
Mozilla Webmaker is an ongoing project to turn pure consumers of the Web into makers.

The main difference of the NMA is that there is no hierarchy — everything is voted upon and decided on the spot. They are almost impossible to defeat because they move much faster as a result of not having to wait for orders from above. They are also professional soldiers, there to fight other soldiers without any ideological or national interference. All they defend is the right to be truly democratic in their decision-making.

The Starfish and the Spider is another book that talks about a principle that makes the Web what it is. It explains that organizations without a single point of failure are much more likely to succeed than those that have a massive hierarchy and are likely to be crushed by their own size. App markets are those things.

One of the main issues, though, is that the Web exists, driven by the open and free technologies that we advocate. It works, and it has outlived many of the other closed technologies that were always heralded as its end. But this is not at all a time to sit on our laurels. There is no doubt that the Web has lost a lot of its appeal to new people.

Partly this is because we’ve become mainstream. The Web is not the edgy cool new technology that we can play with any way we want. We have to consider that mainstream media is powering a lot of it with advertising and cross-promotion of real-world events and products. Thus, we should be in the productive phase of the hype cycle, but somehow we’ve missed this point and are still struggling to find a way to turn over a lot of products without reinventing.

One big challenge is to rethink the tools we have. As Lea Verou put it:

“I often think that command-line editors like Vi and Emacs were made by sadists who enjoy making people feel stupid, frustrated and helpless.”

Whenever we talk about the Web, sooner or later the talk is about text editors and writing a lot of code by hand. We should be better than that by now, and we should make it easier for anyone to create on the Web.

The success of other platforms with new developers is that they are simple to learn. You are in a fixed environment, you get a few Lego bricks to play with, and you can build your first thing.

Old Tales Of The Web

Instead of concentrating on being as fast on our feet, we keep boring people with the same old tales of how the Web came around and how HTML got better and we can add semantic value with microformats, and many other tales of yesterday. In a world where all browsers run the same incredibly forgiving parser, talk about the purity of HTML and semantics falls on the deaf ears of those just starting out, and it is actually a deterrent. We’ve failed to make semantics matter — microformats are a great idea, but when no browser does anything visible or useful with them and they don’t bring any benefit with search engines, then they are superfluous to people who just want to publish their work.

When HTML5 got defined, we should have been quicker to get our needs and demands in. If you think about it, the JavaScript part of HTML5 is incredibly powerful, but the semantics are not that amazing. We knew we wanted to move the Web from text to apps, but we failed to define the necessary widgets. Instead we got elements that were defined as a result of analyzing which classes people used in their HTML in the past. Most app-style widgets were created with JavaScript and had no classes at all because not many libraries enhanced progressively. Even now, we don’t help browser makers or demand better support for rich forms.

We’ve even failed to think about a packaged format for an HTML5 app. Portability means that we have installers and de-installers, instead of running an app in a browser. Right now we have no one-size-fits-all approach to that. The W3C widgets were not the right format, so Chrome, Mozilla and PhoneGap all came up with their own formats instead.

Outside the world of those who want to crack the app issue, we flee into a world of abstractions. We build preprocessors for CSS, and we build JavaScript libraries that make it easier but that also completely replace the syntax of JavaScript with their own, and we applaud all of these efforts and call them solutions without knowing whether they’ll be supported in future. A lot of them have come and gone without leaving much of a footprint. Maybe it is time to recognize that moving up levels in a building doesn’t mean that the water damage on the ground floor won’t be an issue sooner or later.

We’re always so proud of the portability of our Web technologies and that they are so easy to learn and use and that they adapt to whatever you throw at them. But when you look at it from an outsider’s point of view, a lot of what we do is not portable or reusable. Every single HTML slide system is a great example of that. Or try sending an HTML file to someone who doesn’t know HTML — they’ll open it in Word and everything will break.

And we don’t help the cause much. We repeat the mistake we’ve make in the past of building solutions for one browser or demanding that the end user turn on things and change their setup. Many open solutions demand that the user takes five steps where one installer would be the right thing, and we expect people to like setting up a lot of tools using the command line. This doesn’t help us win against closed technology.

Getting Out Of The Comfort Zone

How do we win back the hearts and minds of developers? I think we need to create new products and take different approaches than we have in the past. We should focus on making things easier for people, not striving for purity and delivering like we have in the past. We need to leave our comfort zone, because that is when the magic happens.

Bret Victor’s “Inventing on Principle� talk is a great start for this. Bret’s big principle is to enable creation by making the step from creating to seeing the results as short as possible. He shows off a few tools that not only are WYSIWYG but that work in both directions. You write a game by playing and adjusting the position of the player along a timeline. Thus, your testing happens while you develop.


Bret Victor on “Inventing on Principle“.

In-browser developer tools are a step towards a world like that. We create and change in the browser, rather than having to reload every time we change our code. Live reloading with editors works the same way. Having this immediacy where it happens makes a lot of sense, and we should be more vocal that every browser these days is also a creation tool.

Other big things I am very excited about are Web Components (which define the missing app widgets we need), X-Tag (which makes those available cross-browser) and the Mortar and WebGame stub systems. The last two enable any developer to start an app or game from building blocks and with a deployment script that uses GitHub as the host. You even create it offline, and the app will manifest for you. Watch out for this.

Another way to get people to think about the Web is not to make them think about it, but instead to use what they do already. Bananabread is a game demo written in C++ that uses Emscripten to run in JavaScript and WebGL. This is recycling as opposed to creating something new that might not be used.

In general, I think we need tools much, much more. A very interesting move was made by Adobe — yes, the Adobe behind the evil Flash — which released Brackets, an editor that also ties into live rendering in the browser. It is pretty alpha, but the very important point here is that the company that makes all of its money from tools and that rules the graphics-creation market supreme is playing with open source. It wants developers to work with it and make Brackets better and see how it works for them. This is a good chance to work with a company that knows how to build good tools and get it to open up more.

“Today is the tomorrow you expected yesterday.”

The Lost Thing by Shaun Tan.

All in all, there is no doom and gloom here. But we should have a sense of urgency. We have an incredible amount of good things to share and talk about, but if we fail to do so, we’ll look like an outdated group of experts. Today is the day you can help the Web be sexy again.

Step One: Write And Share

The first step is simple. Write and share your wisdom. Do not do it in random places. Instead, join one of the open systems that already contain great content and make it better:

Step Two: Complain In Right Channels

The second step is to reconsider our ways of complaining. Yes, venting on Twitter or on our blogs when things are broken feels good, but that doesn’t give you the feedback you need. And you’re not reaching the people who can fix your problems. You’re merely advertising that the Web is not ready and that people are not even fixing the problems. And that is not true; when you file bugs and complain on channels where browser developers and standards makers are available, things do change for the better.

One thing that has come about in recent years is a massive amount of collaborative development tools that enable you to host a development issue and get it fixed by others with you directly there. Use them, because having an issue fixed with an immediate result works much faster than long-winded explanations about what can be done:

Step Three: Support Open Training Tools

Last but not least, support the open training and education tools that are mushrooming all over the Web right now. A lot of them are funded and need content. The earlier we get people to play with the Web, the harder it will be for them to get messed up again by traditional education. I’d wager that all of us came to the Web because of our interest and from tinkering with things, rather than by graduating from a course. Let’s make that the way in for new makers of the Web, too:

The Future Is Bright!

When you try to get people excited about the Web, remember to point out the good things about it. We are far too good at complaining openly about things that are broken, while failing to share our excitement. Let’s do that more.

Finding Nemo was never advertised like this:

“A movie in which a wife and all but one child in a family are brutally murdered. The last child gets kidnapped, and the father undertakes a desperate search to find it, his only ally being a mentally challenged woman.”

(al) (vf)


© Christian Heilmann for Smashing Magazine, 2012.


Tell CSS that JavaScript is available ASAP

When you’re styling parts of a web page that will look and work differently depending on whether JavaScript is available or not, it can be very useful to use JavaScript to change or add a class name to the html element.

By doing this you can create CSS rules that will only be applied when JS is available and vice versa. The trick is to make sure the class names are switched as early as possible during page load.

Read full post

Posted in , .

Copyright © Roger Johansson


Typography Carved In Stone // Design Process


  

Every name here is a tragic story of loss and heartbreak. The Garda Memorial Garden, or Gairdín Cuimhneacháin an Gharda Síochána, is located in the heart of Dublin city. This memorial is a contemplative garden with large stone plinths and a lot of names and numbers. The list of names, this “roll of honor,� records individual police officers (gardaí) who have lost their lives violently and tragically in the line of duty since the formation of the Irish state in 1921.

This article offers insight into the creative thought processes I followed in designing a typographic solution for this memorial. I’ll discuss my choice of typeface, my detailed layout, the size of type, the materials, the process of engraving, and leaving open the possibility to add names in the future. My objective was to keep a sense of visual harmony throughout the design, while aiming for a certain consistency in the future engraving of names, regardless of language.

Carved Dual-Language Granite Plinth
Detail showing the carved dual-language granite plinth leading into the memorial garden.

Medieval Garden In Dublin Castle
The garden is located in Dublin castle, originally a medieval fortress.

Memorial Garden
The memorial garden is curved. It contains carved plinths, seating and plants.

Memorial Garden At Night
The garden at night.

Background

In the spring of 2009, Ana Dolan, senior architect in the Office of Public Works, asked me to think about the style of lettering that should be used in a project she was working on. Her job was to design a new memorial garden to honor all those who had died in the line of duty. The state had decided to carve the names of these 82 individuals into a new limestone memorial, and the need for a typographer on the team was recognized. It was great to be offered such an unusual and non-ephemeral project.

Carved Names
A detail of the carved lettering in speckled granite, with dark-gray infill.

Accented Fadas Characters
Some letters in the Irish alphabet have accented characters called “fadas.�

Typeface In Steel
The typeface was also carved into stainless steel and infilled in dark gray.

Ana explained to me that another memorial to honor all of these gardaí already existed somewhere else in the city. It had served as a place for their families to visit since the 1950s. All of the people’s names and unique regimental codes were carved in stone in a continuous block, each separated by a simple cross. The original lettering style (see below) was handmade and calligraphic in style; simple, elegant and carved deeply. Sadly, information about its architect and typographer has been lost over time. However, it might have been carved by the English typographer Michael Biggs, and the monument designed by the Irish architect Desmond Fitzgerald. More research is required on this. Any takers from the Smashing Magazine community?

Hand-Carved Names And Crosses
A detail of the original memorial from the 1950s, with hand-carved names and crosses.

This older memorial was located in a high-security place that was difficult to visit without prior appointment or without undergoing strict screening. Over the years, the families of those people whose names were inscribed in this memorial felt that visiting the place was quite difficult. As a result, a decision was made to redesign the roll of honor and relocate it in the city center, on the grounds of Dublin Castle.

A New Memorial

The architect and I met in early 2009 to discuss the new memorial and to assess the advantages and disadvantages of the carved lettering in the old memorial. The lettering reflected the typographic sensibilities of the time (1950s); so, pondering the choice of lettering and layout was crucial to bringing some of those qualities into the new memorial garden’s typography. Initially, I was instructed to faithfully copy the original letters, but thankfully this specification changed as the project progressed.

The new architectural team had also gone some way towards developing a typographic approach and were favoring a ranged-left (i.e. ragged-right) style rendered in a PC-available face. Happily, I was invited to join the team at this stage, before too many decisions had been made about positive and negative spatial planning, choice of face, general layout and credentials of the stone carver (more on that last point later).

In an email conversation with my client, I explained that the ranged-left model that her team had designed and emailed to me (see below) had visual problems. For example, the white space between the left and middle blocks of names looked wider than the space between the middle and right blocks. This visual oddity happened because the length of the names in the middle block was longer than in the other two blocks, resulting in an uncomfortable spatial arrangement.

Ranged-Left Layout
The ranged-left layout didn’t work visually, especially with long names.

To my eye, the uneven white space between columns looked crude and clumsy. Harmony and regularity were demanded by the vertical and horizontal rhythm of the letterforms, the thicks and thins, the counters. It was important that the white space also have visual harmony. A lack of visual calm and harmony would detract from the overall coherence and stability — not a good vibe for a garden that needed all visual elements to be fully considered, that needed a thoughtful approach and that needed to be an oasis of visual order. These men and women died protecting Irish society from crime. Most died violently and in chaos. I didn’t want chaos in the typography. I wanted to create a calm and contemplative space. The typographic layout needed to be visually coherent, with a sense of structure and order. These people had made the ultimate sacrifice by giving their lives to protect others. The typographic design and layout needed to reflect the gardaí’s role of order and discipline in society, not the chaos that resulted in their deaths.

The task of laying out these names and numbers of different lengths in the allocated space in the limestone was complex. It presented the typographer with a visual riddle to be solved. I requested more time to explore these challenges on paper. Of course, allowing me more time came with a financial cost, but, happily, the architect understood the importance of typography and agreed with my arguments, giving me the green light.

Establishing A Layout

Early Layout Experiments

Early Layout Experiments
Early experiments of mine

Finding an effective typographic layout for the gardaí’s names and numbers called for a number of considerations to be made, such as the number of names, their varying number of characters, and the dimensions of each stone plinth. Eighty-three names (and ID numbers) were to be carved across nine limestone plinths of varying widths, each of which would allow room for ten rows of names across one, two or three columns.

I decided to center all of the names vertically.

To get more consistent margins and better balance, I advised that long names not be put on the same row across the three blocks. Long names sat best in the center block, with two shorter names on the left and right. The reverse (i.e. a short name in the center and longer ones on the sides) would work equally well.

For obvious reasons, not leaving any plinths blank was important. So, the 83 names were arranged across each of them, with space left below for names to be added in future (as will be needed, tragically). There is capacity to carve another 117 names into the plinths.

Two Or Three Column Name Panels
Each panel has one, two or three columns of names, with each panel holding up to 10 parallel  lines.

One-Column Name Panel
A one-column panel holds a total of 10 names.

Two-Column Name Panel
A two-column panel holds a total of 20 names.

Three-Column Name Panel
A three-column panel holds a total of 30 names.

Choosing A Typeface

There was general agreement that the shape of the letters and numerals in the 1950s memorial reflected a sense of “Irishness,� particularly in the letterforms, which were calligraphic in style and had a slightly uncial quality commonly seen in the letterforms of the Irish/Celtic manuscript tradition of the 8th century onwards. The Book of Durrow, the Book of Kells and the Book of Lismore all contain calligraphic letterforms whose shapes are influenced by the angle of the quill head and the angle of the scribe’s hand. However, I felt that a calligraphic typeface was not suitable for this project. I wanted a face that was almost invisible, so that, when reading the names of the fallen, one would think of them and not of the typeface. I wanted a typeface that was neither difficult to read nor so full of personality that it drew attention to itself, but rather one that reflected the hand-drawn character of calligraphy, a human quality. Yet it also needed the uniformity, strength and regularity of form found in a print typeface.

It was important that the new memorial have a typeface that could be set and carved in dual languages, namely English and Irish. However, for the long term, given the increase in gardaí with names that are non-Irish, non-English and non-European, the typeface needed to be versatile, be robust and include all glyphs and accented character sets.

I knew that the typeface would need to be easy to carve. I didn’t want one that had thin serifs, counters, stems or terminals that could be easily misinterpreted by a stone carver, resulting in a badly drawn version appearing in stone.

The hunt for a suitable typeface was on!

After some research online and using atlases of type, I found three possibilities for the project: Optima, Zapf Humanist 601 and Exemplar Pro. Each had a beautiful visual rhythm and lovely numerals. They were also all available for purchase in OpenType format and — more importantly for typesetting — available in digital form. The faces could all be slightly modified if needed with accented characters (commonly found in the Irish and central European languages), customized letters and individual number spacing.

Optima Typeface
The Optima typeface was a candidate for the memorial.

Zapf Humanist Typeface
The Zapf Humanist typeface was another candidate.

All three faces had visual traits that were similar to the original 1950s lettering. For example, in Optima, the uppercase “K� had the same calligraphic kick in the top and bottom diagonal strokes. The uppercase “O� had the same vertical stress, and the stem of the numeral “7� leaned back at the same angle. And as in the old memorial, the crossbar on Zapf Humanist’s uppercase “T� was not parallel but had a calligraphic bend in the middle that was very satisfying.

The Perfect Face

Exemplar Pro Typeface
Exemplar Pro was chosen.

Exemplar Pro

After much deliberation, I settled on Exemplar Pro as the most robust and flexible typeface. Its weight and solidity of design were greater than those of Optima or Zapf Humanist; plus, it had a full range of accented characters, ideal for unusual names.

Comparing Exemplar Pro to the 1950s hand carving, I noticed that a lot of the capital letters (N, M, C, H) and numerals (7, 1, 6) were sympathetic in design. The letterforms in Exemplar Pro have a roundness and rhythm that I liked, as well as a slightly calligraphic or hand-drawn quality. I wanted to avoid typefaces that were coldly geometric or mechanical. I was dealing with the names of people who had died tragically. Their families would visit this memorial regularly. I didn’t want the relatives of fallen gardaí to feel that the memorial was cold, industrial or mass produced. I wanted the typeface to be sensitively drawn and a little quirky, the way people are sometimes quirky. When set in Exemplar Pro, the individual names and numbers had a friendliness and individuality that was appropriate to the project. Exemplar Pro also seemed to translate well into a carved face. The serifs were not too thin, and the shapes not too fine or difficult for a carver to redraw or laser-cut. I decided to set the type and provide size layouts, which the stonecarver carefully cut into stone.

It was interesting to research Exemplar Pro’s designer and his rationale for this face as I was critiquing the letterforms. I came across this online description written about the typographer, Göran Söderström:

Söderström, born 1974, is a self-taught Swedish type designer and font developer based in Stockholm. Having just finished a little bit of calligraphic studies, he was twenty when he made the first sketches of Exemplar in 1994. In 2009 the full version became available, all glyphs were redrawn and improved. Diacritics were build for central European languages and small caps, different numerals and alternate letters were added. Finally, the typeface family was expanded to four weights with corresponding italics.

Inspired by the beauty and perfection of several typefaces and the art of calligraphy, he wanted to create a typeface that was traditional yet unconventional, a balance that felt both old and new. It was the perfect typeface for my project. Thank you, Göran!

Final Layout

The limestone plinths had a uniform height of 540 millimeters, but their widths varied, ranging from 900 to 1800 millimeters. For the layout of the names, I looked closely at the scale and size of the type (with letters that were 17 to 25 millimeters in height), the weight of the letters (roman or bold), the number of lines of text (a minimum of 10 and maximum of 11) and the visual positioning of the text.

Different Point Sizes And Weights
Different point sizes and weights were considered.

I created a series of sample design layouts for panels of varying widths (1800 and 1300 millimeters), including a visual reference of names at the actual size on an A3 landscape page, demonstrating the three possible heights of names (17, 20 or 25 millimeters, the last being preferred).

Regarding the number of names, letters that were 17 millimeters in height, in roman or bold, would fit 11 lines per panel, making for 264 names in total. Alternatively, letters that were 25 millimeters in height, in bold weight, at 10 lines per panel would fit 200 names in total. The latter was more legible, and it had a better visual scale and allowed for a larger carving area letter by letter.

My client and I were in total agreement on the final height of the letters, the general shapes of the letters, the number of lines, the layout and the overall number of names for the memorial. The result was 25-millimeter-tall capital letters (100 points) over 10 lines, providing a total capacity of 200 names. We could have increased the capacity by reducing the size of the type, but that would have compromised the aesthetics and the carver’s accuracy.

The full and final list of names finally arrived as a Microsoft Word file, set in the Courier typeface. I got to work and supplied all of the final size layouts on paper to the stone carver for execution. (More names have since arrived, each one being carved directly on site.)

Engraving Technique

We decided to ask the stonemason to do a test piece on the limestone in order to firefight any final problems before all of the names were carved. At that point, we also had to make the crucial decision of whether to carve the letterforms and numerals by hand or by machine. The decision would have a major impact on the visuals, budget and schedule. Limestone is actually quite porous and weathers fairly rapidly, and its color and texture when dry is distinct from when it’s wet.

I also provided the names of two proofreaders who were qualified to proofread the stone carver’s work at phased intervals on site in Dublin Castle. I suggested that the architects order one or two extra pieces of stone in case of spelling mistakes or a carving accident. I love contingency plans, especially on a project like this!

Limestone Carved By Hand and Laser
A piece of limestone was carved by hand and by laser to test the quality of the carving.

To our surprise, the handcut lettering was shallow and hard to read. In strong light (our rare Irish sunshine) and in overcast conditions (which was more normal), the hand-carved lettering was the same color as the surface of the stone, so one couldn’t read it properly. However, the machine-cut lettering was very deep; shadows were apparent, and the text was very easy to read. The letters looked darker than the surrounding stone, and the resulting contrast improved legibility hugely.

Unsurprisingly, we agreed to cut the letters by machine. This decision had several other positive outcomes. First, it ensured that the carving of future names would be consistent with the initial names; secondly, it ensured a deeper definition of form, given the sharper edge; and thirdly, it maximized legibility.

The stone carver used an interesting technique (three stone carvers have worked on this project so far). I supplied the full-sized artwork in black and white on a large sheet of thin grammage paper (120 GSM), one per plinth. The carver then glued this paper onto a “blanket,� or intermediary sheet of heavy blue material, which in turn was glued into position on each stone. The stone mason handcut the letterforms by scalpel, cutting through the paper and blanket layers.

Full-Sized Printed Sheets Onto Stone
The stonecutter placed the full-sized printed sheets onto the stone before carving.

He then sandblasted and lasercut the cutout areas of paper and blanket to a standard depth of 2.5 millimeters. The edges of each letterform and their uniform depth had a very pleasing visual effect.

A decision was made to leave the lettering uncolored on the limestone. However, the granite, which contained a heavy background texture and pattern, needed greater legibility. So, a dark-gray infill was chosen for the granite plinths over each entrance.

Troubleshooting

The best laid plans sometimes don’t go as hoped! The original stonemason was chosen by the memorial’s architect. The builder who won the tender to build the memorial had included stone carving as part of their price. Four or five plinths were carved under this financial arrangement. Unfortunately, the main building contractor on this project was not so in tune with all of our typographic sensibilities and had hired a building subcontractor, who in turn had a different stonemason who in effect was working blind and hadn’t been vetted for quality. The result (illustrated below in the letter “G�) was disastrous. The letterforms were poorly cut and had no fidelity to the original typeface.

Uppercase “G� And “A� Carved In Granite
An example of an uppercase “G� and “A� carved in granite and infilled. The letters are sharp.

“G� and “A� Carved In Limestone Without Infill Color
The “G� and “A� carved in limestone without any infill color. The “G� has lost some of its elegance.

Uppercase “G� and “R� Carved In Limestone
Uppercase “G� and “R� carved in limestone.

Poorly Carved Letters
These letters have been very poorly carved. The “G� and “E� have lost vital shape in their serifs.

I spoke to the original stonemason some time later and learned that his switch in supplier was accidental. He had received all of this feedback through the “trade� grapevine. He also mentioned that a third stonemason was hired by the building subcontractor. The overall result is that the letterforms were not properly carved and, sadly, the standard of carving is very inconsistent throughout.

I contacted my client and mentioned my disappointment in the quality of the stone carving. The client happily took my comments to heart and has since gotten a new stone mason. New names are now beautifully carved. Happy days!

Conclusion

The names of the fallen will continue to be carved in random order, so having a sustainable design and manufacturing process that could potentially last the lifetime of the designer and stone carver and then get passed on to the next generation was important.

Typeset In Black Ink
New names are typeset in black ink. The gray names have already been carved.

New Names Taking Time To Weather And Blend In
New names take a year or two to weather and blend in with the other names.

To assist this process, I created a set of detailed typographic guidelines for future reference, outlining the typeface, alignment and point size and offering advice on tackling white space and the general layout. These guidelines were created to help the next typographer take over the project from me. This project will probably run for another 100 years, with approximately one name being added each year — I don’t plan on being around to see the last name added!

Being asked to tackle this emotionally loaded typographic conundrum was a huge honor. I hope I have created a sense of visual coherence and restful harmony. Each letter shape was important. Each person memorialized here was someone’s son, daughter, father, brother, mother or friend. Each name is now set permanently in the heart of this island’s capital. Even if you didn’t know any of these people personally, hopefully you feel that this memorial is a fitting monument to their lives and service.

Of course, this being Ireland, we never like to leave on a low note. The next time you are in Dublin, if it’s not raining, please remember to visit the memorial; sitting in the garden and reflecting is a rewarding experience.

(al)


© Anne Brady for Smashing Magazine, 2012.


UX Sketching And Wireframing Templates For Mobile Projects // Free Download


  

Today we are happy to release two printable UX sketching and wireframing templates, designed by Pixle for Smashing Magazine’s readers. This article presents Outline, a set of sketching and wireframing papers for mobile platforms and Tapsize, a set of templates for checking optimal tap areas without a mobile device.

Outline

Outline is a set of 28 printable sketching and wireframing papers (in PDF) for seven mobile platforms: Android, BlackBerry, iOS (iPad and iPhone), Meego, Symbian, webOS, Windows Phone 7. The set consists of a few combinations, such as actual size, 10 devices fit to a page, and landscape layout.

Note: Print the sheets at actual size (i.e. do not resize).

As a bonus, Outline includes an Illustrator file displaying the mobile devices.

Outline set
Outline paper set

Windows Phone 7 Panorama template
Windows Phone 7 and 8 panorama template

Android 4.x template
Android 4.x template

Tapsize

With Tapsize, you can determine the optimal tap area without having an actual device. Just print the screen you need. The set includes 9 PDFs:

  • 3.5 inches — 640 × 960 pixels
  • 4.65 inches — 1280 × 720 pixels
  • 5.3 inches — 1280 × 800 pixels
  • 7 inches — 1024 × 600 pixels
  • 7 inches — 1280 × 800 pixels
  • 7.7 inches — 1280 × 800 pixels
  • 8.9 inches — 1280 × 800 pixels
  • 9.7 inches — 1024 × 768 and 2048 × 1536 pixels
  • 10.1 inches — 1280 × 800 pixels

Note: Print the sheets at actual size (i.e. do not resize).

Tapsize set
Tapsize paper set

Calculated grid
Calculating the grid

Checking optimal tap size on paper Google Nexus 7 tablet :)
Checking the optimal tap area for the Google Nexus 7 tablet.

Download The Set For Free

Both sets are completely free to use for commercial and personal projects, without any restrictions. Please link to this article if you want to spread the word.

We’d like to thank the creative minds behind Pixle for providing the resources for everybody to use and share.

(al)


© Smashing Editorial for Smashing Magazine, 2012.


Smashing Conference Live — Day 2


  

During the two days of the Smashing Conference, we provide you with insights, photos and highlights on Smashing Magazine — live from the conference venue. Our team will be posting updates from the early morning to the late evening on both dates to bring you as close to the conference as possible. You can also track the tweets from the conference by following the hashtag #smashingconf and permalink for the live updates.

Bookmark this page to follow the updates in real-time. Please notice that no live stream is available, but all videos will be made available for free after the event. You might want to check the schedule of the conference as well and the report from day 1.

Tuesday, September 18th 2012

12.15


  

The opening titles for the Smashing Conference are now available online. Designed by the fantastic team by Joaquín Urbina from No-Domain from Barcelona, Spain. Thank you, guys, for the fantastic work!


© Smashing Editorial for Smashing Magazine, 2012.

20.37


  

And that’s it. The conference is over, and it was a truly fantastic, smashing experience. It was such a pleasure meeting so many talented, hard-working people, and it’s so rewarding to meet attendees saying that the conference inspired them a lot. That’s why we wanted to create a conference in the first place.

Thanks to everybody involved, speakers, our fantastic team, sponsors and attendees. Thank you, Marc for your help and your fantastic input! And let’s see what the next year will bring!


© Smashing Editorial for Smashing Magazine, 2012.

19.05


  

“A tool that Adobe… yes, Adobe, the company that gave us Flash and other diseases.” — Christian Heilmann


© Smashing Editorial for Smashing Magazine, 2012.

18.49


  

“Things without single points of failure are more sustainable. Great argument for web over native platforms.” — Christian Heilmann


© Smashing Editorial for Smashing Magazine, 2012.

18.43


  

“We need access to the metal. JavaScript has to talk to the hardware only then we have a fair comparison.” — Christ Heilmann


© Smashing Editorial for Smashing Magazine, 2012.

18.41


  

“Firefox OS is (partly) written in JS. So you alter the height of the keytones in an Javascript-Array. If you want to.” — Christian Heilmann


© Smashing Editorial for Smashing Magazine, 2012.

18.40


  

“Emulation brings frustration. Web apps cannot be native apps and shouldn’t try. Too many people don’t understand that.” — Christian Heilmann


© Smashing Editorial for Smashing Magazine, 2012.

18.36


  

“With all these Javascript MVC frameworks and hardcore development, it’s easy to feel obsolete and stupid.” — Christian Heilmann


© Smashing Editorial for Smashing Magazine, 2012.

18.23


  

Christian Heilmann actually titled his talk “To Be Announced”. Now, if that’s not confusing, what is?

Christian Heilmann


© Smashing Editorial for Smashing Magazine, 2012.

18.21


  

The conference is coming to an end. The last talk by Christian Heilmann.

Christian Heilmann
Christian Heilmann


© Smashing Editorial for Smashing Magazine, 2012.

17.30


  

“Craft is a vehicle to put a little bit of ourselves into the things we make.” — Aarron Walter


© Smashing Editorial for Smashing Magazine, 2012.

17.24


  

“Make better things in a better way.” — Raleigh Denim by Aarron Walter.


© Smashing Editorial for Smashing Magazine, 2012.

17.18


  

“Falling in love with your tools is a dangerous thing, because you lose the focus of communicating.” — Aarron Walter


© Smashing Editorial for Smashing Magazine, 2012.

17.17


  

Aarron Walter is speaking about the importance of personality and voice in design.

Aarron Walter


© Smashing Editorial for Smashing Magazine, 2012.

16.37


  

“To load the Facebook, Twitter and Google Social Media buttons for a total of 19 requests takes 246.7K in bandwidth”. — Brad Frost


© Smashing Editorial for Smashing Magazine, 2012.

16.36


  

“There are so many ways to design a responsive carousel in a wrong way. If possible, avoid them at all costs.” — Brad Frost


© Smashing Editorial for Smashing Magazine, 2012.

16.25


  

“Today’s landscape is boot camp for tomorrow’s insanity.” — Brad Frost on responsive design.


© Smashing Editorial for Smashing Magazine, 2012.

16.19


  

Mobitest: a free mobile Web performance measurement tool.


© Smashing Editorial for Smashing Magazine, 2012.

16.19


  

“Performance is invisible. You can’t mock up performance in Photoshop.” — Brad Frost


© Smashing Editorial for Smashing Magazine, 2012.

16.17


  

Brad Frost on the stage. “Embrace the squishiness.”
“71% of mobile users expect mobile sites to load as fast if not faster than desktop sites.” — Brad Frost

Brad Frost
Brad Frost


© Smashing Editorial for Smashing Magazine, 2012.

16.12


  

“Ubiquity is Web’s superpower.” — Brad Frost

“Diversity is not a bug… It’s an opportunity.” — Stephanie Rieger


© Smashing Editorial for Smashing Magazine, 2012.

15.33


  

“Don’t code CSS for the page. Code it for the system. Naming convention clarifies intent. Use child selectors, please!” — Jonathan Snook


© Smashing Editorial for Smashing Magazine, 2012.

15.21


  

“Use class over ID. Don’t use a grenade when a shovel will do.” — Jonathan Snook


© Smashing Editorial for Smashing Magazine, 2012.

15.19


  

“Define what’s going to apply to 90% of the use cases and then figure out what the variations are. Embrace the cascade.” — Jonathan Snook


© Smashing Editorial for Smashing Magazine, 2012.

15.17


  

Photos from the Smashing Conference. The atmosphere was fantastic!

Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference
Smashing Conference


© Smashing Editorial for Smashing Magazine, 2012.

15.12


  

Jonathan Snook is talking about the techniques and strategies to improve the structure and ease maintenance of CSS.

Jonathan Snook


© Smashing Editorial for Smashing Magazine, 2012.

15.09


  

“It’s a good idea to check the CSS of your site when you are done and see what happens if you remove reset.css. Quite often, not a bit will change.” — Jonathan Snook


© Smashing Editorial for Smashing Magazine, 2012.

14.35


  

“Problem is that designers look, they don’t read.” — Tim Ahrens


© Smashing Editorial for Smashing Magazine, 2012.

14.31


  

“If you use uppercase in your designs, you should almost always increase the letter-spacing in CSS.” — Tim Ahrens


© Smashing Editorial for Smashing Magazine, 2012.

14.12


  

Tim Ahrens is speaking about Web fonts. “Today I am the font guy on a web conference. Normally I am the web guy at font conferences.” — Tim Ahrens.

Tim Ahrens


© Smashing Editorial for Smashing Magazine, 2012.

12.44


  

“The DNA of the Web is a fluid, hyperlinked document with default typographic hierarchy.” — Josh Brewer


© Smashing Editorial for Smashing Magazine, 2012.

12.43


  

Josh Brewer mentioned Oliver Reichenstein’s article Web Design Is 95% Typography and Oliver Reichenstein sitting right on the stage.

Smashing Conference


© Smashing Editorial for Smashing Magazine, 2012.

12.39


  

Josh Brewer on stage, talking about the most important qualities of type-based responsive design process.

Smashing Conference
Smashing Conference
Smashing Conference


© Smashing Editorial for Smashing Magazine, 2012.

11.56


  

A plenty of Instagram photos from the conference: Smashing Conference photos.


© Smashing Editorial for Smashing Magazine, 2012.

11.35


  

Lea Verou is showing the new CSS tricks. Audience goes nuts.

Lea Verou


© Smashing Editorial for Smashing Magazine, 2012.

11.29


  


© Smashing Editorial for Smashing Magazine, 2012.

10.25


  

“We need to have combined design and development processes that facilitates iteration.” — Andy Clarke


© Smashing Editorial for Smashing Magazine, 2012.

10.21


  

“It’s impossible to predict all the complications of a responsive design up front. We need a more fluid workflow.” — Andy Clarke

Andy Clarke


© Smashing Editorial for Smashing Magazine, 2012.

10.19


  

“We treat responsive design as a creative challenge, but it’s more of a business problem. Others need to be bothered.” — Andy Clarke


© Smashing Editorial for Smashing Magazine, 2012.

10.19


  

Andy Clarke on stage. “Rigid waterfall processes needs to fucking die. UX > Visual > Development > Implementation doesn’t work for responsive Web design.”

Andy Clarke


© Smashing Editorial for Smashing Magazine, 2012.

09.51


  

Freiburg greets us with fantastic weather again. The room is getting filled with attendees. And that although some of them had a long party yesterday! 15 minutes left until the second day starts.

Smashing Conference
Smashing Conference
Smashing Conference


© Smashing Editorial for Smashing Magazine, 2012.

08.04


  

A couple of photos from yesterday.

The Conference
The Conference
The Conference
The Conference
The Conference
The Conference
The Conference
The Conference
The Conference


© Smashing Editorial for Smashing Magazine, 2012.

07.11


  

The first day of the Smashing Conference was a truly remarkable experience. Jeremy Keith reminded us about what the true nature of the Web is; Rachel Andrew spoke about the challenges of modern content management systems; Stephen Hay introduced us to the ways designers can use command line to create style guides; Oliver Reichenstein proposed that a beautiful design is neither new nor nostalgic — it’s a continuous iteration taking place in small steps.

Nicole Sullivan provided some (deep) insights into her experience with SASS and OOCSS; Paul Boag reminded us that we should solve clients’ problems first and not design just for the users; Jake Archibald managed to explain the topic as dry as Appcache in a (comprehensive) diagram with a grain of fantastic British humor; and Mark Boulton reminded us that trends aren’t important in Web design, and that we should go beyond that to create meaningful, beautiful things. His experience in CERN, Switzerland, was a great introduction to the Smashing party afterwards, and apparently, he is quite fond of his personal heroes: “Bob Ross is the reason why I’m a designer”. Image credit.

Bob Ross

The party afterwards was a great opportunity to meet the attendees, grab a beer and enjoy the conversations. The music was too loud at times, but the free beer made sure that the atmosphere is fantastic. And yes, we even had a Smashing Cocktail! Most attendees will probably wake up with a hangover, but we’re prepared for that. The coffee will be ready when the doors of the conference open for the second day!

The Party


© Smashing Editorial for Smashing Magazine, 2012.

We’re extremely excited and happy to welcome 16 fantastic speakers such as Andy Clarke, Rachel Andrew, Aarron Walter, Christian Heilmann, Jeremy Keith, Oliver Reichenstein, Lea Verou, Mark Boulton or Paul Boag as well as remarkable attendees from all parts of the world. The conference is a big deal for us, but we want you to be a part of it as well.

During the two days of the Smashing Conference, we will provide you with insights, photos and highlights from the conference venue live on Smashing Magazine website. Our team will be posting updates from the early morning to the late evening on both dates to bring you as close to the conference as possible. You can also track the tweets from the conference by following the hashtag #smashingconf.

Bookmark this page to follow the auto-updates in real-time. Please notice that no live stream is available, but all videos will be made available for free after the event.

The conference takes place in Freiburg, Germany at the legendary Historical Merchants Hall at the foot of the Black Forest. The two-day single-track conference will present talks on September 17th and 18th, as well as three workshops on September 19th.

Facts

We’re very excited about the Smashing Conference, and we wish you attended the conference as well. Please share in the comments what exactly you’d like us to post, and feel free to submit your questions for speakers as well. We’re looking forward to the two inspiring and exciting conference days!


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress