Responsive Web Design + Development: Insights from Instructor Carl Olsen

By Samantha Bragg, Events Intern

Web design encompasses a broad range of topics and skills. One popular approach to web design is responsive web development, which provides an optimal viewing experience for users across multiple devices, including mobile and desktop computers. Our upcoming short-form course will help you learn the best practices and tools behind responsive design. Check out my interview with instructor, Carl Olsen, senior software engineer at E-Moxie, for more information about responsive web design and what the course will cover.

What is the difference between Responsive and Mobile Design?

Generally the difference is that mobile designs are limited to a much smaller range of display sizes so they have different design conventions more appropriate for smaller screens and touch interfaces. A html/css design intended for desktop only or mobile only is much simpler to make.

Do you think that there is a common misunderstanding or misuse of these terms?

I think most people are familiar with using websites on their desktop and using websites on their phone/tablet but have no idea how the layout adjusts itself to accommodate the smaller screen (if it is a responsive layout). Many people I have encountered think of responsive design as a magic bullet to fix all platform use problems. It does solve the problem of screen size variation, but there are UX aspects to consider.

What are the most common roadblocks or challenges in Responsive Web Development?

Many of my clients develop their content last. They expect a website layout with areas to be filled with content later. It is difficult to develop a layout to best display content you do not have yet.

The number of web development tools can be overwhelming. In your mind, what are the most essential for new developers?

What do you mean by tools exactly?

Maybe tool isn’t the right word – methodologies / frameworks / approaches to web development. For example, you can download “developer tools” from the app store. If you are new to this field, what’s the way to go?

Everyone learns differently. There isn’t a good answer to this that applies to everyone. I recommend a strong understanding of the basics. HTML, CSS, JS etc. I have encountered a lot of developers that are very familiar with specific frameworks or libraries but do not understand exactly what these tools are doing, or why they are designed the way they are.

For the front end a lot of people get started using a framework like bootstrap or foundation. This is a good way to start for most, you get very fast results and a good idea of what it is like to do front end development. Knowing how and why the features of a framework are the way they are is required when developing larger or more complex projects. If you are a carpenter, you should be familiar with a hammer not just a nail gun.

It seems like RWD is the way to go when it comes to developing websites, are there any disadvantages or limitations to this practice?

Generally RWD is the best practice for most projects. The biggest downside is usually performance. You need assets (css, js, images etc) that will be used by desktop and mobile. There are some tricks to limit loading elements not used by the user’s current screen size but not many. The bigger the difference in the content used between layout sizes the more this becomes a problem. It is also a lot more work than having just one layout.

When is it essential to have a responsive site, rather than a perk?

Like everything else it depends on your audience. In most cases, you will have around half your audience on mobile/tablet. But it can vary a lot from project to project. It becomes essential as soon as enough of your audience would use it to justify the cost, provided you can get by without your mobile/tablet layouts being drastically different in content/purpose from your desktop site/layout.

If you could offer a single piece of advice around RWD, what would it be?

Learn to use Less or Sass

Will they be covered in the course?

The advanced topics we cover have not been decided upon yet. I want to meet the students and see what their current experience level is and what they are interested in learning in depth. Both are on my list of possibilities though.

 

Keep an eye on our calendar to see Carl in action at our Responsive Web Design and Development short-form course! Details coming soon.

 

Sign up for our weekly list of classes & events: