In Responsive Web Design, Screen Size Needn’t Dictate All Your Design Decisions

Screen Shot 2015-06-03 at 11.49.33

With wearables rapidly entering the market, digital designers can now add one more device to the ever increasing list of diverse devices to design for.

In this multi-device reality, responsive web design has been the go-to design strategy for many design teams.

The overall strategy for responsive design is usually to:

  • Take design decisions based on screen size
  • Support all input methods

But taking design decisions solely with screen size in mind might not (always) be the best idea.

And neither is assuming you can support all input methods.

So is taking design decisions based on screen size wrong?

Of course not.

We’ve all seen that conversion and engagement pretty much always increase when web designs are responsive.

This report from the biggest Swedish publisher, Bonnier, shows how they managed to increase revenues by 160% compared to the same month the year before.

Or this report highlighting how the O’Neill Clothing online store saw a 101% revenue growth on iPhone after they redesigned using a responsive design.

Facts hard to argue with right?

It’s obvious that they have the great impact on the bottom line… why mess up a good thing?

Well, as people use more diverse devices to access the internet, taking design decisions solely on screen size fails to take into account how different Web experiences really are. (or should be).

Too much focus on screen size might very well fail to create a UI that addresses the real needs of people.

LukeW points out; screen size is not a very good proxy for determining:

  • If there’s even a browser running on the device (no Safari in the Apple Watch for example)
  • Network speed
  • The capabilities of the device (again, Apple Watch supports force touch, how does that correlate with screen size?)

Screen size never accounts for different input methods or the context of usage (slouched in the sofa vs standing squeezed between people in a speeding subway are very different scenarios).

As you quickly see, screen size (and resolution) is only one part needed to take into consideration when taking design decisions.

Why including all the input methods might not be the best thing

all-the-input

 

Along with screen size based design decisions web designers have generally accepted “all” input methods; clicks, taps, touch events, keyboard presses (to start with).

Which up until now has been a very pragmatic (and functional) way of dealing with the inherent uncertainty of the Web.

But there’s a problem with this as well:

It’s likely going to become unsustainable. we have to start factor in new input methods like device motion, force touch, hand gestures.

Especially when we have to start to factor in new input methods like device motion, force touch, hand gestures, biometrics etc.

Supporting all input methods will become increasingly difficult.

Adapting designs to screen size is of course not unimportant.

But if we assume too much based solely on screen size, we run the risk of neglecting other important factors which, based on context, might lead to failing user interfaces.

Annotate webprojects

Use These 9 Great Scripts For Better Web Typography. #5 Is Awesome

web-typography

As someone who got started in the industry when creating transparent gifs (yes, gifs, not png’s) as headlines was still okay it’s amazing to see how far web typography has come.

Here are some great JavaScripts that will take your web typography one step further.

Hope you enjoy (and use) ’em!

1. FlowType.js

http://simplefocus.com/flowtype/
This is a great script that lets assures you that your typography will be legible (45 and 75 characters per line) all the time.
If you tried to ensure this, you know that doing it using only CSS media-queries is hard.
FlowType.JS eases this difficulty by changing the font-size and the line-height based on a specific element’s width. Allowing for a near-perfect character count per line at any screen width! Recommended!

2. Responsive Measure

http://jbrewer.github.io/Responsive-Measure/
This is another great (and simple script) which will generate the ideal font size “needed to produce the ideal measure for texts”.

3. Fittext.js

http://fittextjs.com/
MOAR FAT HEADLINES! This is the perfect plugin to achieve scalable headlines that fill the width of a parent element. Awesome for headlines. You should try it!

4. Font-To-Width

http://font-to-width.com/
Font‑To‑Width (FTW!) :-) takes advantage of large type families to fit pieces of text snugly within their containers. Not to be mistaken for the above-mentioned FitText.js, Font‑To‑Width does not scale the font-size. Nope, it “chooses a width or weight variant according to what fits best, and then allows for letter- and word-spacing adjustments as needed”. Great example on their webpage.

5. slabText

http://freqdec.github.io/slabText/
This nifty little script splits headlines into rows before resizing each row to fill the available horizontal space. Makes things look great. Bonus points for using legendary reggae icons in the placeholder texts!

6. Typeplate

http://typeplate.com/
Typeplate is what you might call a “typographic starter kit”. It lets you “define proper markup with extensible styling for common typographic patterns”. Great stuff!

9 insanely useful scripts for better web typography

7. Widowtamer

https://github.com/nathanford/widowtamer
This is a Javascript that automatically fixes typographic widows on your web pages. Yes! A must-use tool for any serious web typographer

8. Texttailor.js

http://jpntex.com/texttailor/
Responsive text to fill the height of the parent element or ellipse it when it doesn’t fit. Check it out!

9. Responsive sidenotes

http://johndjameson.com/blog/responsive-sidenotes/
Let your sidenotes become footnotes and vice-versa. God is in the details.

Annotate webprojects

Why You’re Not Getting Paid On Time (And How To Make Sure You Do)

make-it-rain-cat

Web designers who run profitable web agencies do one thing better than others:

They make sure they get paid on time. In each and every project.

So what’s the secret?

They are capable of putting themselves inside the heads of their clients and they have understood that their clients are business owners. Just like them.

They’ve also learned from their mistakes and have systems in place that makes sure they communicate as clear as possible. All to make sure they get paid on time.

If you’re constantly getting paid late, there are some things you can do today to better the situations.

Let’s jump right in:

Read More

Free Resources For Web Designers

Believe it or not, we’re actually approaching 40+ published articles on the Juntoo blog! Woohoo!

But even more awesome is having a lot of new readers! Double Woohoo!

So for all you new people we just wanted invite you to check out these free resources for web designers and web developers:

thumbnail-present-web-designHow To Present Web Design
thumbnail-email-courseHow To Calculate Your Hourly Rate
thumbnail-ux-checklistUX Checklist For Web Projects
thumbnail-juntooAnnotations For Web Designers & Devs

Take care!

Why Focusing On Building Trust With New Clients Is The First Thing You Should Do When Starting New Projects

Building trust with clients

The best web designers understand that if they want a project to succeed, they need to involve their clients in the design process.

Why?

Because your client sits on critical insights that will help you help them. Duh.

If you don’t leverage that information you’re making a huge mistake.

But here’s the deal:

If you don’t involve your client correctly things can go south very fast.

So the question is,  how can you avoid having a client that intervenes and dictates how you should do your job?

You build trust.

Before we explore ways to build trust with your clients let’s first explore why:

  • This project might be their first web project so they’re super excited because they’ve waited for years for this project to start and they can’t wait to “collaborate on design”.
  • Or they’re scared shitless because they just handed you one year of savings and put (part) of their business in your hands.
  • Or they might have their boss breathing down their neck wondering “how is the project going? When can I see something?”

So basically you need to help them relax. You need to reassure them that hiring you was a good choice.

More importantly:

You need to clearly communicate to them that they need to let you do what you do in the way you know how.

The best way to start off good is explaining your design process before starting the project. We’ve already published a guide on that here so I’m not going to explain that much more here.

But what you can do to build more trust during a project?

Here are a couple of things you can do:

  • Clearly explain that you need more information. Sometimes this can be tricky because the client might feel like they’re giving you a bit too much information (if so, just sign an NDA). But this is an excellent way to build trust. It shows your client that you’re genuinely interested in their business and its success.
  • Another great thing that will help you build trust is that when you present design milestones tell your clients what you will show and how long it will take. Clearly state that you any discussions will happen afterwards.

tweet-this-button-trust-building

Sounds a bit harsh? Maybe.

But it will help you to clearly establish yourself as the design professional in the room which in turn helps you build trust.

I hate to be repetitive but think about it:

Building trust is probably the most important thing you can do to start off on a good foot with a new client.

So let’s talk about one more trust building tactic:

Get your client to work for you. Yes really.

Tell your client that your design process requires them to participate.

To get started, here’s an initial list of things you expect them to do:

  • Provide all agreed-upon assets on time
  • Project manage their side of the project
  • Consolidate project feedback from one person (ie feedback should not be communicated by committee)
  • Respect deadlines

The third point is especially important because the majority of delayed projects is actually because designers have to wait too long for feedback.  That’s why it’s so important that you make sure that you expect that will receive design feedback from one person.

tweet-this-button-trust-building

Annotate webprojects

30 Web Design Podcasts That Will Help You Become A Better Designer

Here’s the deal:

I love podcasts! :-)

I especially love web design podcasts where heavyweight web pros reveal how they run their web agencies.

I thought I’d list a few of my favorites.

30 is a few right?… :-)

Hope you find some to enjoy and learn from:

Web design podcast

1. Design Details

A weekly show about the people who design our favorite products.

Web design podcast

2. Design Review

A weekly podcast about products from a unique designer perspective!

Web design podcast

3. This is Product Management

Interviews with brilliant minds across the numerous disciplines that fuel the modern product manager.

Web design podcast

4. Developer Tea

A podcast for web and software developers hosted by a developer and which covers a wide variety of topics related to the career of being a developer.

Web design podcast

5. Narwhals

A podcast about design, development, business, family and fun.

Web design podcast

6. Full Stack Radio

A podcast for developers interested in building great software products. Everything from product design and user experience to unit testing.

Web design podcast

7. Tentative

A podcast about digital product design, hosted by thoughtbot designers Reda Lemeden & Kyle Fiedler.

tweet-this-button-podcasts

Web design podcast

8. Hustle

Discussions around building company culture, doing business, client experience, product design, process and crafting meaningful products.

Web design podcast

9. Style Guide Podcast

A small batch podcast dedicated to talking about style guides, pattern libraries and building effective interface systems.

Web design podcast

10. Let’s Make Mistakes

Mike and Jessie talk about design, with a lot of tangents along the way.

Web design podcast

11. The Big Web Show

The Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology & more.

Web design podcast

12. The Change Log

Open source moves fast. Keep up.

Web design podcast

13. BizCraft

The podcast about the business side of web design

Web design podcast

14. The BoagWorld Podcast

A web design podcast for all those involved in designing, developing or running a website on a daily basis.

Web design podcast

15. Web Design Agency Podcast

Learn how to make more money from your business, work fewer hours and have a little bit of fun while doing so

Web design podcast

16. Build Phase

A weekly technical podcast discussing iOS development and design

Web design podcast

17. The Bike Shed

The Bike Shed, hosted by Sean Griffin and Derek Prior, is a biweekly show discussing thoughtbot’s experiences in web development

Web design podcast

18. A Responsive Web Design Podcast

A podcast from Karen McGrane and Ethan Marcotte, who interview people who make responsive designs happen.

Web design podcast

19. The Web Ahead

Conversations with world experts on changing technologies and future of the web. The Web Ahead is your shortcut to keeping up.

Web design podcast

20. ShopTalk

ShopTalk is a podcast about front-end web design, development and UX.

Web design podcast

21. The Businessology Show

A podcast about the business of design, and the design of business.

Web design podcast

22. Design Matters

A thought-provoking podcast, which profiles industry-leading graphic designers, change agents, artists, writers and educators.

Web design podcast

23. On the Grid

Thinking out loud about design weekly.

tweet-this-button-podcasts

Web design podcast

24. The Dirt

Pugilistic UX at its best.

Web design podcast

25. Creative Briefs

A podcast for designers and others in creative professions focused on what inspires and motivates others in their field.

Web design podcast

26. IDEO Futures

Where entrepreneurship meets design

Web design podcast

27. Ctrl+Click Cast

Featuring diverse voices from the industry’s leaders and innovators, who tackle everything from design, code and content management systems, to culture and business challenges.

Web design podcast

28. 99% Invisible

A weekly exploration of the process and power of design and architecture.

Web design podcast

29. Giant Robots Smashing into other Giant Robots

A weekly technical podcast discussing development, design, and the business of great products

Web design podcast

30. Unfinished Business

A weekly discussion show about the business end of being a web designer.

tweet-this-button-podcasts

Annotate webprojects

Why sharing personal work is so scary (and what I’m doing about it)

When you:

build a product, design a personal website, write a book, etc…

… you eventually have to tell the world about it.

But telling the world about something you created can be the scariest thing.
In fact, a lot of creative people fear sharing their work.

Here’s why:

  1. They fear sharing work that is not perfect.
  2. They fear rejection.

It’s just so much easier to keep building. Getting to perfect.

Now:

Today I’m sharing something I built with you. And yes I’m scared…

You see at Juntoo  apart from writing articles and creating resources for web designers, we’re building something.

A tool for web designers and web developers.

To be more exact:
We’re building a Chrome extension that lets you annotate specific DOM elements on any webpage.

You can then share those annotations with others so they can view and comment your annotations.

But you know what?

It’s far from perfect! :-)

But the main functionality is there.

And we think it’s pretty cool and potentially a super useful tool for web professionals.

Here’s a 1 min video of Juntoo in action:

Here’s the deal:

If you’re a web professional and you love trying new tools please head over to: juntoo.co and give it a spin.

How to start annotating web projects with Juntoo

1. Go to https://juntoo.co

2. Login and add the Juntoo Chrome extension to Chrome:

login3. With the Juntoo extension installed you can annotate any element on any webpage by clicking the Juntoo extension button to activate annotation-mode:

chrome-button

4. Highlight the element you want to annotate:

hover

 6. Add your annotation:

annotate

7. Save it:

save

All your annotations are saved in your Juntoo dashboard:

dashboard

 

Here’s the URL again: https://juntoo.co

Thanks for trying it out!

Erik

Sign Up Now

Sign up for mailing list and receive new posts directly to your inbox.
Juntoo Groups

We promise never to share or sell any of your personal information.

How To Stick-To-It When Running A Web Design Business

Running a web design business

I think you´ll agree with me when I say:

Running a small web design business can be REALLY tough work. Finding new business, getting paid, managing clients, presenting designs etc.

But does it really have to be that much struggle?

There are few things any web design business owner can do to improve their chances of running a business that lasts a long time.

In todays post I´m going to go through three things…three things that any web business can do to add years to their existence.

Read More

The Secret Of Running A Successful Web Design Business

The Secret Of Successful Web Design Businesses

The designers who run successful web design businesses do a couple of things differently than others:

First they make sure they have effective systems in place that helps them run their business as efficiently as possible.

Second, they work with contracts.

Here’s why they work with a contract:

Read More