The Difference Between Mobile Web Design and Mobile Responsive

Mobile Responsive and Mobile Web Design are not the Same Thing

When I built my first website, mobile devices were phones and nothing else. They didn’t have screens or have the capability of browsing websites. Building websites was easier. If you wanted a certain element in a certain place you just put it there and didn’t worry about “design.” Maybe it made sense. Maybe it didn’t.

The internet was an ugly place. There were so many novices that design wasn’t even considered until around 2003…or at least I didn’t.

I finally committed to my career in digital marketing, web development and design, and built my next website in 2011 and it is still online today. I used what I had learned from Microsoft Front Page and built the buttons as images instead of using code. It is still kind of cool (for a first website) but it lacks a lot. The website wasn’t mobile-responsive or mobile-designed. It also didn’t work with search engines well.

I discovered WordPress because it filled these two gaps, it is mobile-responsive and it is search engine friendly. Done and done. At least that is what I thought.

Mobile Responsive vs. Mobile-Designed

I got involved with StudioPress themes in 2012 and I consider myself lucky. The themes look great out-of-the-box and are already mobile responsive. They are also mobile-designed but I didn’t do the designing. Like I said, they look and function great out-of-the-box. In 2015, I went pro and built my first WordPress theme from scratch. It was from a course with very little focus on media queries and mobile design. I installed Bootstrap even though I didn’t use any of the Bootstrap div classes. It seemed to work.

In 2018, I became more successful as a developer and started working with clients who were bringing me their own designs for WordPress. They had elaborate designs and were very artsy. After completion, I noticed that some of them (I admit) looked terrible on mobile. The recurring discussion was mobile design should be automatic. One of the beauties of WordPress is that mobile responsiveness is somewhat automatic but mobile web design is not.

So what is the difference between “mobile responsive” and “mobile designed?”

Mobile Responsive is Automatic…Somewhat

Remember my first website? I built it and there are not any media queries, Bootstrap, Foundation or any other mobile-responsive framework built in. Mobile browsers have also come a long way since 2012. Chrome for my phone offers to open the site in a simplified view, in which the code on the browser sorts the code as the browser sees fit.

Mobile Design is Intentional

When a site is designed for mobile, the elements are in certain places because the designer and developer put them there. Hopefully, the thought processes were in keeping with research of how people buy digitally or how respond to different websites and make decisions.

How I Design for Mobile and Desktop

My favorite new design tool is Adobe XD. It’s free but, if you don’t have a background in Photoshop or Illustrator, it is a lot more difficult to pick up.

I can keep different artboards for various screen sizes on my monitor at the same time. There are a ton of goodies that allow for wireframes and mockups to be drawn up quicker than if I were designing in Photoshop and Illustrator.

Adobe XD allows me to see the transitions between screens and combine mobile responsive and mobile design into responsive web design. This is how I design for desktop and mobile when the need arises. Most of the time I am at the development end but I think it’s important for developers to learn more about how websites are designed and vice versa.