I’d like to share a little experience. While designing my page, I had a strong inclination to start with the mobile design and then move on to the desktop version. However, I suddenly found myself struggling because this approach lacked the flow I needed to create a satisfying layout. So, I decided to start over in Figma, but this time focusing on the desktop version first. In the creative process, it doesn’t really matter where I place the elements or how I eventually put them together in CSS/HTML.
I’ve found that mobile first works well for me and I write cleaner CSS with it, but I need to actively plan ahead. One of the things that helps me is to keep both a mobile and a desktop window open in the preview, so I can see what I’m doing both ways.
Sure, that helps. Although i was thinking more about the actual prototype. Somehow the desktop view gives me more room to immagine the whole content, then i find it easier to design the compact version of that bigger picture.
For design, I’d personally do desktop first. For development, I do mobile first but with desktop in mind meaning I build a more complex mobile version than needed for mobile, knowing that it also has to support desktop.
For web design I view Mobile and Desktop all the time and don’t work with prototyping apps like Figma or Sketch anymore, because I find them time consuming and not making much sense. I work like 15 min in tablet mode, 15 min in desktop mode and 15 min in phone mode. I learned the hard lesson to always check all the time in all device modes!
Instead of Figma or Sketch I use HTML prototyping in my case based on Bootstrap 5. HTML prototyping means blazing fast design and ready in seconds. I’m not talking about just copying Bootstrap blocks, but creating original designs based on the Bootstrap framework.
For the HTML prototyping I use Pinegrow, Bootstrap 5 and Interactions. My prototypes are copied then from Pinegrow to my real design in Sublime Text accompanied by MAMP. I’m mainly on Mac and use Codekit as my build system.
Interesting discussion and a dilemma I’m sure we all face.
While you enjoy having the no-parameter approach of designing for desktop, think from your users perspective. Even better, do you have data to show what device the majority of your users come from? This might help you prioritise where you put most of your attention in the design phase. Though in both cases make smart use of the available space.
Technically speaking (in the CSS) it’s better to build mobile first although I think we’re at the threshold of peoples phones being better equipped than their computers! In most cases the mobile version is simply a reduced, simplified version of your desktop so it’s fine to start “top down”
Design however, I think is better done desktop first. Get the ‘full fat’ version laid out and reduce to the essentials for the mobile experience.
I think it’s bad practice to design “in the browser” as your thinking and creativity is subsidised by your CSS knowledge and “writing code”. The tool inevitably gets in the way of your ideas, whether you feel like it or not. It’s more laborious to iterate and change things around so you are less likely to get the best output in this way.
I’m waffling, in essence i think it’s a balancing act of, what device this is likely to be viewed on vs whats going to give you the best output vs just get the damn thing out there!
All that being said, I develop my site desktop first and deal with the consequences of the mobile version later on. Just because it’s more fun seeing it come alive in the browser! I’m an impatient fool.
I think when your knowledge of CSS, HTML and JavaScript is on the proper level nothing is standing in the way to be creative at the same time and use only a browser. It’s like saying when you have a broth technical musical background knowledge it’s standing in the way of been creative. That could be, but in most cases not! Lot’s of famous musicians have had high level education as well and they showed lots of creativity.
Many people are visual thinkers (like me) I can visualise my design or music I make in my head and don’t need any browser to see how it is going to look. Sometimes I make a sketch on paper for other people/clients, but it’s mainly all in my head. I rather work with Sublime Text and MAMP then with a visual builder, I use Pinegrow for quick prototyping and install of Bootstrap in 3 sec.
I used Sketch in the past and know for sure that I was not more creative! It was only 10 times as much work!
Whatever works for you then I guess. I’m not saying I don’t design in the browser especially for prototyping, I just feel that when my attention is 100% on the design/UX, I get much better results than if I was having to translate that to code before seeing a result.
