Responsive web design basics

16 Nov 2016
  • posted by Veerle Pieters

Just recently Adobe released the new Adobe CC 2017 updates and part of that was a completely new Dreamweaver that includes an all-new code engine, completely refreshed user interface with selectable dark themes, support for modern web workflows such as CSS Preprocessors, and more. More after the jump…

Adobe Dreamweaver CC 2017

The new Adobe Dreamweaver CC 2017 has been reimagined from the ground up taking clues from Brackets, their modern open source text editor. I've been a Dreamweaver user in the past but moved on when things started to evolve and Dreamweaver couldn't keep up. I must say that I am pleasantly surprised with this new version. There are a lot of good things in there that make me want to give it go. If you are curious like me on how the CSS Preprocessors work in Dreamweaver, here's a page that explains it in detail. One of the best ways to see what is possible with the new Dreamweaver CC 2017 release is by following a tutorial. A step-by-step walkthrough on how to create a responsive design. I've watched all videos and honestly Daniel Walter Scott did a wonderful job. It's worth following along, even if all this sounds new to you.

Responsive web design basics

Explore different design techniques for displaying content across mobile, tablet, and desktop browsers before you dive in to Adobe Dreamweaver to write the actual code.

Create a responsive menu

Style the menu to make it easy for visitors to navigate your site on any type of device — mobile, tablet, or desktop. Here's the link to the files you'll need for this tutorial (ZIP, 49MB).

1. Create a menu structure

See why a mobile-first approach to web design is a good idea. Define a site to manage your files and assets, and then use HTML to create a header section that includes the logo and basic structure of your navigation.

2. Style the menu for mobile

As of now, the main menu is a bulleted list with purple text. Let’s style it with CSS and adjust the layout for mobile screens.

3. Style the menu for tablet and desktop

The menu layout will be different across mobile, tablet, and desktop screens. Find out how to use CSS media queries to change the layout for different devices. As a bonus, see how you can do real-time design while previewing on an actual device.

Create a responsive grid layout

Define a responsive grid layout that allows the contents of your web page to scale across devices. Here's the link to the files you'll need for this tutorial (ZIP, 62MB).

1. Style the header image and text

Dig deeper into HTML and CSS to organize your content into a grid of rows and columns that begins with a striking header image and engaging text.

2. Style text and image content

Every web page needs text and images to convey a message. With the grid structure in place, now add and organize the rest of your web page content — text, images, color, and a footer.

3. Finish the responsive design

The web design looks great on mobile devices, now let’s use CSS media queries to ensure your layout automatically adjusts when viewed on tablet and desktop screens. Once you’re done, that’s it — you have successfully created a responsive web page in Dreamweaver.