Baltimore
Menu

Event Recap: Adobe Responsive Design Workshop

Written by
Shannon Crabill
Published
August 7, 2014

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/

Impact Hub is a coworking space on a mission: to bring together a community of entrepreneurs, activists, creatives, and professionals to take collaborative action and drive positive change. With our missions aligned, it’s only natural that AIGA Baltimore has partnered with Impact Hub. Read more about our partnership and a 10% discount on an Impact Hub membership.
March 7, 2016
AIGA Baltimore is calling all designers looking to make in impact in our community! The nation and the world have been focused on Baltimore as we have confronted some of the major issues of our time. In the coming months, we will be working in partnership with the Druid Heights Community Development Corporation and Neighborhood Design Center to develop the community branding for Druid Heights CDC. But we need YOU to do it! AIGA Baltimore is looking for designers, creative and art directors, interactive and UX designers for this initiative. Apply by March 25th to get involved.
March 5, 2016
Alyson Beaton is a successful designer and entrepreneur. For more than a decade, she’s designed and launched several of her own product lines, including Lille Huset, Grow Books Press, and Marketote. For Design Week 2015, Alyson joined us to talk about her experiences as an entrepreneur and designer, and the processes of defining both success and failure.
February 16, 2016
“There is no better designer than nature.” — Alexander McQueen The theme for Earth Day 2016 is “Trees for the Earth” and we will be taking this call to action to the streets of Baltimore. Join AIGA and Park & People as we celebrate Earth Day and enjoy the spring weather by planting trees, pruning, mulching and neighborhood clean-up!
Baltimore · Saturday, April 30, 2016
Designers often talk about the ability of design and design thinking to spark positive change, but it’s just as important to understand how design has been used as a tool to negatively impact culture and community. The Art of Oppression is a new Blend series dedicated to reminding us to view design with a critical eye into the perspective and agenda behind it.
Baltimore · Tuesday, May 10, 2016
Chris DallaVilla is a man on a mission to share the power of data-driven creative solutions with the world. He believes that “with the right data, you can control your destiny” because when data is combined with creativity, technology, and strategic thinking, it drives significant business results. On Thursday, May 19, join AIGA Baltimore at Betamore for an intensive lecture and workshop with award winning designer, developer, and data scientist Chris DallaVilla. Chris will share strategies on how to take marketing to the next level using data and technology, and how to inform the design process using tools and philosophies that span from creative to technical as part of a broader design methodology. This event is perfect for those seeking to use their creative and technical faculties to arrive at the most impactful design solutions.
Baltimore · Thursday, May 19, 2016
Comments
AIGA encourages thoughtful, responsible discourse. Please add comments judiciously, and refrain from maligning any individual, institution or body of work. Read our policy on commenting.

Comments are closed.

LOADING...
Your browser is too old to view this site.

Do yourself a favor and upgrade it to the latest version.