Web designers must embrace Responsive Web Design (RWD), but it’s not easy. In this article, I explain how traditional web designers who are used to Photoshop can transition to RWD thanks to Edge Reflow. Both tools are available in the Adobe Creative Cloud. To summarize my thoughts, I’ve recorded a 5-minute video (for people who don’t like to read :)).
My Video for Web Designers
This video introduces the role of the Adobe Creative Cloud for web designers who want to embrace Responsive Web Design. I invite you to watch my video and read my article, which provides more details about this workflow.
The Success of RWD
Responsive Web Design is popular because it enables optimal user experiences across a wide range of devices. Thanks to CSS Media Queries, web developers can define conditional CSS properties to optimize the layout of the web pages based on the screen resolution. All modern web browsers support CSS Media Queries. As the mobile web is growing, all websites need to adopt a mobile strategy. Responsive Web Design has advantages:
- Technically, it’s very easy to learn. Web developers understand the basics of RWD in a minute.
- You maintain one codebase to target several screens.
I won’t tell you that RWD is the best technical answer in all cases. Some brands will prefer to design the richest experience possible for desktop users, and a different one for tablet and mobile devices (optimized for touch). Sometimes, mobile users don’t expect the same content as desktop users. A fast-food chain, for example, will notice that their mobile visitors are trying to locate the closest shop in 90% of the cases. In this particular case, it’s recommended to develop a custom website for mobile users, adding a “store locator” on the home page of the website and leveraging geolocation.
Nevertheless, if you want to display approximately the same level of information to all your users, then RWD should be the best approach. This is still a fairly new trend and I know that a lot of designers and developers will continue to debate it. In the meantime, more and more customers want responsive websites and we can’t fight against it.
RWD and Challenges for Web Designers
If you design a new website, you need to consider the mobile users and Responsive Web Design. Web designers used to create one single layout per page. With RWD, they have to create several layouts and this new constraint raises several challenges:
- The deliverables: Web designers produce static pages to sell the concept to their customers. Then, they need to share their work with web developers who will transform their design into a classic website with HTML, CSS, and JS.
- The breakpoints: Media Queries should be set when the design “breaks”. But it’s hard to feel a breakpoint when you design static pages in Photoshop. Some web designers define the screen resolutions of their media queries based on some market standards (768 pixels for tablets, 320 for smartphones…), which is a mistake in my opinion. Breakpoints should be defined by the behavior of your design and the information you want to highlight.
To answer these new challenges, some web designers have learned CSS, and now they can build responsive prototypes by themselves. The big majority of designers don’t have this knowledge and continue to design static pages in Photoshop. For the purpose of this article, I’ve designed three different layouts for the same web page: DESKTOP, TABLET, and MOBILE
If I share these files with a customer, he will be able to validate the layouts. He even can open the JPEG on his mobile phone to feel the final experience. This is still an image though: the text is rasterised and everything is pixel-perfect. To get a working prototype in HTML, I’ll have to send these files (and eventually each individual asset) to a web developer. He will use all the classic RWD tricks to get a “fluid” behavior, include real text with web fonts, define the breakpoints, etc… Usually, web designers are disappointed when the first prototype is ready because they identify mistakes that they couldn’t anticipate in Photoshop (bad margins, images cropped on some screens, wrong text size…). This leads to a lot of exchanges between the designer and the developer to polish and finalize the prototype. This workflow can become very time consuming.
Because design is not just about placing elements on the screen and making them visually appealing, web designers must design and control the entire experience. Design is the definition of the optimal experience for the user. Adobe is working a new tool to empower Web designers who want to embrace RWD: Adobe Edge Reflow CC.
Adobe Edge Reflow CC
Edge Reflow targets web designers who need to create responsive layouts without coding. You can also style your pages without knowing CSS, just using the intuitive controls of the Reflow UI. You can style one element of your page, play with the border-radius, drop a shadow, or add a custom border. Finally, you can copy the styles of an element, and paste them on other elements of your page.
You can also create advanced layouts for your pages. Resize your page, look at the default fluid behavior, and when your design breaks, add a breakpoint. It will add a CSS Media Query in the background, and you have the freedom to change some of its properties. Adjust the layout of your page for smaller resolutions, style some elements, and you’ll get a responsive web design.
Once you’re happy with the prototype, you can share it with a customer for approval. Your customer will preview your work directly in a browser. You can even design multiple pages in your project. In HTML preview mode, users can use the header to navigate through your pages. Click here to preview my prototype designed with Edge Reflow.
Once you’re design is approved, you can share your work with a web developer. Web developers can open your project in Reflow CC, select any element on the page and get the CSS properties, including the Media Queries, to code pages that follow your design recommendations.
Designing on Mobile Devices
Edge Reflow together with Edge Inspect (also available in the Creative Cloud) lets you preview in real-time on a device what you’re designing in Reflow. You can even synchronize several tablet and mobile devices, to preview your prototype on a wide range of screens. It’s the best way to notice if your design breaks on some resolutions and if you need to set more Media Queries.
The Role of Photoshop CC
I know that many web designers will continue to design web pages within Photoshop. Web Designers love Photoshop because they can experiment very quickly, playing with layers, text… But the final experience is poor. There is a gap between designing three static pages in Photoshop, and the final Responsive Web Design.
The great news is that the Adobe Reflow team is working on deep integration between Edge Reflow and Photoshop CC, which will provide seamless web design workflow. It will be available very soon in the Creative Cloud. As previewed during Adobe MAX 2013, Photoshop CC will generate all the assets for Edge Reflow CC and create a project. You can watch it here: http://tv.adobe.com/watch/max-2013/a-creative-evolution-creative-tools/?t=1814.955
Download sources and design with Reflow
If you are a web designer, I encourage you to download and try Adobe Reflow. To do so, join the Adobe Creative Cloud for free and access all Adobe applications, including Reflow.
Here is the link to my Reflow project: http://creativedroplets.com/samples/reflow/src/Reflow_project.zip
The link to my Photoshop files: http://creativedroplets.com/samples/reflow/src/Reflow-photoshop.zip