Feb. 22, 2017 | Lesson 3 (Photoshop CC for Web Design)

In this lesson of Photoshop CC for Web Design I learned more about responsive design with just a brief overview of how it affects web design workflow in Photoshop. This is important because our content is being consumed on literally thousands of devices. All of which are capable of producing a rich web experience.

Now, there are three basic ways to design a responsive website today.

Capture1

The first is somethings called a fluid site, which means the entire site is based off of a percentage, and simply scales itself down as the window the browser decreases and scales back up as it increases. While this is okay for some science, it doesn’t necessarily do much to tailor the user experience.

Second, there’s adaptive web design, which targets specific devices like iPhones, and Kindles by using something in CSS called a media query. This makes it easy to display your site in a uniquely tailored way to a variety of different devices. An obvious problem with this is that not every device uses a standard iPhone or Kindle sized screen and therefore you might not be able to cover the full spectrum of devices that visit your site.

The best solution is the final one on this list, which is the topic of this lesson. Responsive design is based on a fluid grid, which can adapt itself based on the view port of the browser.

As a designer you have the choice of whether or not to design the website using “progressive enhancement” or “graceful degradation.” What this means is that in progressive enhancement you start by designing the mobile site first and then progress to larger screen sizes: tablets, desktops, etc. This allows you to add more relevant content and aesthetics to increase the usability on those devices.

With graceful degradation the opposite is true. You start with the full-on desktop experience first and then you will gradually create comps that take away and rearrange content so that the site is easily navigated on smaller screens like tablets and phones.

Both of these are useful ways to design a website, but the biggest question that comes from this is “How should this affect my work in Photoshop?”

Capture2

At the end of the day, this is all about user experience. Responsive design helps you create a better experience for your clients and their clients.

One of the biggest decisions you’ll have to make when designing a responsive website is what breakpoints will be needed to use for your content on different devices. An important question to ask is “What screen sizes am I targeting?” To know this, you need to know if you’re using adaptive or responsive web design. Though both work on a basis of screen size, the differ in how they come to those sizes. Adaptive for instance targets specific devices. Whereas responsive simply targets different dimensions that are device agnostic.

Her are some common adaptive breakpoints for devices:

Capture3

Below is a much simpler list of breakpoints for Responsive design that can be fit into three different categories:

Capture4

The problem with using these cookie-cutter breakpoints though, is that it degrades the content experience and these sizes are really hard to narrow down because devices are constantly changing in size and dimension.

For this reason, perhaps the philosophy to have is to let the content of the website determine the breakpoints. The instructor for this course, Justin Seely, gave and example for his own website that he designed and developed. For his site, he determined his breakpoints based on the content and therefore saw that he had four listed below.

What this means is that if you were to take this website and resize the browser window, something would happen when you get below 1280, something would happen when you get to 592 and something would happen when get to 480.

Finding out where your breakpoints are for your website can be easier to do on your own if you also know how to do the coding for it. Otherwise, it is best to partner closely with a developer to help analyze your content and understand exactly what it’s going to look like at each individual screen size.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s