Flexibilität ist das Zauberwort, wenn es um die Entwicklung mobiler Websites geht. Worauf es beim Design für mobile Endgeräte ankommt und wie man damit umgeht beschreibt der Webentwickler Jens Grochtdreis.

In Adobe XD it’s important to illustrate how your layouts are going to behave responsively. Learn how to best use XD’s toolsets to efficiently create responsive design mockups. ► Unlimited Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description Source Files: https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/30/courses/1256/attachment/SourceFiles_ResponsiveDesignInAdobeXD.zip 1. Introduction 0:00 1. 1Responsive Design in Adobe XD 2. Responsive Refresher 0:49 2.1 Responsive Design Is Just Two Things 6:41 2.2 Workflow, Breakpoints, and Do We Still Do “Mobile First”? 3. Responsive Design in Adobe XD 16:18 3.1Quick Overview of What You Can Do in XD • Code-Friendly Design With Adobe XD: https://webdesign.tutsplus.com/courses/code-friendly-design-with-adobe-xd?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description • This Is Adobe XD: https://webdesign.tutsplus.com/courses/this-is-adobe-xd?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description 21:15 3.2 The “Responsive Resize” Function 30:20 3.3 Artboards and Responsiveness 34:27 3.4 Emulating Flexible Width Columns 43:44 3.5 “Repeat Grid” and Responsiveness • Prototyping an App With Adobe XD: https://webdesign.tutsplus.com/courses/prototyping-an-app-with-adobe-xd?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description • Logo: https://elements.envato.com/gear-cloud-logo-template-TR6YKU?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description • Image Placeholder: https://elements.envato.com/1000-image-placeholders-35266F?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description • Social Icons: https://elements.envato.com/40-social-media-icons-G6RA8Q?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description 52:14 3.6 Handling Text 57:20 3.7 Create a Max-Width Artboard 4. Breakpoint Artboards 59:34 4.1 Creating Breakpoint Artboards 1:03:07 4.2 1000px Breakpoint 1:06:28 4.3 900px Breakpoint 1:10:21 4.4 700px Breakpoint 1:14:51 4.5 500px Breakpoint 1:17:48 4.6 400px Breakpoint 1:20:47 4.7 Smallest Breakpoint 5. Conclusion 1:24:42 5.1 Device-Specific Artboards 1:28:18 5.2 Wrapping Up ► Want to learn Adobe XD? Check out our new free course Adobe XD for Beginners: https://youtu.be/WEljsc2jorI - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Envato Tuts+ Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description ► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus ► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus ► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus Envato Elements All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes: https://elements.envato.com/?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description adobe xd responsive design

A handy article on Vertical Rhythm and Modular Scale with Viewport Units.

Grids serve well to divide up a predefined canvas and guide how content fits onto a page, but when designing for the web’s fluid nature, we need something more responsive. Enter ratios, which archi…

Create atomic design ( http://bradfrost.com/blog/post/atomic-web-design/ ) systems with Pattern Lab.

Quickly generate cross-platform application ideas. Brainstorm breakpoints and get a handle on how a website might translate to mobile and tablet versions. This pad has 2 device silhouettes on the front and 3 on the back.  Features:- Printing on both sides- Dot grid, 150 PPI- Letter size- Project Name, Screen, Date & Note fields- 50 sheets, 110g/m² paper- Cardboard back- Rounded bottom two corners- 100% Recyclable This pad works with our website stencil and pixel ruler (sold separately).

Responsive Design Sketchbook

A Professional Responsive WordPress Portfolio Theme | ThemeZilla

This calculator tells you how to scale graphics between four density groups—perfect for building out applications across different devices.

I’m Ethan Marcotte. I’m a web designer, writer, and speaker. This is my website; I’m real glad you’re here.

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of

LukeW Ideation + Design provides resources for mobile and Web product design and strategy including presentations, workshops, articles, books and more on usability, interaction design and visual design.

by Brad Frost, Smashing Conference 2012

LukeW Ideation + Design provides resources for mobile and Web product design and strategy including presentations, workshops, articles, books and more on usability, interaction design and visual design.

Responsive Layouts for Email

David Bushell – Freelance Web Design (UK)

Responsive Web design has been evolving rapidly ever since Ethan Marcotte coined the term two years ago. Since then, techniques have emerged, become best practices and formed part of our ever-changing methodology. A few obvious examples are the multitude of responsive image techniques, conditional loading, and responsive design and server-side components (RESS), among many other existing and emerging strands stemming from the core concept of responsive Web design.

Show off how responsive design looks across different browsers easily with this 4 in 1 viewport tool. See how your site looks on desktop, laptop, ipad & iphone.

A Bold Responsive WordPress Portfolio Theme by ThemeZilla/Orman Clark

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of

The varying viewports that our websites encounter on a daily basis continue to demand more from responsive design. Not only must we continue to tackle the issues of content choreography — the art of maintaining order and context throughout the chaotic ebb and flow of the Web browser — but we must also **meet the expectations of users**.

Preview your site at random page widths to test your Responsive design.

Helping People Make Mobile Web Experiences