2.1 Responsive Design Xmpro Ui Design Basics

in this lesson we'll be looking at

responsive design

how many devices do you currently have

in your household

you probably have a mobile phone or a

tablet a laptop

or a desktop that you use to interact

with the digital world and my guess is

that you have more than one device

the user interfaces you create need to

work

on a variety of different devices

browsers

and screen sizes have you ever tried to

use your phone to navigate a website

that wasn't

optimized for mobile it can be a really

frustrating experience

some of the text might be cut off it's

difficult to navigate

and even if you turn your device

sideways it still might not work

properly

that's why responsive design is such an

important element in user interface

design

so what exactly is responsive design

well according to the nielsen norman

group

responsive design is a development

approach that creates

dynamic changes to the appearance of a

website or application

depending on the screen size and

orientation of the device being used to

view it

that was a mouthful in short it means

your interface layout adapts to the

screen

that it's being viewed on since

responsive design has become a

fundamental part of creating any user

interface

there are multiple schools of thought on

the best approach to take

should you design the mobile version

first or the desktop version

the answer is that it depends it depends

on which device your users are most

likely to use

most often because what looks great on

one screen

might look too sparse or too dense on

another

it's important to consider the

information density appropriate for each

device

so if you scale up a mobile version of

the site to

a big desktop screen there might not be

enough information

for it to actually have a good user

experience

and if you design something mainly for a

desktop and you try and scale it down

onto mobile

and you keep all of the information

visible it can be too cluttered and

difficult to work with

information density is a really

important thing to consider

and i'll show you some examples in the

following slides it basically refers to

the amount of information that you put

in the given space

so when you use high information density

if you look at the new york times

example we have here

there's a lot of information that they

want to show their users

they need to show headlines for news

articles excerpts to get people

interested in reading the full piece

photos updates on the s p dao and nasdaq

markets

the weather new podcasts and the

navigation menu

there's a lot going on on the screen but

if you view it on a desktop

it works you have enough space on the

screen to see all the information

comfortably

and still make sense of it all according

to material.io

google's helpful resource for user

interface designers

when a user views and interacts with

large amounts of information

high density components can create a

good experience for them

and i think this new times home page is

a great example of that

things like lists grids and long forms

are also examples of high density

components

and when you're using high density

components it's very important to create

scannable groups of content

you can do this by using larger margins

and padding between

components so that there's enough space

for your eye to separate the elements

now what about mobile well the smaller a

user's screen

the more information they will need to

keep in their memory

as they interact with your interface

it's good practice to reduce the

information

density on mobile enough to help the

user

easily consume and navigate through it

remove

any non-critical information that might

detract from the mobile experience

another key consideration for mobile is

making your buttons and text links

large enough to tap with your finger

without touching other elements on the

screen

so once you've designed an interface in

the xm pro app designer

it's important to test it on different

browsers and devices

to check that all of the components

display as you expected

so in this photo you'll see an example

of me testing the new xmpro.com website

i used all of the devices in my

household to see how the website worked

on various screen sizes but if you don't

have access to multiple devices

you can simulate them using device mode

in chrome dev tools

i've shared the link in the description

below this video

it's important to design your apps with

mobile and desktop interfaces in mind

this means that you'll need to create a

responsive design

that adapts based on the screen size of

the device it's being viewed on

and when you do this you need to

consider information density

and test your interface across various

devices and browsers

to ensure that it's compatible in the

next video we're going to cover

how to use responsive grids in your

layout

you