s of September 2024, people using mobile devices contribute to 63.38% of all website traffic. There are approximately 4.32 billion active mobile internet users worldwide.

So if you’re not designing for mobile, you and your users are in trouble. That’s why mobile-first design is a great strategy to employ for all digital products, websites, apps, and software.

Key Points for Mobile-First Design

• Defining mobile-first design
• Why is mobile-first design important?
• The connection between mobile-first design and accessibility
• Mobile-first design best practices, plus examples

What is mobile-first design?

Mobile-first design is a design philosophy that aims to create better experiences for users by starting the design process from the smallest of screens: mobile. Designing and prototyping your websites for mobile devices first helps you ensure that your users’ experience is seamless on any device.

For example, if a mobile-first designer sits down to prototype or sketch out a website layout, they wouldn’t start sketching a desktop layout. Instead, they’d sketch out how it’d look on mobile, then move onto bigger and bigger screens.

The mobile-first design concept first came into the limelight in 2010 when Eric Schmidt, CEO of Google in 2010, announced at a conference that the company would be focusing more on mobile users in their design practices.

Eric Schmidt said:

“What’s really important right now is to get the mobile architecture right. Mobile will ultimately be the way you provision most of your services. The way I like to put it is, the answer should always be mobile-first. You should always put your best team and your best app on your mobile app.”

The reasoning behind this is simple: Mobile design is more limited. After all, you’re designing for a smaller screen and can only fit so many elements into it. That means you choose only what’s most important — what your users need the most — while ignoring everything else.

As you expand your design, you can provide them with other elements, but you know exactly what you need to bring to the forefront.

Why is mobile-first design important?

It’s a matter of numbers: The number of smartphone mobile network subscriptions worldwide reached almost seven billion in 2023, according to Statista. It’s forecast to exceed 7.7 billion by 2028. China, India, and the United States are the countries with the highest number of smartphone mobile network subscriptions. This means the majority of people are using their phones to find the content they need. There’s a big need for mobile-friendly websites out there, and so it’s your job to supply it for your users.

If you’re keeping your eyes on website traffic stats, Google’s algorithm favors mobile-friendly websites.

“Getting good, relevant answers when you search shouldn’t depend on what device you’re using. You should get the best answer possible, whether you’re on a phone, desktop or tablet. Last year, we started using mobile-friendliness as a ranking signal on mobile searches. Today we’re announcing that beginning in May, we’ll start rolling out an update to mobile search results that increases the effect of the ranking signal to help our users find even more pages that are relevant and mobile-friendly.”

That means by providing a good user experience on mobile devices, you increase your discoverability, and potentially your conversion rates.

Mobile-first design offers a wealth of opportunities for accessibility experience. See details below…

The connection between mobile-first design and accessibility

Here are a few ways mobile-first design and accessible design overlap:

• Small-screen friendly. Mobile-first design pushes you to make your digital products more readable on smaller screens, and therefore more accessible to people who might be hard of seeing. When your designs help people with limited vision, they’ll also help everyone else.
• Hierarchy of information. So mobile-first means content first. That means, putting your most important content assets (i.e. the ones your users want) at the top of your page. This also makes your content accessible to anyone with cognitive disabilities.

3 tips for good mobile-first design

Tip #1: Mobile-first = Content-first

When it comes to mobile-first design, you need to remember one thing: Content is key.

You need to give your users all the content they’re looking for, and only that. Anything else might clutter and distract from your users’ experience.

With the big constraint in screen sizes, designing for mobile devices can be a challenge . That means you need to take a look at all of your content and present it in a visual hierarchy depending on how important it is to your user. Only then can you fit the most important elements.

Key Points:

• Companies title at the top. This is key in the visual hierarchy. It lets the users know where they are and orientates them to the specific company website and content. Your brand’s logo and name will likely always go on top of any mobile design you create.
• Users see the most important info right away. Leading news agencies goes all-in on content-first. Most users aren’t coming to their website to check out the about page or privacy policy. They want to read the news, so the newspaper gives it to them.
• Easy-to-reach navigation buttons. The news agencies website stores any extraneous (or less important) content in the hamburger menu up top. That way, if there’s something the user wants to see that isn’t offered right away, they can easily find it there.

This is ultimately a great example of knowing your website’s visual hierarchy and using it to create a great mobile-first design.

Tip #2: Make it easy to navigate

Condense your secondary elements into easy-to-reach navigational buttons. One tried-and-true method of doing this is by using a hamburger menu. Hamburger menus are recognizable ways for your user to attain access to secondary elements. If you don’t have one on the page already, chances are your users know to go to the hamburger menu to find what they’re looking for.

This does come with a catch though: low engagement. According to a study by the user design research firm Nielsen/Norman Group, hidden navigation buttons like hamburger menus decrease content discoverability by 21%. Not only that, but it also increases the time it takes to use the navigation by an average of two seconds.

Unfortunately, offering all of your possible links at once is unfeasible. Luckily, there’s a way you can get the best of both worlds.

Joe Toscano, an experience design consultant, recommends using combo navigation.

Toscano writes… “Combo navigation allows the user to see the options they need the most and makes the rest accessible in a hamburger menu or something similar. […] The site’s content is laid out so well that I don’t need nav buttons. I can scroll the page and get where I want very easily. 

One great example comes from Apple’s mobile page where, instead of implementing a hamburger menu that hides options, Apple utilizes combo navigation to present the most important links (“Buy” and TV”) as buttons at the top of the page.”

If you can’t find what you’re looking for, you can always go to the navigation button on the top to see more options.

Tip #3: KISS (Keep it simple, stupid)

Successful mobile design is simple.

You never want to concern your users with extraneous elements like ads, pop-ups, and other content they don’t want to see, but especially not on mobile. Limit your compact visual real estate to only including the things they’re on the page for.

Consider adding a clear call-to-action that makes sense with the rest of the article. It’s also unobtrusive and adds even more value for the user.

Keep the user in mind

In the end, the most important thing to remember when approaching mobile-first design is that you’re designing it for your user, and only your user.

If it doesn’t add value to their experience, you can probably leave it out.

Design better with DesignBetter.co

Discover the world’s best design practices — DesignBetter.Co

DesignBetter.Co is the essential guide to the best design practices from top design experts. Learn how to build a world-class design organization and more.

Design Systems Handbook

Design Thinking Handbook

DesignOps Handbook

Design Leadership Handbook

Enterprise Design Sprints

The Design Better Podcast

Design Better Workshops

Plus much more at designbetter.co.

he History and Future of Adobe Flash

On December 31, 2020, the Adobe Flash Player was officially discontinued. Adobe finally stopped updating and distributing the Flash Player plugin, a.k.a. Shockwave Flash and blocked Flash content from running in the player starting January 12, 2021. Flash actually was done and finally died. Before the end of Flash, let’s give credit where credit is due. Flash was miraculous. It enabled new possibilities on the web, helped bring video and video sharing to the internet, and most importantly, it got some people interested in designing for the web.

Flashback

As a college student in the 1990s, being a graphic designer mostly meant creating graphics, logos, magazines, books, posters, album art, T-shirts… basically the print world. There were no online experience and courses. When the internet came along, and everyone and anyone seemed to need a website, many designers were stumped since this web thing required code.

Most designers never had to code and didn’t need to since Photoshop, Illustrator, PageMaker, Freehand, and QuarkXPress did the work for us. Import elements, place objects, move them around, scale them, change their color or size, it happened easily thanks to “what you see is what you get” (WYSIWYG) software.

Print Alone…No Longer

Why learn to code? Designers just left the web to computer scientists, computer engineers, and software developers. They understood the matrix of letters, numbers, and symbols that made up Hypertext Markup Language (HTML). They were also much faster typists. A lot of graphic designers didn’t care about HTML. “Let the coders deal with coding,” we thought, “and we’ll stick to print.”

Many of us did, until we saw new opportunities for our clients who had to be on the web and it became a matter of evolve or be left behind. Fortunately, web layout software had arrived that promised to make getting a website designed quickly and easily. GoLive CyberStudio (later acquired by Adobe), Adobe PageMill, and HoTMetaL helped you design for the web since the software’s backend rendered the necessary HTML. Imagine Microsoft Word, but instead of a page with images and text that you can print, it makes a page you can put on the web. (Even older versions of Word let you convert documents to HTML for the web, and today’s versions still let you do this.)

Even with these early web design tools, designers had mixed feelings. The typography was so limited. One of my university professors was appalled that you couldn’t layout a site with Univers or any other specialty font that a company might have as part of their corporate identity branding.

On top of the expensive software we already needed, if we did not want to learn coding we would have to pay for another tool? Art supplies, computer peripherals, digital camera equipment, etc., etc., it was already expensive and especially for those on a budget.

On the other hand, design educator Ken Hiebert, author of Graphic Design Sources and Graphic Design Processes, found software such as GoLive to be a real blessing. The story from Hiebert’s perspective: we had been using PostScript fonts on a daily basis as well as PostScript laser printers, but that didn’t require us to read and write PostScript. GoLive handled HTML in a similar way: design what you needed, let it spit out the code, and upload it when you’re ready, without really needing to know HTML. If you wanted to get on the web without knowing code, GoLive or PageMill were a small price to pay. And if you were a visual thinker, those programs were right up your alley.

One Plugin, One Solution (Almost)

By the late 90s, and even with the advances in web design, things were limited. Software could take care of most of the work, but you still needed to have some basic knowledge of HTML to make sure everything displayed properly. Additionally, Cascading Style Sheets (CSS) were on the horizon, and that was a whole new thing you would have to learn to make your site look and function as it was designed.

To complicate matters, Browser Wars as well as slow internet speeds caused other challenges. Designers just wanted a better web, an experience that was designed rather than coded. Better typography!! Sound! Animation too! Why not? For starters, it wasn’t easy to achieve. Even Macromedia’s Dreamweaver a program that promised a better web, was still a challenge and some coding was needed.

Then everything changed with the release Flash, first named FutureSplash Animator, later acquired by Macromedia. Text, vector graphics, and images could be composed in a layout and uploaded to the web, with many if not all of the refinements designers had become accustomed to. For example, if you wanted to use a particular font on the web, especially as a headline or button, you needed to make that text into a bitmap image that often looked rough. Today text as image is not done due to Google and SEO technology.

Flash to Make Them Dance

When Macromedia acquired FutureSplash and released it as Macromedia Flash, a world of possibilities arrived. Yes, you had to pay for the Flash software to make a Flash site, but it was worth it. Visually, new possibilities emerged. Artists and designers pushed the web into new and unforeseen directions.

Flash appealed to a certain audience, a creative one. “Flash was the internet that we thought we were going to get. Make things look more digital and less like documents. HTML and CSS websites were simpler then, but Flash was for visual artists, it was something you could relate to. With Flash, code was secondary, and the elements were visual.”

If you wanted to make your own digital art or online experiment or website, you could quickly and easily learn Flash by reading a how-to books, taking classes, or you could learn with Lynda tutorials. I started making my own custom Flash work, focusing on websites and motion graphics.

Flash Giveth, Flash Taketh Away

In the early 2000s, design was undergoing an identity crisis. Maybe the animated logos weren’t needed? Maybe Flash is not the best way to go for the whole site? You could design your layout and slice it up using Macromedia Fireworks, with or without Flash content. Add all the features and animation and sound and Flash headers you want. The sky was the limit and many designers and clients wanted to push the limits.

“I want my website to my creative thoughts and design!” Creating unique, thought-provoking artistic experiments with Flash was one thing, but using Flash to make an eccentric website for users who wanted and/or needed something simple, seemed difficult for users. Approaching web design like a kid in a candy store, some would put every and any tasty ingredient into a bowl, mix it around, and offer it up as a super, special, flashy treat. So much to see and explore with this new technology! Some designers thought it was their duty to challenge conventions, going so far as to “hide buttons” so the user had to work to find them. At the time, this was considered pushing the creative limits!

In 2001 Apple didn’t require the Flash plugin to use their site, but they did use bitmap images to render type. Captured via the web.archive.org.

As designers and non-designers packed more and more effects into their web content using Flash, or chose to hide web content, sites became complicated and/or unusable. Some clients wanted the complex, but larger sites with more content resulted in longer load times, meaning longer wait times, especially if you had an animated logo that required many seconds to minutes of your patience before the website even loaded.

These long Flash Intros, became the norm. In order to let a site fully load in the background, a short introduction, animation, video, or game would keep users busy and/or entertained, which really just annoyed people. In time a solution would come in the form of a button. Users who didn’t want to wait and watch an intro could jump ahead by clicking Skip Intro.

On the plus side, Flash brought people from all walks of life to web design, but we had been led astray by wanting to create one shiny thing after another. Eventually it was too much and a change was needed. We saw what the web could be, and what it shouldn’t be. Many designers and non-designers realized that the flashy animations didn’t matter as much as the content and the users. Fancy sites shouldn’t corrupt the experience. It’s all about people and usability matters.

Usability is less about flashy sites, and more about function. Create simple sites and, Keep It Simple Stupid (KISS). Books like Skip Intro: Flash Usability and Interface Design by Duncan McAlester & Michelangelo Capraro taught readers to design for users. If that meant learning code in order to be a better designer, better artist, and a better web developer, then so be it. Some Flash designers did just that. As each new version of Flash gained abilities and ultimately ActionScript, which required learning more code to create Flash sites and features.

Flash Blows Up, for Better and Worse

In 2005, Adobe acquired Macromedia and all of their products, including Flash. By that time, it seemed like everyone and anyone used Flash, even an startup named YouTube. Entertainment could reach the masses, video had evolved, and so did the internet. As design and development for the web advanced, you could do more than ever before with HTML, CSS, and JavaScript. They were lightweight and did not require a fancy Flash plugin that might crash your browser. You did have to learn more detailed code though, and for some visual designers that was difficult.

Better yet, HTML, CSS, and JavaScript did not require you to purchase a piece of pricey software to get the job done, provided you were somewhat fluent with those web development platforms and had a text editor such as TextWrangler or BBEdit. In terms of web content, or content itself became king and blogs had blown up. Content Management Systems (CMS) became the way to get on the web quickly and easily.

Flash was beginning to look especially outdated and threatened, when Steve Jobs critized it, keeping it off the iPhone. To make matters worse, Flash had become a pathway for criminals who would use it to attack your computer, as routinely reported by security experts such as Brian Krebs.

Turns out, most of us don’t miss Adobe Flash, especially if you own an iPhone, iPod, or iPad. Some miss Flash now that it’s completely gone because it changed the way we look at web design and think about the web. Flash was the original engine that helped make YouTube work. Now that Flash is officially dead, doesn’t it deserve some respect? Some credit? Who really knows? Like the opening animations and videos that Flash spawned during its glory days, we’ll have to wait and see.

teve Jobs didn’t become successful overnight.

It took years of hard work, determination, and perseverance to build Apple into the company that it is today. When you take a step back from your MacBook (and put down your iPhone), and really think about all that he accomplished, it’s beyond remarkable. He changed the way we live.

Thanks to his many lectures and speeches, we have a glimpse into his day-to-day work ethic and how he managed to do as much as he did. In order to help you reach your career goals, we’ve rounded up a few of his best quotes. Read them, be inspired by them, and then get out there and make your dreams come true.

My favorite things in life don’t cost any money. It’s really clear that the most precious resource we all have is time.

Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it.

Have the courage to follow your heart and intuition. They somehow know what you truly want to become.

I think if you do something and it turns out pretty good, then you should go do something else wonderful, not dwell on it for too long. Just figure out what’s next.

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

Quality is more important than quantity. One home run is much better than two doubles.

The people who are crazy enough to think they can change the world are the ones who do.

Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma—which is living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

ow well do you know HTML / CSS / JavaScript? Here is a great resource that will help you add custom design and code to your website, without knowing any code. The site codepen provides sample designs with all related code for each.

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, creatively named “pens”, and test them. It was founded in 2012 by full-stack developers Alex Vazquez, Tim Sabat and front-end designer Chris Coyier. Its employees work in a decentralized, remote environment, rarely all meeting together in person. CodePen is one of the largest communities for web designers and developers to showcase their coding skills, with an estimated 330,000 registered users and 16.9 million monthly visitors.

Explore CodePen Topics

CODEPEN.io