Think back to the early 2000s. Motorola Razr was the phone everyone just had to have. Every time you left the house you grabbed your bedazzled flip-phone, your iPod or Mp3 player, and a digital camera. Households typically only had one computer for the entire family to share. Chatting with your friends on AOL was THE way to communicate because texting plans were a privilege. Websites had too much text, the graphics were terrible (even though they were cutting edge at the time) and if they actually had some kind of animation, it was a big deal. And there was only one primary way to view a website: on a computer.
When designing websites during this time, designers and developers worked under the assumption that they would predominantly be accessed from desktop computers. Due to this, they primarily designed websites only for desktop viewing and rarely made a mobile version of the website. This approach to designing a website is what is referred to as the desktop-first methodology. Everything fit into the same template, pictures didn’t have to be resized to fit different layouts, paragraphs weren’t reshaped and scaled down to fit a smaller amount of space, and designs could include things like hover elements. At the time, web developers were stuck with limited functionality when coding because there were very few tools that allowed you to lay out and design a website.
One way of creating custom websites was to create the design in photoshop, slice everything up into tiny images, and then use a coding language such as HTML (Hypertext Markup Language) to code the images into place. Say you wanted to change the color of a button at the top of the website from blue to purple. The developer or designer would have to go back into their photoshop file, change the color of the button, re-slice it and then add it back into the code as a new image. This was not an easy process, that one little change could take hours of work. Because of this, developers and designers tended to keep websites set in standard template designs to reduce the hours of work it would take to make changes.
With the introduction of new coding languages such as CSS (Cascading Styling Sheet) and SASS (Syntactically Awesome Style Sheets) in the mid-2000s allowed developers to style and design websites in a more simplistic manner. Think of it this way: HTML is all the elements we need to make a website provided to us by the client. Pictures, body copy, logos, videos, etc. The CSS is the designer that comes in and tells the HTML where everything should be, what size it should be, what color it should be, and how to flow everything together to create one cohesive design. Now, one little change that used to take developers hours to make, could be done in minutes by using a combination of HTML and CSS or SASS.
Even though the first BlackBerry debuted in 2002 and the first iPhone debuted in 2007 and the first Android debuted in 2008, it wasn’t until 2010-2015 that smartphones became standard use. In 2008, the sales of laptops superseded the sales of desktop computers. In 2010, Apple debuted the first iPad adding yet another device to view websites on. While all of this was happening, website design took a huge leap forward with the introduction of responsive web design in 2008. Responsive web design permits the design and development of a website to reformat the layout depending on screen size and screen orientation. With the introduction of responsive web design and the popularity of laptops, smartphones, and tablets, graphic and web designers were forced to shift their design methodology to accommodate these various screen sizes. During this transition, graphic and web designers started using what is referred to as mobile-first methodology. Mobile-first refers to the design of a website in which the designer designs the mobile view of the website before designing the desktop version of the website.
Today, with the vast array of design programs and coding languages available, developers and designers can approach website design using either methodology. Now the question becomes: how do you choose which methodology is best suited for you? The desktop-first or the mobile-first? More on that to come.