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:

• 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

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.

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.

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.¹ 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.² 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.³ 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.

Sean McCabe‘s passion for hand lettering and typography can be traced back to middle school, his homework littered with typographic illustrations.  While others doodled, Sean shaped and sculpted his own unique letters, seeing them as shapes and curves full of beauty.  His fascination with typography grew into a career, with Sean now doing what he loves most.  His love for meticulous detail, attentive eye for precision, balance and composition are all in a days work.

Go Media had the opportunity to chat with Sean about his love of letters and how he made it his life…

See below for Sean’s Coupon Code – Exclusively for GoMediaZine Readers!

Go Media : Hi Sean! Can you tell us a little about how you got started as a designer?

Sean McCabe: I started learning and practicing design as a creative outlet 9 or 10 years ago in high school. In the beginning, it was something I did in my spare time, but gradually grew from part time gigs to full time freelance work. Eventually I partnered with a developer friend of mine to form a web firm which we ran for a few years. It was through web design that I developed a keen interest in typography. I started really focusing on type design and lettering and applying myself toward honing that craft in my nights and weekends.

I now concentrate solely on custom type commissions and producing various products featuring my lettering.

Go Media: You stress doing what you love! What is the most satisfying part of your job?

Sean: The most satisfying thing is crafting something to the best of my abilities. In the beginning, these were usually self-initiated projects, but over time I learned to be selective in what clients I work with. The clients I do take on now are very on board with my process and come to me solely for my expertise.

I was jaded early on in my design career because at the time, I did not know how to be a professional. It always felt like an uphill battle trying to convince clients that I was making the right decision or that I knew what I was doing. I came to learn that you can’t shove good design down someone’s throat.

So where do you start?

You start by ensuring the clients you DO take on are willing to invest in good design, and are willing to trust you based on your track record. You’re only able to be selective by practicing selectivity. You’re never going to get to that place unless you start paving the way by turning down bad leads. Your efforts should be spent pursuing good leads from the start rather than trying to convert bad leads.

Do a ton of self-initiated work until clients are practically knocking down your door to hire you based on the immense portfolio you’ve developed. My clients want the quality results I deliver, so I plainly explain that adhering to my process is how those results are achieved.

You’d be surprised how smooth it is once you get to that point. Since these clients are cream of the crop, there’s little-to-no friction in terms of me being enabled to do what I do best. They’re invested in my professional results and what I am able to deliver, and less about trying to tell me how things should be done.

It comes as no surprise that the work produced from these types of projects receives the greatest recognition and appreciation from a general audience when published.

Go Media: Tell us about an average work day. What does it include?

Sean: My wife used to be a barista and now makes me espresso drinks in the morning before work, so I’m super spoiled. I drive her to work and get in to my home office at around 8:15am. On an ideal day, I’ll have 3 or 4 tasks that I’ve prepared the night before that I try to tackle first, but I’d be kidding myself if that was always the case.

My efforts are typically split between administration and actual working. For the product-selling aspect of my brand, I try to stay engaged with my audience on various social platforms every day. As far as actually creating, I usually have a list of self-initiated works I want to make that I curate throughout the week, and also active client commissions to work on.

The mornings are usually spent trying to respond to (or more often turn down) the incoming requests for work and handling customer support inquiries and other emails. I usually get my quality lettering work done in the early afternoon and later evenings. I pick up my wife, and do a little more work before dinner and a TV show, then I usually do a couple more hours of work in the evening.

I say “work”, but really the evening is typically spent on projects I WANT to work on, and not so much the ones I HAVE to work on. Because I do what I love for a living, it’s pretty much indistinguishable from an outside perspective. I may seem like a workaholic (which I probably can’t honestly deny), but though what I do after-hours appears to be more “work”, it’s actually a different kind of work. It’s much the same as playing video games or reading a book for some.

Go Media: You described yourself as “pretty strange” in your younger years, littering your homework with beautiful type (we can relate…to the strange part at least!).  Was there someone in particular who inspired or mentored you at that time, encouraging your career as an artist?

Sean: Yet again, I feel odd saying that I never had any sort of mentor figure. I hear many others share that they had someone to help guide or mentor them, but that was never a part of my story.

I’ve always been very self-driven and motivated. The worthwhile things in life require discipline, so as one who very highly values those things, I came to love discipline. Whether it was learning piano, or teaching myself anything from guitar to design and typography, I trained myself to enjoy the process as much as the results.

I’m very long-term oriented. I like the slow-progressing steps toward vast goals. I suppose that’s what enables me to accomplish things because I see the big picture and don’t get discouraged by small defeats.

My family has always been supportive of my ventures. When I started my first business in early high school, they were very encouraging. I thrive on words of affirmation, so even if they never thought in their minds that I could be successful at it, the words they spoke were enough to fuel me.

Go Media: How do you continue to learn and grow as an artist?

Sean: I was home-schooled growing up. My mom was a great teacher, though as I was the oldest of 12, there was only so much 1-on-1 time you could really get. This resulted in a lot of our education being very self-propelled. We were given the curriculum, but really we could go as fast or slow as we wanted to. I could see this being a good or bad thing, but for me it was very beneficial because it didn’t slow me down the way a traditional education likely would have.

I devoured every book in our house and then took to libraries. I think if being home-schooled gave me anything, it was an insatiable desire for knowledge and learning.

I got about 1/5 of the way through a computer science degree, but at that time I was already running two businesses. I recognized that in both industries I had companies, experience was equal to education.

I stopped pursuing the degree.

While my formal education ceased, my self-initiated education continued all the more and with renewed focus and vigor. I wanted to learn music production, so I spent 30 hours watching YouTube tutorials, and making things. I wanted to learn Adobe Premiere, AfterEffects, Photoshop, illustrator, etc., so I simply did.

The internet is a phenomenal wealth of resources. The vast majority of information is freely accessible, and what quality material is available is very affordable. The internet merely amplifies what inclinations we already have. If you want to learn, there’s no stopping you. The sky’s the limit. If you want to waste it all away, there’s no cap on how long you can play video games, and there are enough cat gifs on Reddit to fill the rest of the time you have on this planet.

I always say if you go to school and didn’t learn to learn, you’ve learned nothing.

Go Media: Is there a piece you are most proud of? If so why?

Sean: The works I’m most proud of are usually the most recent. This is because I visually tear apart any of my work that is older than my recent one or two pieces to the point of strongly disliking it. All I see are the flaws and what can be improved.

Perfectionism is somewhat of a curse, but it also pushes me. It keeps me innovating. As annoying as it is, the reason I see the weaknesses and flaws in my previous work is because I’m growing. I’m improving. That’s always a good sign, and it’s enough to keep me going.

 _________________________________________

Visit Sean’s Store

When you used the coupon code GOMEDIA at Sean’s Store (through July 4, 2013), you will receive 10% off of Sean’s t-shirts, posters, pins, mugs & stickers, just for being a GoMediaZine reader.  Thank you, Sean!

For more Sean: SeanWes.com | Facebook | Dribble |
Instagram | Twitter

So You Want to Learn Hand Lettering: By Sean McCabe

The post Sean McCabe: Doing What You Love appeared first on GoMediaZine.

One of the best ways to control the parts of the website that will get the most attention from visitors is to remove things that are unnecessary and might cause a distraction. In recent years the minimalist design approach has drawn a lot of attention, especially from designers who appreciate the beauty of simplicity. However, designing a website to avoid clutter and distractions doesn’t mean that it has to be completely minimal with very few images and visual elements.

In this post we’ll showcase 25 sites that use a clean layout and design, eliminating unneeded clutter. Some of these sites are more minimalistic than others, but they all showcase the power of a clean design.

Foundry Collective

SumAll

Mailbox

Pixeno

My Name is Dan

Simone Favarin

Swear Words

Jumpbox Design

Evolve Artistic

Nudge

Wixel

Osito

Northbound Design

Blimp

William Leeks

Thibault Jorge

Dodge & Burn

Roy Barber

Lab Fiftyfive

Enjoythis

Amanda Cole

Scanadu

Funkhaus

GOOQX

Michiel de Graaf

For more design inspiration please see:

• 33 Examples of the Flat Web Design Trend
• 25 Bright and Bold Website Designs
• 25 Beautiful Portfolio Website Designs
• Showcase of Outstanding Blog Designs

Advertise here with BSA

If you like awesome textures we’ve got just the package for you. DesignM.ag has partnered with Callum Chapman to offer this great set of 100 textures. These high quality artist textures are for both personal and commercial use in your projects, featuring handmade and expertly crafted paint and paper textures.

All textures are at least 3000 pixels wide, which make them perfect to use in your web or print designs.

Advertise here with BSA

Advertise here via BSA

Selectize is a jQuery-based custom <select> UI control. It’s useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API.

It allows users to create items on the fly. It supports Remote data loading,for when you have thousands of options and want them provided by the server as the user types. It’s a lot like Chosen, Select2, and Tags Input but with a few advantages. It is licensed under the Apache License, Version 2.0.

Requirements: jQuery Framework
Demo: http://brianreavis.github.io/selectize.js/
License: Apache License

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Before You Get Started

Responsive Web design is intended to ensure that a site’s layout and content scale fluidly to the available screen real estate. This is a great approach for focusing your investments on improving site content and user functionality while ensuring that users have a good experience regardless of what device and screen size they use to visit your site. If you didn’t read the first article in this series, “Why the Web Is Ready for Responsive Web Design,” be sure to read it first.

It’s worth taking a step back, however, to think through your site’s experience and understand whether the device with which a user accesses your site changes the user’s expectations of the site’s functionality. Is the user checking your site for quick updates with her cellphone while she’s on the go? Is he sitting down, 10 feet away from a large TV screen, looking to immerse himself in a relatively passive consumption experience of rich content, videos and games? Are other users sitting down at their PCs, looking to get the most from your site content? Most of all, how do these expectations affect the site layout and functionality that you provide at those corresponding screen sizes?

What Kind of Site Is This?

Planning the content hierarchy for your site across different form factors is definitely the first step to having a great responsive-site experience. Consider the following examples, which evaluate and compare the top experiences that customers want to have when they access your site from a 4-inch phone while they walk or take public transportation, when they’re sitting at their computer desk, and when they’re lounging on their couches in their living rooms.

News Site (Content Consumption)

People visit ContosoNews.com primarily to do one thing—catch up on the day’s current affairs. When you see how this site is presented on a PC screen, it’s designed to have a layout like a newspaper. More important, the single home page is expected to attract and retain different kinds of readers, with interests in current affairs, business, sports, entertainment and other topics, and show them that ContosoNews has content that will interest them. The home page has a rich layout with slide shows, cycling of recommended articles, various categories of news available below the fold if you scroll down, recommended editorials and even the weather. Figure 1 shows a schematic illustration of the site at different resolutions.

Figure 1.Comparing Layouts for ContosoNews.com

If you visit this site on your mobile phone browser, you see a subset of the content, with menu and link navigation to the remaining content. The content that was available on the PC has been prioritized, and the top headline has been given focus above the fold. The slide show of recommended articles is replaced by a series of blurbs with links. The top articles from the Other Categories section are gone, replaced with a single category picker that navigates away from the home page.

In this way, users visiting the site on a phone can, in a cursory glance, become aware of the content available for consumption and dig deeper at their convenience.

Local Attraction (Hyper-Local Site)

Contoso Station is a hip new restaurant in Seattle. When people visit the restaurant’s site on their PC or TV screen, the restaurant proudly shows its latest Yelp reviews, news articles and tweets from users who add the hashtag #i<3contoso.

However, when you visit the site on a smartphone, the company makes a fair assumption that you’re visiting its site on the go with hopes to find its location, hours of operation and phone number. The phone might even request your location and show you a map with the quickest route to the restaurant. Some of the remaining content can be presented with much less detail—for example, the Yelp reviews are boiled down to one-line snippets—and the rest of the content (the Twitter feed, for example) can be hidden altogether for users visiting the site on their phones. Figure 2 shows an example of this scenario.

Figure 2. Comparing Layouts for Contoso Station

As seen in Figure 2, local businesses should prioritize and show an entirely different set of content to phone users and make their mobile experiences more sensitive to location.

Media Site (Rich Audiovisual Content)

ContosoTube is a popular Internet service where people share all kinds of videos. Users can see the latest top-rated and most frequently watched content. As they sign-in and explore the site, they can create and edit playlists of videos, get personalized recommendations, subscribe to other users’ playlists and even send each other messages.

The experience of ContosoTube on a phone is geared toward showing videos that a user has opened from other apps (instant messages, email, Twitter and so on), searching to view a video, and letting logged-in users access their existing subscriptions and playlists. Their experience is very limited for content curation.

What’s interesting about ContosoTube is that the Xbox site experience is similar to the phone experience from a user-functionality perspective, although the Xbox site is laid out differently based on screen real estate because even when ContosoTube users visit the site on their large screens, they are probably accessing it from their living room and doing so with controls less precise than a mouse. While the screen size of the TV might tempt developers to provide a more PC-like experience in terms of available functionality, it would be highly likely that users accessing ContosoTube on their TVs would focus primarily on watching content and not on creating it, managing it and messaging with others. Figure 3 compares site layouts for ContosoTube.

Figure 3.ContosoTube on a PC, TV and Smartphone.

HTML5 Games

On Build New Games, a website that explores HTML technologies for creating immersive gaming experiences on the browser, Jack Lawson provides a great discussion about what a gaming experience might be like for a responsively designed Web site.

A game is a great example of site design where users expect entirely different experiences based on the context in which they visit the site. For example, if a user visits the site WorldOfContosoCraft.com from his PC, he probably expects a full-fledged gaming experience—he can play the game himself, interact and communicate socially with other players through the in-game chat feature, make customizations and settings to his avatar and even participate in the in-game marketplace to buy upgrades, armor and other goodies.

On the console, this user might expect a similarly feature-rich experience, but he would also have expectations about being able to use his controller to drive the experience instead of the mouse and keyboard. (There are currently libraries for Chrome and Firefox—although with limited cross-browser support, as Nikhil Suresh points out in his discussion of controller support in JavaScript libraries.)

On the phone itself, the user might be looking to perform simpler actions, such as checking up on his inventory and gamer stats, performing some customizations on the avatar and maybe buying some add-ons from the in-game marketplace. Game developers, who can provide such a contextually relevant experience to users who visit their site from their cellphone for a few minutes, can keep their users engaged in the overall experience even when they can’t play the game.

Considerations for UI Design (aka Fat Fingers)

In addition to information design, you need to think about modes of user input. Today, first and foremost, this means that your site UI be touch-friendly. Visitors are not using touch for your Web site only on phones and tablets; they also use touch-screen-based PCs. Moreover, when you think about users on the Xbox, they’re interacting with the UI elements of your Web page by using a joystick, which is not as precise as a mouse.

Ideally, you do not want to design and code your user interface elements (buttons, links, form controls and so on) differently for touch (tablets and phones) than for PCs with traditional mouse-keyboard elements. In fact, Windows 8 makes this distinction nonexistent, with users able to run Microsoft Surface with a USB mouse as well as desktops with touch-screens. Moving forward, it’s reasonable to assume that more traditional PCs will be equipped with touch-screen functionality.

That’s why the best approach is to design a one-size-fits-all interface for user inputs that is comfortable for touch users to access. Mouse and keyboard users can still interact with these pages just fine.

To highlight some paradigm shifts in this approach, let’s take the example of one of the most common forms of navigation, the drop-down menu, on my favorite local radio station, Contoso Music. (See Figure 4.) This is just one example of a solution to links and navigation menus for touch, but it illustrates the most important considerations we need to take.

Figure 4. The Drop-Down Navigation Menu for Contoso Music

This navigation menu has a couple of issues that go beyond responsive layout, but they are still an integral part of building a unified site experience that scales across multiple devices.

1. First, a lot of sites use navigation menus on which links are revealed when a user mouses over the menu titles. This is absolutely unacceptable because a mouse-over does not translate well to touch browsers. In fact, touch-input aside, you shouldn’t rely on a mouse-over to reveal any useful information at all because it is not keyboard accessible and goes against W3C accessibility guidelines.

2. Second, look at the relative sizes of the links Playlists and DJs. These two pieces of information are supposed to be at the same level in the hierarchy. However, the size of the link is determined by the size of the text. This makes the DJs link less prominent, and also harder to precisely tap on a touch-screen. The DJs link could be as small as 20 px by 40 px, which is not accessible.

3. Another subtle problem, which you can see by glancing at the menu list items, is that only the text items themselves are hyperlinks. Here again, the touch user would be better served if the target for the link Foo was the entire width of the flyout menu instead of just the text width.

Moreover, users on all-in-one devices might utilize the same machine in different device configurations, in which case they might access your site with a mouse at one point and then revisit it later by using touch. It’s beneficial to provide the user with touch-friendly, well-spaced hyperlinks and navigation.

A common example of touch-friendly navigation that lots of sites use for their menus, especially on mobile apps or in a sidebar for tablets, is shown in Figure 5.

Figure 5. A Touch-Friendly Redesign of the Contoso Music Navigation Menu

The navigation menu utilizes touch, mouse or keyboard to expand and collapse the accordion-style submenus. All the links are the same width (even the submenu items), and for each link, the entire rectangle is clickable, not just the text.

A good example of a site that has made this transformation is MSN.com. The old MSN.com (shown in Figure 6) sports a significantly higher content density, with lots of text links (with smaller clickable areas) that are tightly packed (creating room for error when using touch and gaming joysticks), as well as a mouse-over to reveal the subcategories of news (see the menu under Entertainment).

Figure 6. The Old MSN.com

Figure 7 shows the new touch-friendly version of MSN.com. While currently offered only on Windows 8, the touch-friendly UI will be rolled out across the board for all browsers after testing. Notice the more spacious layout and larger hit targets.

Figure 7. The New Look for MSN.com

One Site Fits All

Responsive Web design should not only be about resizing the same content gracefully based on user screen sizes. To best connect with your users across multiple screens, your site should not only be aware of the device’s physical characteristics (such as screen size) but also infer the user’s physical circumstances, modes of input and the kind of information she is seeking.

About the Author

Rahul is a former Microsoft engineer who currently freelances in app and Web development. You can follow him online at RahulJL.com and reach him @quasirahul.

Sponsors

Professional Web Icons for Your Websites and Applications

Bright yellow and canary yellow are starting to emerge as popular colors again this year. We’ve seen yellow trend in the the past, but it seems to be emerging as of late. Check out these awesome uses of yellow in home, design, and fashion for your inspiration:

Check out these palettes featuring yellow:

Looking to add some yellow to your creative projects? Check out these designs from Creative Market:

As with any web application, creating multi-page sites requires a specialized set of tools. In this article, we’ll take a look at developing a library that not only can differentiate between the different URIs, but one that takes advantage of Meteor’s core features.

Intended Library Features

Whenever I have to develop a specific and focused library like this, I like to start with the outcome of, how do I want this to work?

So, we can begin by writing down some of the features that we’d like it to have:

• The ability to load different pages according to the URI
• Reading parameters from the URI (placeholders)
• Keeping the pages dynamic as per the Meteor standard

That looks pretty good. Now after looking over these features, you may think they are pretty similar to a ‘router’ type of library and I agree. So, let’s take a look at how our ‘router’ library would work in action:

Router.addRoute('/home', 'homeTemplate');
Router.addRoute('/user/:username', 'profileTemplate');
Router.addRoute('/contact', 'contactTemplate');

Router.run();

In design, you have concepts like ‘form-follows-function’, which uses the idea of laying out everything first, and designing it later.

In code, I often find the opposite is more helpful. We as developers, can work in many directions and having a working example of what the design should look like, keeps us focused and efficient.

Now that I know what I want to do, it’s just a matter of implementing it. So, let’s take another look at our features that we wrote above; we want to be able to add routes, and have Meteor render the given template partial. Of course, Meteor’s views work off of handlebar’s templates by default, so I’ve made the decision to make this the denomination of our router.

The Breakdown

Next, let’s break down the project into different sections so that we know what features we need to work on.

• We’ll start by getting the current page’s URI, as we do need to match the routes against something after all. This can be done, easily enough, using the window.location.pathname variable, provided by the browser.
• Next, we need the ability to add routes. This also, is pretty simple now that we have done some example code; we will have a function named addRoute which will accept a route pattern and a template name. This function will then have to store all of these route objects inside some kind of array.
• With the current URI and an array of Routes stored, we will need some kind of method to see if they match.
• And last, but not least, we will need to take a matched route and display its attached template.

Hopefully, you can see that by laying out the requirements, it really helps to streamline the planning stage. We are now ready to jump in.

Setting Up

To get started, let’s create a new Meteor project, I am going to name mine ‘routerdemo‘. Now inside, we’ll create a folder named ‘lib‘ inside another folder named ‘client‘:

meteor create routerdemo
cd routerdemo
mkdir -p client/lib

Next, create a file named ‘router.js‘ inside the newly created lib folder. The reason we are sticking it in ‘client‘, is because the server doesn’t have access to the window.location.pathname variable and as such, won’t work with our router. Putting stuff inside a folder named ‘client‘ assures they will only be run on the client-side.

Now inside the router.js file you just made, let’s put some scaffolding:

//////////////////////////
// Router
//////////////////////////

Router = {
	uri: /*Current URL*/,
	routes: [],
	
	addRoute: /* function to add a route */,
	getMatchingRoute: /* function to get matching route */,
	run: /* function to display the matched route's template */
};

I think that’s a pretty good scaffold, I even filled in the code for the routes array, and added some comment headers (progress!). Now to further develop our library, we need to discuss how we are going to match these routes together.

Matching Routes

This is not as simple as currentRoute === route, as we’re dealing with dynamic placeholders. We want a route for ‘/user/:id‘ to match a URI of ‘/user/42‘ and so on.

To do this, we are going to have to split the URI up and do a little more in-depth analysis. Now some people might be thinking to use a regex, but, that’s a little over the top if you ask me. A much simpler approach would be to split the segments up and make sure the two routes have the same number of segments, and also ensure the parts of the route that aren’t placeholders, match up.

This can easily be achieved by splitting the URI where ever there’s a forward slash (‘/’), using the .split method. So our first check would ensure that the two routes have the same number of segments.

If the route is ‘/user/:id‘ and we get a URI of ‘/profile/42/foo/bar‘, we don’t even need to do any further checking, one has two segments and the other has four, so that seems like a good primary check. The next thing we can do is filter through the lists and make sure each piece that isn’t a placeholder matches up. If these two checks are true, we know the route matches.

Setting the URI Variable

So let’s get started with setting the uri variable:

uri: _.compact(window.location.pathname.split("/")),

In the above code, we’re splitting the array on forward slashes, and turning the string into an array of segments, like we spoke about. Then we’re using Underscore’s compact function to remove any empty items from the list, these could be caused by a forward slash at the beginning or by someone using two forward slashes by mistake. It makes the system more forgiving if we just leave these out.

Adding Routes

Next, we need to create the function to add a route, this is a fairly similar process, but because we are going to be matching the placeholders later, we are going to store not just the segments and the template name, but the indexes for the placeholders as well.

Here’s the completed function:

addRoute: function(route, template) {
	var segments =  _.compact(route.split("/"));
	
	var placeholders = _.reduce(segments, function(currentArr, piece, index) {
		if (piece.substr(0, 1) === ":") {
			currentArr.push(index);
			segments[index] = piece.substr(1);
		}
		return currentArr;
	}, []);
	
	this.routes.push({
		route: segments,
		template: template,
		placeholderIndexes: placeholders
	});
},

We start by splitting up the route into segments, just like we did for the URI, but this time we also need to store the indexes of the placeholders for future reference, using Underscore’s reduce method.

For the unaware, the reduce function is similar to the each method, it also cycles through all the elements of a list, the difference being, it passes whatever each iteration returns to the next item, ultimately returning the results to the given variable. We are starting with a blank array (the 3rd parameter) and we are adding each index as we find them and passing that array along until finally, it’s returned back to the placeholders variable.

The next thing you’ll see going on in here, is that we are renaming the segments that are placeholders and removing the colon. We do this purely for aesthetic reasons and later on, it will make it easier to reference in the templates.

Finally, we push the new data to our routes array which we created earlier.

Matching a Route to a URI

The next step is to filter through the list and look for a route that matches the current URI.

Here is the complete function:

getMatchingRoute: function(){
     for (var i in this.routes) {
         var route = this.routes[i];
         var data = {};

         if (route.segments.length === this.uri.length) {
             var match = _.every(route.segments, function(seg, i){
                  if (_.contains(route.placeholderIndexes, i)) {
                       data[seg] = this.uri[i];
                       return true;
                  } else {
                       return seg === this.uri[i];
                  }
             }, this);

             if (match) {
                  return {
                      data: data,
                      template: route.template
                  }
             }
        }
    }
    //no matches (add 404 or default template maybe?)
    return false;
},

We are doing quite a few things here, so let’s walk through it. We begin by cycling through the array of routes, and we assign the current route to a variable, along with an empty data object to store the placeholders.

Next, we do the initial check of making sure the two routes have the same number of segments, otherwise, we just cycle on to the next route. If they do have the same number of components, we have to check whether the segments match, this can be done using Underscore’s ‘_.every‘ function. This function is again like the ‘_.each‘ method, except that it returns a boolean. The way it works is it will run the function for each item in the array, if they all return true, the function will return true, otherwise it will return false, so it’s perfect for doing things like this where we need to verify each segment.

Now the check that we are performing is pretty easy, if it’s a placeholder, then it automatically fits, as a placeholder can be equal to any value. If it isn’t a placeholder, we just make sure the two segments match, pretty simple.

In order to check whether or not this is a placeholder, we pass the current segments index (stored in ‘i‘) to Underscore’s _.contains function, which will check its value.

Now you may be wondering what the first line inside this ‘if‘ statement is doing, well, it’s storing the segment in the data array under the given placeholder name. So, say for example you had a route of ‘/user/:name‘ and the current URI is ‘/user/bob‘, then this line will add a property to the data object called ‘name‘ and pass it a value of bob.

The rest is fairly obvious, we pass true or false, depending on the circumstances, and the result gets stored in ‘match‘. If match is true, we return the data along with the templates name, and if there was no match, we return false. And that’s it for our getMatchingRoute method.

So far, we can get the current URI, we can add routes, and we can find a matching route, the only thing left is to display the correct route, and for this we need to write the ‘run‘ method.

Displaying the Template

Meteor uses handlebars for templates and stores all the templates in a variable, appropriately named, ‘Template‘. Now, if you are familiar with handlebars then you know these templates are just functions, and by calling them (optionally passing in some data) we get back the template’s HTML.

Now, calling these functions to get the template’s HTML would work fine, but it isn’t very Meteor-like, as what we’d end up with is just a normal static website. Luckily, adding in the dynamic behavior is easier than you might think, all we need to do is wrap the function call in a ‘Meteor.render‘ call. Putting it inside this function will make it react to changes in the data and keep it ‘live’.

The Run Method

Because of this, running the router is very simple, let’s create the run method:

run: function(){
    var route = this.getMatchingRoute();
    if (route) {
        var fragment = Meteor.render(function() {
            if (Template[route.template] !== undefined) {
                 return Template[route.template](route.data);
            }
        });

        document.body.appendChild(fragment);
    } else {
        //404
    }
}

We start by getting the matched route, using the getMatchingRoute function which we just wrote, we then make sure there is a match, and finally we use an else statement to handle displaying a 404.

Inside the if statement, we call Meteor.render and inside, we check and call the returned template, passing with it the data from the placeholders. This function will return an HTML fragment, which we can then just append to the document’s body.

So with about 60 lines of code, we’ve completed our router.

Testing It Out

The next step is to test it. I’m going to use the same code that we wrote earlier when we planned out this project, as it will be a good measure of whether we accomplished, what we wanted to accomplish. Let’s add a file named main.js inside the client folder and add in the following:

Meteor.startup(function(){
    Router.addRoute('/home', 'homeTemplate');
    Router.addRoute('/user/:username', 'profileTemplate');
    Router.addRoute('/contact', 'contactTemplate');

    Router.run();
});

In the above code, we first need to make sure our templates and body will be available before we try working with our Router. We do this by wrapping all of our code inside of the Meteor.startup method call. This will ensure everything is ready, and inside of the startup method, we can then add our routes and run the router.

Creating Our Templates

Now let’s create a couple of templates, this can be done anywhere, you can create a subfolder inside the client folder named templates and create a separate HTML file for each, but since these will be short templates and just for example purposes, I am going to put them together inside a file named ‘templates.html‘ inside the ‘client‘ folder:

<template name="homeTemplate">
    <h1>This is the Home Page</h1>
</template>

<template name="profileTemplate">
    <h1>Profile Page</h1>
    <p>Welcome back {{username}}</p>
</template>

<template name="contactTemplate">
    <h1>Contact Page</h1>
    <p>Contact me on twitter at {{twitterName}}</p>
</template>

The first template is pretty basic, it just contains a little HTML code for the home page’s heading. The second template is very similar, but this time we use the username route parameter. Now the last template also uses a placeholder, but its route doesn’t have the twitterName segment. This is because standard Meteor placeholders will still work, and work reactively.

Back inside, let’s now create a file named ‘templates.js‘ inside the client folder, to declare the contact placeholder.

Template.contactTemplate.twitterName = function (){
    Session.setDefault('twitter_name', '@gabrielmanricks');
    return Session.get('twitter_name');
}

You could have just returned a string, but I wanted to demonstrate that everything is still reactive. The last step is to delete the default html and js files from the root directory (in my case they are named routerdemo.html and routerdemo.js) With that done, start the Meteor server and navigate to the given routes.

Try going to ‘/home‘ or ‘user/gmanricks‘ or ‘/contact‘ and they should all work for you as expected. Another thing is, since we stored the twitter name in Session, we can just open up the browser’s console on the contact page and enter:

Session.set('twitter_name', '@nettuts');

And you will see that the page will update in real time!

Summary

In this article, we built a basic router library, while still giving it a Meteor twist. We covered a lot of the core concepts and as it turns out, a lot of Underscore concepts as well.

In the end, I hope I got the message across that there is no real “magic” going on here. It’s really all about implementing what you need, as opposed to what you can.

Thank you for reading, I hope you enjoyed it. Like always, if you have any questions you can leave them below or ask me on the NetTuts IRC or on my Twitter.

Note: If you are interested in learning more about Meteor, I have just released my new book, which details the process of building an app from its conception & planning to securing & deploying. You can pick-up the book in both ebook format as well as softcover from Amazon.

Four years ago, we set out to on a goal to bring great typography to the web. Now, we’re taking the next step in our evolution: desktop fonts and web fonts together in a single Typekit subscription.

On June 17, we’ll be making 175 beautiful font families from the Typekit library available for desktop use. You’ll be able to sync them to your computer and use them in all your applications for web mockups, print design, word processing, and more.

Want a sneak peek? Ben made a screencast showing how it works. Let us know what you think!

Cleveland artist and illustrator Angela Oster cultivates and creates a world of whimsy, filled with criminally cute, odd and wonderful beings. A graduate of the Cleveland Institute of the Art, Oster gave Go Media a glimpse into her life, her art, and some of her lovely work.

Little Vampire Girl’s first, last and only slumber party

Go Media: Hello Angela! Tell us a little about yourself and how you got to where you are today!

I took a very circuitous route to drawing – in art school at CIA I was into sculpture, video and performance art. When I got out of school and had my daughter, I found that my audience shrunk! That was a good thing – it was just me and my pencil. It is now totally stripped down to what I feel is essential – lines on paper.

Everything starts out as a pencil drawing. I usually work back into the drawing with a crow quill pen and ink – I just started using some Micron art pens. I do add watercolor with varying degrees of success!

Go Media: What mediums do you work in most often?

Everything starts out as a pencil drawing. I usually work back into the drawing with a crow quill pen and ink – I just started using some Micron art pens. I do add watercolor too!

Go Media: I understand that social issues often impact your artwork…why/ how so?

I’ve worked for many years at Ohio Citizen Action – it makes me realize how vulnerable human beings can be. Chemicals are entering our bodies without our permission – companies are allowed to put poison into our air & water… that’s just not right. If I can find ways to express this through art, I’ll do it!

Go Media: What in everyday life is most inspiring to you as an artist?

Images that explore buoyancy – both physical buoyancy in water and the ability to recover quickly from setbacks. I think resiliency is one of the most important skills you can develop. Many of the characters that I draw are alter-egos – autobiographical snippets that deal with happy memories of childhood, and also with awkward moments.  I want the audience to be entertained and maybe look at their own insecurities with compassion. What I really try to capture is the beauty of the bitter-sweetness of life.

Little Vampire Girl does not want to be in her sister’s wedding

Go Media: I love the whimsical nature of your watercolor paintings, tell us a little bit about how hard or easy it was to develop your style or niche as an artist.

Thank you! It took me my whole life to develop my style – it’s an amalgamation of all of the artists that I like to look at. Everyone had a hand in what my stuff looks like – from Dr Seuss to Edward Gorey to Graham Annabel.

Go Media: Tell us about the challenges you face as an independent artist, and about what you love best about it.

The challenges are many – sometimes I thank people who buy my stuff for supporting my art habit. I heard someone say that art is half “doing it” and half “telling people about it”. You really do need to have some kind of business sense and maybe a little luck. I still have a day job that I enjoy, and I have to manage my time well between work, family and art. Honestly, I’m pretty bad at it, but I’m making it work somehow and having fun.

Go Media: What advice would you have for other illustrators/designers who are starting out and trying to make it on their own?

I saw a great speech by Neil Gaiman, whose message was “Do good work”. That is a big part of it. Do good work and the rest will follow. I think it helps to have other artist friends to help buoy you up when you start to sink down. There is a really great blog post that I love to revisit now and then – Super Obvious Secrets That I Wish They’d Teach in Art School… Words to live by.

This is fun.

Go Media: What is it like being an artist here in Cleveland?

The Cleveland art community is extremely supportive. It is small, but it seems to be gaining momentum – new galleries keep popping up. There are a lot of groups around town that draw from live models like Dr. Sketchy or the Murray Hill group and some events like Drink & Draw at the Lava Lounge and Buck Buck Gallery has a weekly drawing night. It’s a good way to meet other artists. Go to openings – see what other people are doing.

Go Media: What’s next for you?

I am currently showing my work at the Still Point Gallery through June 20.  I am curating my first show in July. It’s at Arts Collinwood. The show opens on July 5 and it’s called CRUNCHY: Sugary Cartoon Art for Big Kids. I’ll be selling my stuff at the Summer Market on July 26 & 27 in Avon Lake and at the Berea Arts Fest on  September 8.

For more Angela Oster | Twitter
contact: ostrjoy@gmail.com

The post The Whimsical World of Angela Oster appeared first on GoMediaZine.