× Home Responsive Design Mobile Design Principles User Experience

Mobile Design

How To Design For All Devices

- Mobile Web Design -
Rasmussen College

Purposeful Design


Mobile First Design

More users access the web through their mobile device or tablet. Make sure they can view your site on the smaller screen first.

Create a Reaction

Interactivity:

This includes hover states and animations. Don't know JavaScript? Thats okay, because CSS has a few tricks up it's sleeve!

Layout Options

  1. meta name viewport for device widths
  2. Use min-width and max-width
  3. Create break points
  4. Keep content under 90 characters
  5. Use a flex-box pattern

User Experience

  1. Age approppiate content
  2. Technology Savvy users or Inexperienced?
  3. Is the site for web-designers / users looking for more knowledge about web design?
  4. What do your colors say about your site?

Web Disgner Depot

Anaylsis



This site is set up for users who are interested in learning about web design. The homepage includes links to popular posts, recent stories, a side nav bar to move up/down/next page/previous page. Interactive design has been implemented through their site by using lightbox images for articles, and their logo outlines itself when the user hovers over it.


The site easily navigates people to the information they are looking for by having the five main topics in the main navigation bar. Each article also has a top anchor tag that lets the users see more posts about that topic.


Over View of Positives & Layout

  1. Interactive Nav Bar
  2. Responsive Layout
  3. Consistent Design
  4. Included the meta name viewport for device widths
  5. Used min-width and max-width
  6. Used break points
  7. Kept content under 90 characters
  8. Used a flex-box pattern

  1. Interactive

    1. Top Nav Icon Animation
    2. Articles move slightly on hover state
    3. All Images animate on Hove-States
    4. Each article has a main image, header, tagline, author, author image, date, and social media links
    5. Has 5 main navigation pages
  2. Responsive

    1. Mobile
    2. image above the article
    3. 2 smaller images below article
    4. Converts to a Hamburger menu
      Laptop
    1. Drop-down navigation
    2. Articles are centered with 1 image to the left