Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Being a web designer is more than just creating designs. One must also have an awareness of special considerations beyond two dimensional design. The first concept will examine in this section on foundational topics and web design is CSS for responsive web. You may have already heard the terms 'mobile-first' and 'responsive web' in relation to web design. These concepts promote the idea of designing for smaller devices before desktop computers as well as creating website layouts that adjust when viewed on different devices.
Thus, today's designer must now design responsive websites that adapt to fit the view ports of a variety of devices. At the heart of a responsive web design is a set of custom CSS styles specifically created for different size devices. For instance, we've got smart phones, tablets and touch computers, laptops and ultrabooks, desktops, and internet-ready TVs as well as gaming devices. There are many different ways to construct a responsive website.
For instance, you can develop it using Adobe Dreamweaver's fluid grid layout shown here. Or you can build it from scratch using something like Twitter Bootstrap. At their cores, each of these methods relies on HTML5, CSS3 and Media queries which hide and show content by device. For example, the main content block might require four separate CSS styles, one each for the desktop. Tablet, mobile portrait and mobile landscape.
In most cases, you begin by building the mobile version first and then scaling up for tablets and then desktop displays. Typically, in a responsive layout, all the images and text will scale, navigation buttons will shrink or change format. And the number of columns will expand or collapse as needed. To see how a responsive website works, view any responsive website in a browser and then shrink the browser window to approximate the size of a tablet and then a smart phone.
So, that's roughly tablet size. And you can see how things are shifting. And linearizing. We can go really narrow, like so. As you can see, the content reflows to fit the different viewports. lynda.com offers several courses in responsive web design including Creating a Responsive Web Design, Responsive Design Fundamentals, Applied Responsive Design, and Up and Running with Bootstrap. You can also find additional popular training on responsive design from lynda.com on their website.
One of the reasons responsive design is more challenging than traditional fix with design, is that you must now consider how the site will be viewed on different devices. If you can conceive of this flexible adaptive space during the design phase of a project. You can save yourself a lot of time and frustration when you begin to build your responsive website.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 50941 Viewers
117 Video lessons · 38674 Viewers
113 Video lessons · 81570 Viewers
65 Video lessons · 11589 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.