Mobile first and responsive design - as a designer not coding | Coursera Community
Coursera Header

Mobile first and responsive design - as a designer not coding

  • 11 September 2019
  • 2 replies

Badge +1
Hi everyone around the globe.
I am looking for information about mobile first design - as a UX designer.
What to be aware of? Which elements move where? What about breakpoint? Everything need to design mobile first sites. How to start sketch a responsive site - on paper.Image sites? Image format?
What is your preferred reference?
There are plenty of courses and books out there, but I have only seen material
" how to create mobile first and respoinsive design as a webdesigner - learn how to code repsonsive sites"

Let me know if you want me to elaborate my question a bit more :-)

/ Thanks

2 replies

In my experience the best multi-platform websites are those that were designed separately for different screens, since not all types of data render themselves equally well to adaptability.

So I'd recommend doing first principles design, so to speak — and instead of designing a laptop-oriented site and then squeezing it to mobile, design a standalone mobile version that shares style, branding and general structure with the "full sized" version, but lives on its own.

And yes, starting with a paper prototype is always a great idea, they're so easy to iterate, I can't get enough of those. Then move on to low fidelity wireframing and the rest you know already.
Userlevel 5
Badge +4
@NAAi One issue that comes to mind is the use of gestures on devices instead of a mouse. Tiny, tiny mobile menus are super hard to tap in the right spot! When designing for small devices, freeing up enough gesture-friendly screen space can mean making difficult decisions about what content to prioritize for mobile view. It's fairly easy to design a responsive brochure-site that works great on all screen sizes. But translating complex desktop designs, for example an e-commerce site, is another matter. It's still pretty typical to have difficult buying experiences via mobile, except for pizza, which I've noticed most of the major chains have got that worked out. But generally, I still don't buy a lot of stuff via mobile because mobile sites for e-commerce aren't yet ubiquitous. I'll browse, but to pay for it, I use desktop to reduce the likelihood that I might tap something incorrectly and end up accidentally buying 15 of something.

It's great if we have the opportunity to design from scratch. But a lot of design work, at least in freelance web design, is redesign. Or optimizing an existing design for different screen sizes. There's so many mom and pop businesses with websites that are not responsive. When owners ask a designer for help because they are worried that maybe they are losing customers because their desktop site looks microscopic on an iPhone SE, they want a solution--just for the mobile issues--but don't necessarily want to spend the money to refresh their desktop site. So then we have to think about how their customers use the site on mobile versus desktop as well as the cost of optimizing for various screen sizes versus doing a truly responsive redesign.

Personally, I'm a big tablet user. I don't like in many cases to be redirected to apps or served up a mobile version of a website. I actually don't mind desktop versions on a full-size or mini tablet, primarily because I tend to use my iPad as a replacement for my desktop, though I think I'm in the minority. However, I'm pretty sure I've seen a report that contained results from a user survey by Usablenet that tablet users expected access to desktop versions of content. But that was probably about 4 years ago, so, you know, it's ancient history.

As to paper prototypes--In the marketing world, I've worked with web designers who have never used them, especially the ones that crossed over to web design from graphic design. They're so quick and fluid with tools like Photoshop that all design versions (other than maybe a quick napkin sketch during a lunch meeting) are completed digitally, I mean like it's their expressive medium of choice, they literally think in Photoshop. Doing design mocks in Photoshop was pretty typical less than ten years ago in bigger ad-houses. So now agile methods have become popular in app design and so paper prototypes and wireframes are being used more in the marketing design. But there's still plenty of design agencies that would never show a client a paper prototype, ever. Those would be only used in-house, and only to the degree that it gets the point across and certain design elements can be agreed upon. It's common to receive an entire website design from a marketing agency for development as a PSD file with a few paragraphs about functionality. I mean there's best practices and ideal practices and then there's what many small to medium design shops still do. 🙂