Which Should Come First - Mobile or Desktop Design?

Having an internet presence that is compatible with mobile technology has become an important part of having a complete cyberspace presence for businesses since so many people use smart phones and tablets to access the Internet. While there are two trains of thought about whether or not mobile websites need to be completely different than a full-sized counterpart, most would agree that there definitely should be a mobile optimized option - and it should be constructed in such a way as to be easily used on a tiny screen. Most business owners opt to build two separate creations, so the big question is which should be done first?

Mobile Design First

Since mobile websites need to be so much smaller, recommendations for creating a user-friendly one specifically for viewing on a smart phone or other small devices are to keep it simple and exercise moderation in use of the limited space. These smaller pages should generally have only the most pertinent information as well as having links to where more details can be found. Use of everything from font to images to color must be carefully considered and decided since it does not take much to overload a mobile screen.

Functional mobile design should include the logo, colors and main typography that are displayed on the main website to provide a sense of recognition; however, the amount of information presented can be abbreviated. Layouts should be more vertical than horizontal, which of course is the opposite rule of thumb for a laptop or desktop design, most of which commonly have wide screens. It is possible to take a website designed for phones and use it as-is for a full-sized layout just by making sure the design is responsive and can adjust to fit multiple screen sizes. Once all that is done, full size pages can be created by enhancing and filling the mobile ones as needed. Using this technique means there is no need to start from scratch; the smaller version website code can simply be expanded as necessary.

Desktop Design First

One of the problems faced by designers when converting full-sized websites to a mobile version is knowing how much content to include. This is why a lot of designers agree that building a smaller interface first is often easier; however, this is not always the case for all content.

By using a grid layout and responsive design, it is possible to create only one website that changes its appearance based on the format in which it is being viewed. Such a coding process can be a little more involved, but it does get the job done once and for the most part, that's it. Both of these coding features work together to allow a website to shrink to fit smaller screens or enlarge to fit bigger ones.

The website structure is built with boxes or content areas that are independent of each other and the whole design in general, which can flow so that they are in a single column or multiple columns and vary by width, depending on the space available. Menus and other elements are built to react the same way so that even on smaller screens, scroll bars do not need to be used. This type of layout provides a way for all of the content on a website to be accessible on a mobile device without compromising how it looks or performs.

Whether starting with the smallest version of an internet presence first and then building it up or making a responsive internet presence on a grid layout, the decision will likely be different for every company and every website, depending on the desired look and features. There are multiple ways to accomplish having both versions and all it takes is a little bit of forethought in how each one will best function!