How to design responsive websites

How to design responsive websites

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.

McDonalds in France displays a Store locator on the home page of the mobile website. The Desktop version features information about the latest burger campaign.

McDonald’s in France displays a store locator on the home page of the mobile website. The desktop version features information about the latest burger campaign.

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:

  1.  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.
  2. 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

Three layouts for the same page. The number of columns varies, and the menu disappears in the mobile version.

Three layouts for the same page. The number of columns varies, and the menu disappears in the mobile version.

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

Style your elements without knowing CSS

Style your elements without knowing CSS

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.

layouts

Create advanced and responsive layouts

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.

Click on the image to preview a prototype in your browser created with Edge Reflow.

Click on the image to preview a prototype in your browser created with Edge Reflow.

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.

Select an element and export the CSS properties (including the CSS Media Queries)

Select an element and export the CSS properties (including the CSS Media Queries)

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

Preview your page, as you design, on several devices thanks to Edge Inspect CC.

Preview your page, as you design, on several devices thanks to Edge Inspect CC.

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

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

4 Comments

  1. This may sound like a stupid comment, but since I am not a web designer and came across your website after finding one of your videos on youtube about Adobe Muse, I had a look around and found this article about Edge Reflow.

    I just created my website on Muse, but would love to convert it to a responsive layout. So, here is the question. Once i finish at Edge Reflow, extract the CSS, can i integrate it to my muse template? Since Reflow does not offer the HTML, I was wondering how it could be done.

    Thank you, and love your website, very informative.
    Since I have a project called Tattooist Art e-Mag, which is a multi lingual tattoo publication, I also found out about adobe publishing program that you used on your digital publication. Already sent an enquire regarding the enterprise edition. Once again, thank you. Surely following your website now :)

  2. This doesn’t work with Photoshop CS6—only CC. So I’m out of the loop on this one :(

Trackbacks/Pingbacks

  1. How to design responsive websites | Creative droplets | inLine Media RSS Blog - […] Read this article: How to design responsive websites | Creative droplets […]

Submit a Comment

Your email address will not be published. Required fields are marked *