AIGA Baltimore’s Adobe Edge workshop wasn’t just about the tools we have at our disposal; it was also about the process of designing responsively. Most of us in attendance were designers who happen to code but that wasn’t our specialty, so Brian Wood, our guest lecturer, went over plenty of web basics to catch us up.

The Tools

Brian worked for Adobe for 13 years and now spends more time doing what he loves most: lecturing about web design, including Adobe’s own suite of development tools for designing, coding, and testing responsive design. The suite includes:

• Edge Animate – Useful for making animations, web banners, etc. using HTML, CSS, and JavaScript. Interactive elements can be built using Edge Animate; however, it’s not meant for building an entire site.
• Edge Reflow – Used for rapid prototyping and visually showing responsive elements.
• Edge Code – A simple, text-only code editor, similar to Sublime Text.
• Edge Inspect – Built for testing on actual devices in real time via an app on your device (tablet, phone, etc.) and a Chrome plug-in. A local or live site can be mirrored on each device on same network.
• Edge Web Fonts / Typekit – Hosted fonts that are free with an Adobe Creative Cloud subscription.

Additionally, we had access to free web fonts available outside of a Creative Cloud subscription, such as Google fonts.

What is Responsive Design?

Mark Boulton, whose design studio created the Gridset responsive layout tool, says, “It’s making sure your layout doesn’t look like crap on different sized screens.”

Responsive design, also called mobile optimization, refers to a website that is viewed on various devices without degradation in user experience. There are two main types of responsive design. The first is based on overall screen percentages, called a liquid layout. The second uses liquid in conjunction with breakpoints (or media queries) to force elements to adjust at specific points based on the size of the browser or viewport window.

Responsive design differs from adaptive layouts where the widths are static, or set, and media queries are used to establish breakpoints that adjust the layout where it starts to fall apart. For more information, check out the great resources at the end of this article.

Let’s Get Started

It used to be that a web designer would build a mockup of a website in Photoshop, show it to the client for approval, send it to development, and bam! we’re done. Now, the job is generally more difficult because there’s so much more to consider when building a responsive website, not to mention many designers are expected to take on the front-end development themselves.

One of the first steps we can take when designing a responsive site is to decide if we should start a design for mobile first or desktops. Looking into the analytics for a client can be helpful in determining which direction to start, but when working with Reflow, it doesn’t really matter because at the end of the Photoshop design process, the mockup can be plugged directly into Reflow, which will do the hard work for you. While it’s possible to start from scratch in Reflow, the connection with Photoshop is the power behind the program.

Also, it’s always a good idea to see what everyone else is doing before beginning the design. Learn from the experts. Compare notes. Be awesome.

Best Practices in Photoshop

The client-specific devices you’re supporting are tailored to fit their needs. The size ranges, or device map, dictates your initial wireframe and document setup.

Using a grid is key in developing a clean responsive site mockup. Not only does designing in a grid make it easy to keep elements aligned and balanced, but developers also often use grid frameworks. If you know you’ll be working with a developer, ask what grid they’re using. Knowing this and designing with it in mind can minimize how much of your layout your developer has to fix during production, which ultimately gives you control over your design.

While it is possible to manually create a grid by dragging and measuring guides in Photoshop, there are plug-ins available that will speed up the process. Check out the reference section below to find those.

If you design for mobile first, the term “above the fold” may come to mind when scaling up proportionately for the desktop. While this still matters somewhat, modern audiences know to scroll down, so don’t sacrifice too much based on print design principles.

You will want to use vector objects for graphics because, when moving your design into Reflow, a vector object allows for scalability while a raster object does not. Also, Smart Objects should also be used for editing images so the process can be as non-destructive as possible. Since you’re designing for big and small devices, images should always be bigger than you need. SVG is the recommended format for saving logos. It works in most browsers, it allows for the logo to scale, and it can easily fallback to a PNG should the browser not support an SVG.

Moving into Reflow

Reflow is a very visual program with five simple tools: Move, Shape, Text, Image, and Form.

The program looks at your layer order in Photoshop to determine where elements fall within the HTML document, so remember to place the elements for the top of design at the top of the Photoshop layers.

Overall, we found that Reflow does a really good job of developing code based on the Photoshop document, but minor tweaks were still needed. While moving and editing elements, Reflow updates the HTML and CSS as needed and in the end, all code can be exported to a code editor for additional fine-tuning. There are no semantics, as classes in the HTML and CSS code are created based on layer names and not HTML attributes like <h1> or <p>.

Fixing our Design in Reflow / Using Media Queries

Once you’ve decided what direction you’re designing for (mobile vs. desktop), it’s time to start setting up breakpoints in Reflow. Developers used to code for three breakpoints, but now not only are there many more devices and sizes to compare to, but we should also consider breakpoints based on the size of the viewer’s current browser window to make sure the design doesn’t fall apart at any size.

When making a change to the layout in Reflow, you’ll either need to be in a specific breakpoint or add a new breakpoint. Otherwise, the changes may only apply to the default breakpoint, which controls the global style for all devices.

Within Reflow, all elements are arranged using margins and all items are floated left by default. Understanding this, we can keep a consistent visual experience by using the control panel on the left in conjunction with our breakpoints, telling the elements when and how to change. This includes changing percentage widths for the horizontal layout elements, where to add or remove columns, and when to show or hide elements.

Wrap Up

Although Brian was only able to scratch the surface of what Reflow can do, through this workshop I was pleasantly surprised to learn how far forward Adobe Edge has come in recent years. Not only can Reflow speed up the production and prototyping phase, but its ties with Photoshop allows us—the designers—to stay in control of our designs and how they render across devices. In turn, this allows us to work out usability, legibility or breakpoint issues before our project is handed over to our developer. Alternatively, in the case that we, the designers, are also the developers, Reflow has already done the bulk of the hard work for us.

Responsive Design References

http://alistapart.com/article/responsive-web-design/
– The article that started what we now know as responsive design

http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
– What The Heck Is Responsive Web Design?

http://mediaqueri.es/
– Inspirational gallery featuring responsive websites at various screen and device sizes

http://viljamis.com/blog/2012/responsive-workflow/device-map-2012.pdf
– A sample device map

http://gs.statcounter.com/
– Statistics showing what device resolutions (and more) are using the web

http://www.getskeleton.com/
– A common web developer boilerplate that includes a grid system for mobile and desktop

Photoshop Guide References

http://guideguide.me/
– Plug in for Photoshop that makes creating grid systems easy

http://gridpak.com/
– Responsive grid generator that includes a grid CSS file and PNG’s for use in Photoshop

Shannon Crabill is a New Media Specialist at T. Rowe Price. She has a love for social media, tech, all things do-it-yourself, baking, coffee and the occasional cringe-worthy pun. Check out her work at http://shannoncrabill.com/