Skip navigation
Help

ale

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.
Original author: 
(author unknown)

Jeremy Keith notes that what happens between the breakpoints is just as important as the breakpoints themselves—perhaps even more so. While I agree with this, we do have to start somewhere. In a way, this part of the process reminds me of storyboarding, or creating animation keyframes, with the in-between frames being developed later. We’re going to do that here.

Major breakpoints are conditions that, when met, trigger major changes in your design. A major breakpoint might be, for example, where your entire layout must change from two columns to four.

Let’s say you’ve chosen three basic design directions from your thumbnails. Think about what your major breakpoints will look like (Figure 7.6). And here’s the key: try to come up with as few major breakpoints as possible. That might sound crazy, since we’re talking about responsive design. After all, we have media queries, so let’s use about 12 of them, right? No! If a linear layout works for every screen and is appropriate for your particular concept, then there’s no need for different layouts. In that case, simply describe what will happen when the screen gets larger. Will everything generally stay the same, with changes only to font size, line height and margins? If so, sketch those. For these variations, make thumbnails first, explore some options, and then move on to larger, more detailed sketches. Use your breakpoint graph as a guide at first and make sketches according to the breakpoints you’ve estimated on your graph.

When thinking about major breakpoints, remember to think about device classes. If you’re thinking about smartphones, tablets, laptops/desktops, TVs, and game consoles, for example, you’re heading in the right direction. If you’re thinking in terms of brand names and specific operating systems, you’re on the wrong track. The idea is to think in terms of general device classifications and, sometimes, device capabilities. Capabilities are more important when designing web applications, since you should be thinking about what screens will look like both with and without any particular capability.

Rough sketches of major breakpoints can help you determine:

Rough sketches are more detailed than thumbnails, but they shouldn’t take a long time to create. In a short period, you should have a sketch of each major breakpoint for each of your chosen designs. This should be enough to decide on one of the designs.

  • Whether or not more major breakpoints are needed
  • Which design choice will be the most labor intensive; you might opt for a design that will better fit within time and budget constraints
  • Whether or not a particular device class has been neglected or needs further consideration
  • What technologies you’ll need to develop the design responsively


Figure 7.6: Most websites need very few major breakpoints.

Minor breakpoints are conditions that, when met, trigger small changes in your design. An example would be moving form labels from above text fields to the left of those fields, while the rest of the design remains the same.

So where and when will you sketch minor breakpoints? In the browser, when you do your web-based mockup. You’ll find out why and how in the next chapter. In the meantime, simply focus on making sketches of the state of your web pages or app screens at the major breakpoints of each design.

At this point, don’t worry too much if you notice that the initial breakpoints on your breakpoint graph simply won’t do. Those were just a starting point, and you’re free to revise your estimate based on your sketches. You might even decide that you need an extra breakpoint for a given design and record that in sketch form; you can add that breakpoint to your graph. This is a cycle of discovery, learning, and revision.

Think about your content while sketching

While sketching, you’ll certainly be thinking about the way things should look. My experience is that much UI sketching of this type revolves around the layout of elements on the screen. I’ve found it useful to keep thinking about the content while sketching, and to consider what will happen to the content in various situations. When designing responsively, it can be useful to consider how you’ll handle the following content in particular:

  • Text
  • Navigation
  • Tables

Oh, sure, there are many more things to consider, and you’ll end up creating your own list of “things to do some extra thinking about” as the project progresses. For now, let’s take a look at the items listed above.

Text

Before you say, “Hey, wait a minute, didn’t you just tell me that I didn’t have to draw text while sketching?” hear me out. While sketching, there are a couple of text-related issues you’ll need to tackle: column width and text size, both of which are relevant in proportion to the screen and the other elements on the page.

Column width is fairly obvious, but it can be difficult to estimate how wide a column will be with actual text. In this case, sketching on a device might give you a better idea of the actual space you have to work with. Another method I’ve used is just to make a simple HTML page that contains only text, and load that into a device’s browser (or even an emulator, which while not optimal still gives a more realistic impression than lines on paper). When the text seems too large or too small, you can adjust the font size accordingly. Once it seems right, you’ll be able to make your sketches a bit more realistic.

Note: Distinguish between touchability and clickability. Many designers, myself included, have made the mistake of refining links for people who click on them using a mouse, or even via the keyboard, without considering how touchable these links are for people on touch devices.

Think about the size of links—not only the text size, but also the amount of space around them. Both of these factors play a role in the touchability or clickability of links (and buttons): large links and buttons are easier targets, but slightly smaller links with plenty of space around them can work just as well. That said, there’s a decent chance that no matter what you choose to sketch, you’ll end up making changes again when you create your mockups.

This is the great thing about sketching that I can’t repeat often enough: you’re going to refine your design in the browser anyway, so the speed with which you can try things out when sketching means you won’t have to do detail work more than once (unless your client has changes, but we all know that never happens).

Navigation

Navigation is another poster child for sketching on actual devices. The size issues are the same as with links, but there’s a lot more thinking to do in terms of the design of navigation for various devices, which means navigation might change significantly at each major breakpoint.

Think back to Bryan Rieger’s practice of designing in text first, and ponder what you would do before the very first breakpoint if you had only plain HTML and CSS at your disposal—in other words, if you had no JavaScript. That means no, you can’t have your menu collapsed at the top of the screen and have it drop down when someone touches it. If you have your menu at the top, it’s in its expanded form and takes up all the vertical space it normally would.

This is a controversial enough subject, with even accessibility gurus in disagreement: JavaScript, after all, is currently considered an “accessibility supported” technology. But this isn’t necessarily about accessibility. It’s about thinking about what happens when a browser lacks JavaScript support, or if the JavaScript available on the device is different than what you’d expect. Your content will be presented in a certain way before JavaScript does its thing with it, no matter what the browser. So why not think about what that initial state will be?

In the chapter on wireframes, I talked about my preferred pattern for navigation on the smallest screens: keep it near the bottom of the screen and place a link to that navigation near the top of the screen. JavaScript, when available and working as expected, can move that navigation up to the top and create the drop-down menu on the fly.

But a pattern is not design law, so how you choose to handle the smallest screens will depend on your project. If I had only a few links in my navigation, I might very well put the menu at the top from the very start, and there it would stay at every breakpoint.

Remember that JavaScript and CSS let you do a lot of rearranging of stuff on the screen. That knowledge should empower you to safely design a great page with plain HTML and use JavaScript and CSS to spice it up any way you like. This is the essence of progressive enhancement.

Tables

Tables! Oh, the bane of the responsive designer (or wait, is that images? Or video? Or layout? Ahem). Tables are tough to deal with on small screens. I’d love to tell you I have all the answers, but instead I have more questions. Hopefully, these will lead you to a solution. It’s good to think about these while you’re sketching.

First of all, what types of tables will you be dealing with? Narrow? Wide? Numerical? Textual? Your content inventory should give you enough information to answer these simple questions. Once you’ve considered those, try to categorize the types of tables you have into something like the following classes (Figure 7.7):

  • Small-screen-friendly tables, which you’ll probably leave as they are, because they’re small enough and will work fine on most small screens.
  • Blockable tables, which you can alter with CSS so that each row in the table functions visually as a block item in a list (Figure 7.8).
  • Chartable tables, which contain numerical data that can be transformed into a chart, graph, or other visualization that will take up less space on a small screen.
  • Difficult tables, which are hard enough to deal with that you’ll need to come up with a different plan for them, sometimes even on a case-by-case basis. These are our enemies, but unfortunately, are the friends of our clients, who all love Microsoft Excel. Oh well.


Figure 7.7: There are several different types of tables, and different ways of dealing with them on small screens. (Sources: mobilism.nl and eu-verantwoording.nl)


Figure 7.8: One way of dealing with small screen tables is to treat each row as a block.

Thinking again in terms of progressive enhancement, the base design should probably just include the whole table, which means that the user will have to scroll horizontally to see the whole thing in many cases. On top of this, we can employ CSS and JavaScript, when they’re available, to do some magic for us. Blockable and chartable tables can be blocked with CSS and charted with JavaScript. Plenty of designers and developers have experimented with many different options for tables, from simply making the table itself scrollable to exchanging columns and rows.

The fun part is that what you do on small screens isn’t necessarily what you’ll do on larger screens. That’s why now—when all you have to do is sketch and it won’t take much time—is the time to think about the changes you’ll be making at each breakpoint.

What to do if you get stuck

Every designer gets stuck at some point. It’s no big deal unless you treat it like one. There are countless ways to deal with it, from asking yourself what if questions (“What if it weren’t a table, but a list?” is what I asked myself before “blockifying” the attendees table for the Mobilism site) to the cliché taking a shower, which you hopefully do on a regular basis anyway. The reason this chapter focuses so much on sketching is because the act of drawing itself can actually stimulate your brain to come up with more ideas, provided you push it hard enough by sketching past your comfort zone of first-come ideas.

If your problem is that you’re stuck creatively, there are many inspiring books and resources to get your creative engine started during the bitter cold of designer’s block. Although there are plenty of resources on design and creativity itself (try such classics as Edward de Bono’s Lateral Thinking), the greatest inspiration can come from sources outside the realm of design.1 Trying to combine things that normally aren’t combined can lead to surprising results. It’s a simple little trick, but I’ve often used Brian Eno and Peter Schmidt’s Oblique Strategies to force me to take a different approach.2 Worst case, it’s a lot of fun. Best case, you’ve got a great idea!

If your problem is that you’re not sure how to handle something in the context of responsive design, there’s no harm in researching how others have solved problems like yours. Just be sure to use your creativity and tailor any ideas you might find to your own situation; after all, you’re a designer. At the time of this writing I find Brad Frost’s This Is Responsive to be one of the most exhaustive collections of responsive design patterns and resources available.3 You can spend hours going through there and you’ll certainly come across something that will get you unstuck.

Excerpted from Responsive Design Workflow by Stephen Hay. Copyright © 2013.
Used with permission of Pearson Education, Inc. and New Riders.

0
Your rating: None

The week in type

Let’s start with some fantastic news: Issue #2 of Codex magazine is now available for pre-order. What’s more, you can now purchase a subscription. The second issue is rather special — A new Editor in Chief (Paul Shaw), a complete redesign (Linda Florio), more pages, more of the very, very best content. Spread the word.

Inspiration

More Luca Barcellona in action in Firenze:

Erik Spiekermann talks about Type on Screens at Creative Mornings Berlin:

I posted this Ampersand Balloon project by Conor & David months ago. Have just discovered the making of video:

Beautiful Bitmaps, a project from Uppercase mag. Here are a couple of my favorites:

Each letter of the alphabet is available as a print from the Uppercase store.

Great idea from Tim Brown: Type Set Match hosted on Dribbble.

Twenty Swedish Posters for 1930s Hollywood:

HT: @tealtan

Books

I’ve ordered mine, and can’t wait to get my hands on it. Herb Lubalin from Unit Editions:

This meticulously researched book offers a complete career overview of Herb Lubalin, beginning with his early days as one of the original Mad Men in the New York advertising world of the 50s and 60s, and continuing into the years of his greatest achievements as one of the world’s most influential typographers and graphic designers.

Process

An interesting short read on a logo(type) redesign by Typejockeys:

The Air New Zealand Logotype Design Process from Kris Sowersby:

New fonts

Taca designed by Rúben Dias, and released through Fountain Type — a kind of Jean Claude Van Damme meets Eurostile:

The really lovely Hummingbird from Laura Worthington. Replete with a bucket-load of contextual alternates:

Gira Sans by Rui Abreu of Fountain Type:

And a lovely promo video:

Another script from the maestro Ale Paul. Hipster Script:

New from Typotheque, Karloff:

Read more about the design process and inspiration in Beauty & Ugliness in Type Design.

A large family from Adobe, Source Sans Pro. And free to download, including the source files (open source):

Luela from Cindy Kinash is fun. Combine it with Luela Frames for Etsy-esque feel:

From Font Bureau, The Reading Edge™ Series of fonts for small sizes on screens:

The site itself is testament to what can be achieved typographically on screen. Great stuff.

A fun way for kids or adults to learn Korean:

Korable Block from Allied Operations on Vimeo.

Type-related book marks

Baseline.js, a jQuery plugin for fixing vertical baselines.
The Typeface of Truth.
Kerning — the Italian typography conference.
Paris vs New York — Fonts in Use.
Abobe Edge Webfonts.
Using @font-face for resolution independent graphics.
Publishing startups and great fuzziness.

Finally

Don’t forget to order your copy of Codex journal of typography! You’ll love it.



Sponsored by H&FJ.

Hipster Hummingbirds

0
Your rating: None

In July 2012, the Museum of Contemporary Art in Los Angeles (MOCA) asked me to compile a playlist of videos directed by photographers for their new online series, MOCAtv. Launched last week, MOCAtv bills itself as the “Global Contemporary Art Channel,” providing a wide range of content related to the arts. Looking to see if photographers’ skills translated into music videos was one of the most enjoyable commissions I have ever had.

My personal interest in music videos is mainly autobiographical. I was a teenager in the 1980s—the heyday of the music video. Videos were crucial to bands’ identity; it was really the only way, apart from photography, that an image was disseminated to the world. MTV was the dominant force, but if you grew up in Britain, it was the quaintly titled BBC show Top of the Pops that was one of the only ways to see them.

Looking back at these videos has evoked amazing memories, but at times, I view some videos with a new perspective and appreciate them now because of who made them and how they look. For example, the mesmerizing Addicted to Love by Robert Palmer was always incredible – but now that I know it was directed by the great British fashion and portrait photographer Terence Donovan, all I can see are the similarities to his later photographs of the 1980s with their strong, almost aggressive, female glamour.  It’s interesting to note where the photographer’s hand is so apparent and successful, and elsewhere, when they lose something of their signature flair by having a moving camera instead of a still shot.

Like many, my introduction to music came via my older brother. Always one step ahead of me, he had very sophisticated taste. My first concert was Souxsie and the Banshees when I was 14. Somehow I managed to persuade him (and more miraculously my parents) that I should go along with him and a gang of heavily hair-sprayed goths. It was not the music that I particularly remember, but the amazing beauty of this particular strand of post punk music. From that moment I was addicted to live concerts and the performance of dressing up.

I knew about New Order due to my brothers liking of Joy Division. I saw them perform that summer and their shortened remix of Blue Monday (1988) is like a backing track to those heady months, which were incredibly hot and renamed by many of my contemporaries as ‘the summer of ale.’ I was 18.

When I was asked to put this playlist together I couldn’t believe that I had never seen the video. I was so delighted that it was done by William Wegman. It is full of lovely references for me. Wegman is an artist who manages to have conceptual credibility and respect in the art world and also make calendars with puppies. I can’t think of any one else who manages such success in both commercial and art worlds with such ease and lack of compromise on either side. His ABC video Alphabet Soup featuring Fay, Batty, Chundo and Crooky is my favorite gift to all new parents; my daughter’s go-to bedtime book is Wegmonolgy and my brother has Weineramas. It’s like all good things in my life are condensed into this one video.

A year after Blue Monday, New Order released Run and asked Robert Frank to direct it. This video combines many different kinds of video techniques into one film. It has both live footage and a narrative. It also uses still photographs many times. Nothing is really explained but it has that coldness, disconnect and mystery which is so crucial to a Frank photograph. The song is not the strongest, but you are held utterly by the video. The ending is pure Frank: it stops on a still photograph where everyone is looking in different directions and the scene is chaotic but happy. In two takes he goes closer in to the black-and-white photograph with a woman clutching a book titled listen to god. About two seconds of existential anxiety almost lost as the song fades out.

Staying in the 1980s is Chris Isaak’s Wicked Game, directed by Herb Ritts. This song, which came out in 1989, was reinserted into popular culture when it was used in a scene of Wild at Heart by David Lynch. The video is trademark Ritts. The female body (Helena Christensen) is Amazonian—sexy, strong and very much associated with the 1980s before the AIDS crisis (although of course the AIDS crisis had very much gripped huge swaths of society by this time). It’s crisp, clean and erotic. He shoots from many angles so the body, although always sensuous, can also become abstracted. This photographic technique, which Ritts has become so famous for, was most eloquently played out in a photograph of five of the most famous supermodels gathered together naked (Stephanie, Cindy, Christy, Tatjana, Naomi, Hollywood, 1989) their limbs lending graphic strength and dynamism to the composition of the picture.

Die Antwoord, I Fink U Freeky directed by Roger Ballen (2012) practically went viral among photography circles recently. The video starts with “Die Antwoord in Association with Roger Ballen.” This is the first time I have seen musicians and the director on equal footing, especially when the band has a much bigger global presence than the photographer.

Ballen has lived and worked in South Africa for most of his life. His work is a swirling mix of reality, fantasy, documentary and personal investigation. He photographs in the poorest white areas of South Africa, and his work is immediately recognizable for its disturbing almost nihilistic qualities, which are confusing in terms of ethics and morals of representation. This video is like a zooped up, hammy musical journey through his work and is so well suited to the band, who have a trickster element to them. They are the perfect artistic combination.

Another South African photographer, Pieter Hugo, has directed Spoek Mathambo, Control which was originally recorded by Joy Division and has again been introduced to a younger generation through the biopic of Ian Curtis in the film Control by Anton Corbijn (who has also done a large number of music videos). Again this has similar elements to the Ballen video in that reality has been pushed to appear fantastical. Of all the videos selected it is the most ‘photographic,’ and you can really see Hugo’s skill in using backdrops to create scenes. If you were to go through freeze framing it each scene could work beautifully as a photograph. It reminds me of his Nollywood series about the horror film industry in Nigeria. For this he took costumed actors and put them into the street causing a tension between reality, fantasy, horror, staging and theater. This video has all of those elements and similar references to the genre, but was filmed in a township in Cape Town. It’s the best cover of Control I have ever heard, making it absolutely belong here in South Africa and not the North of England.

Music videos act as lightening rods to memories. Headier than photographs they possess the most potent Proustain links to the past. When they are at their very best, like the ones I have mentioned here, they are like stills come to life. Photographers can offer a particular way of looking at the world. When that coincides with a similar musical vision the results can be spectacular.

Susan Bright is a New York-based writer and curator. You can see more of her work here

View more of MOCAtv’s programming on their YouTube channel.

0
Your rating: None

Lasers, boxes, buttons. SCIENCE

*INEVITABLE COMPARISON TO PORTAL*

Now that’s out of the way, let’s all drool over Kim Swift’s upcoming Quantum Conundrum, which looks like what a computer game would look like if Pixar made computer games. That’s just a fact rather than a wild, hastily decided upon and ill-conceived opinion based on eight minutes of footage shown at CES 2012 and narrated by Kim. Now that I mention it, I did just watch just such a video and decided that anyone who didn’t have a massive grin on their face for at least half of it was probably a pod person. Now, smile. I expect to see the rictus grin of a terrified corpse when I observe you all through my periscope momentarily.

(more…)

0
Your rating: None


A salt spreader dangled three stories high Wednesday after it crashed though a wall at a Sanitation Department repair facility in Queens. The cause of the crash is under investigation. (Rob Bennett for The Wall Street Journal)


Firefighters Jason Corlett, Garon Mosby and Tommy Defrancisci remarked on Justin Reid’s abdominal muscles Wednesday in front of Little Town Restaurant near Union Square.The firefighters were selected from around the country to appear in a charity calendar called ‘Nation’s Bravest.’ (Bryan Derballa for The Wall Street Journal )


Con Ed workers, firefighters, and DOT employees rushed to 152nd Street and St. Nicholas Avenue last Friday when a sinkhole opened up because of a broken water main. (Daniella Zalcman for The Wall Street Journal)


The ‘mangled berry’ cocktail, made with muddled strawberries, lemon, pear vodka and ginger ale at 508 GastroBrewery in Soho (Agaton Strom for The Wall Street Journal)


Runners participated in the City Parks Foundation’s 10th annual CityParks Track & Field Citywide Championships Wednesday at Icahn Stadium in Randall’s Island, N.Y. (Ramsay de Give for The Wall Street Journal )


The grilled cheese at Beecher’s Handmade Cheese at 900 Broadway in Manhattan. (Ramsay de Give for The Wall Street Journal)


From left, Ramani Durvasula, Maya Hinkin and Ingrid Schwartz talked Wednesday inside one of the three meeting bowls in Times Square. The Meeting Bowls are a public art installation by the Spanish art collective ‘mmmm’ and were created to encourage dialogue between users. (Bryan Derballa for The Wall Street Journal )


The fire-grilled flatbread pizza with figs, Serrano ham, blue cheese, olive oil and sage at 508 GastroBrewery in Soho. (Agaton Strom for The Wall Street Journal)


Children played in a flooded pool Sunday in Flushing Meadows Park in Queens. (Ramsay de Give for The Wall Street Journal)

0
Your rating: None

It's Dwarves Vs. Heights in the ultimate crossover battle!

What makes Matul Remrit the Dwarf Fortress diary you should be reading? So many things. The fact that it’s a collaboration between a writer, editor, artist and musician. The bleak and deeply weird tone of it that could not be more true to the game (as opposed to Tim Denee’s stuff, which makes the game comparatively accessible). The glimmering quality of it.

I meant to post about it forever ago and evidently forgot, but I’ve just been jolted into action by their posting an update containing a 36,000 pixel tall comic depicting the fortress’ most epic battle yet. All that bizarre, abstract text? That’s taken from the game’s combat logs. Go read. And then use the links to the left of it to jump back to the beginning. This one’s worth your time.

0
Your rating: None