Students gain an awareness of aesthetic and usability concerns specific to responsive web design.
- [Narrator] Being a web designer today is more than just creating designs. One must also have an awareness of the special aesthetics and usability concerns specific to the mobile and responsive web environment. In other words, you'll be designing and developing sites that adapt to fit the view ports of a variety of devices. Now more than ever, web designers must abandon the notion of fixed width designs and instead think modularly. So that any part of the design can be scaled, or stacked and still be aesthetically pleasing .
A lot of that modularity can be achieved by designing upon an underlying grid system, paired with media queries and smart CSS to control images, type and white space. And while you can't be all things to all people on all devices, you can create designs that will adapt acceptably, or fail gracefully. At the heart of a responsive web design is a set of custom CSS styles that are used specifically for different sized devices such as smartphones, tables and touch computers, laptops and ultra books, desktops and even internet-ready TVs and gaming devices.
Since the design must adapt to fit, the designer must pay specific attention to things like element width, the number of columns, font sizes, button sizes, border widths and image sizes. We must think in terms of modularity, stackability, collapsibility, expandability, readability, tap-ability and responsive images. There are many different ways to construct a responsive web site. For instance, you can build it from scratch using Twitter Bootstrap either inside or outside of Dreamweaver.
One each for the desktop, tablet, mobile portrait and mobile landscape. In most, but not all cases the designer begins by building the mobile version first and then scaling up for tablets and then desktop displays. Generally, in a responsive layout, most of the images and text will scale, navigation buttons will shrink or change format and the number of columns will expand or collapse as needed. Of course, you don't have to do the design at the same time as you are developing the site.
You can certainly create a mock-up before you begin development to guide you in crafting the pages and the corresponding CSS. Quick word of advice, if you do decide to develop a responsive site within a CMS with a starter theme, bear in mind that the web design doesn't stop with choosing the theme. You must still make design choices, customize the look of the site to your client's needs, advise your client regarding the content decisions and how they fit into the design. And try to be innovative within the limitations that the theme provides you as a designer.
Be sure to test on multiple browsers, devices and operating systems and make corrections as needed, such as adding new break points in your CSS, for smoother responsive transitions. Strive to think like the user when creating your designs. Are the buttons large enough? Can you read the text? Does the organization of content make sense? Is the navigation easily accessible and easy to use? Can visitors share content? Is anything missing? There are several courses in the library on responsive web design including, 'Creating a Responsive Web Design: Advanced Techniques', 'Responsive Design Fundamentals', 'Applied Responsive Design' and 'Up and Running with Bootstrap 2'.
Keep these techniques in mind and you'll be on your way to designing responsive websites that look great on all devices.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices