Desktop First Development
Let’s face it, mobile web design is no longer a trend. It has become an important factor that is changing the way we look at the future of the web. Millions around the world are using their mobile devices to access the web, so this offers the perfect opportunity to tailor web design and improve the user experience. How can we do this?
Responsive Web Design
I don’t think anyone enjoys going to a website and having to zoom or adjust their device in order to find what they are looking for. Responsive web design provides a solution to this problem by offering the user an optimal layout based on their screen size. Mobile first design is something that is praised in the web world, but what happens if you are tasked to develop a responsive website with only a desktop design?
What I like to do in this situation is to look at the design and dissect everything into blocks. From there I will tap into my creative side and decide how I will arrange these blocks into 2-3 breakpoints.
Let’s use the site we did for Specless to see an example of this. I basically broke the header up into 3 blocks: the logo, the text links, and the buttons.
My first breakpoint accounted for tablets.
I centered the logo and added a border-bottom to help with the separation. I also centered the text links and the buttons, which establishes a clear visual hierarchy for the screen size.
The next breakpoint accounted for mobile.
Here the text links are hidden. I placed the logo back on the left and the menu button is placed on the right. I wanted the “Get My Invite” button to be visible because of its importance instead of being hidden with the text links and the “sign in” button, so I decided to keep it fixed at the top of the screen.
This is only one example of this, but each time I have to make a desktop design responsive, I use the same approach. I look at the design and break it into blocks of information. Then decide where I could place each block based on the screen size. Often times you could still use a multiple column layout for tablets. As for mobile, I usually stick to a one-column layout and add a 100% width to many of the elements.
Feel free to look at the rest of the Specless website in various screen sizes to see other examples of how I rearranged the layout. If you want to learn more about our process with this project, check out our case study.