Skip to main content
Noble Desktop/2 min read

Video Tutorial: Designing for Mobile

Mobile Design Topics

Mobile-First Logo & Navigation

Pros and cons of different mobile nav styles; small-screen logo strategies.

Responsive Web Design

One codebase that adapts across mobile, tablet, desktop.

Mobile-First Process

Improve designs by starting from the smallest screen, not the largest.

Hi-Res & Tappable Targets

Resolution choices for Retina/HiDPI plus minimum button sizes for fingers.

Master Web Design at Noble Desktop

Noble Desktop's Web Design Certificate teaches Figma, HTML, CSS, and responsive design.

Learn about designing for mobile websites and apps. In this free class, we’ll cover numerous resources and info.

Want to learn more? Check out the following classes we offer:

Photoshop for Web Design & UI
Sketch in a Day
Adobe XD in a Day
Web Design Certificate
Responsive HTML Email
Mobile & Responsive Web Design

View the Presentation Slides

It’s no secret that mobile devices have changed the computing landscape. An increasing number of people are browsing websites on smartphones and tablets, so they need to be mobile-optimized. People are also using native apps specifically designed for smartphones and tablets. With these new devices come new design challenges that we’ll discuss in this seminar.

Watch this free 2-hour seminar so you can become a better designer. Here are some topics we’ll talk about:

  • How Mobile is Affecting Logo Design
  • Navigation
    • Small screens can be challenging. We’ll talk about and show examples of various styles of mobile navigation.
    • Pros and cons of different types of mobile navigation.
    • User experience and content flow. Considering what your users need, so they have a great experience.
  • Responsive Web Design
    • A responsive website adapts itself across different size screens (mobile, tablet, desktop, etc.). Unlike separate mobile and desktop sites, a responsive website uses a single codebase that adapts to any size screen.
    • Mobile First: Improve your designs by focusing on mobile devices first, instead of treating them as an afterthought once you’ve designed the desktop site.
    • Designing flexible content that can work across devices.
  • Emails
    • Emails can be responsive too!
    • How much can you do?
    • What do you need to keep in mind?
  • How Do I Create My Graphics/Designs?
    • What resolution & size should you work at?
    • How to design for hi-res displays (Retina or HiDPI).
    • Minimum button sizes that are ideal for tappable items.
    • Previewing your designs live on devices while you work!
    • Font considerations. How mobile fonts affect overall identity and print designs!
  • Guidelines for App Icons
    • Common icon sizes for iOS & Android
    • Templates for automating icon creation