- Today we're gonna be talking about designing
for multiple devices.
(light music)
Multiple devices encompasses any type of device
like desktops and laptops and mobile devices
like smartphones and smartwatches and tablets
or any other device that kinda on the horizon
in the future similar to that.
When we talk about how to deal with multiple devices
it's generally kinda three ways that we can approach it.
The first is to develop bespoke mobile websites.
They have a separate URL and are essentially
separate sites that need to be maintained,
built, designed, content provided, and images
provided for it, everything that goes along with that.
The other approach is responsive websites
and that's the norm at the moment.
Responsive websites have the same url.
It's essentially one site that kinda adapts
and flows onto whatever device is being used.
Then thirdly we talk about apps.
Apps tend to be kinda more focused.
They tend to provide a logged in experience.
Think about kind of Facebook opened up
and you get your newsfeed straight away.
There are different types of apps.
We're not gonna be talk about that in much more detail
here today but you have hybrid apps,
you have native apps, and you have progressive web apps.
Hybrid apps are a bit like responsive websites.
They're built on kind of web views.
Native apps are a bit like bespoke mobile sites
specific for the platform in question.
And progressive web apps they can be installed as well
but they can kinda be loaded from the kinda browser.
The two main things you need to consider
when, kinda think about when you work with
multiple devices and kind of sketching out
when doing responsive design.
And as a breakpoint in this content that can (mumbles).
A breakpoints is essentially what content stacking strategy
and responsive websites are based on.
So if you think about, you have your browser window,
and you start decreasing that browser window,
at one point that layout is gonna change
and content gonna reflow into different kinda layout.
That's what happens when you hit a breakpoint.
Content stacking strategy, on the other hand,
that defines how your content should behave
from different devices
and there's a great quote by Trent Walton
where he says the
"content needs to be choreographed to ensure
"the intended message is kept
"on any device and at any width."
So those are two main things to keep in mind
when it comes to responsive design.
In terms of some principles behind
designing for multiple devices,
the main ones should be that responsive websites
should be the starting point.
So try to keep the core content the same.
If you find yourself having conversations about
cutting out certain content for mobile,
think again, because, generally, people and users,
they want the same content, the same functionality
on these different devices.
It doesn't mean, however, they should
provide the same experience exactly the same way
to these different devices.
You should optimize both how content is being laid out,
how much width is being shown,
how interactions happen,
and kind of everything that has to do with that
to make sure that they work for the device
and the project in question.
When it comes to touch, make sure that hitter is
a large enough and that goes with desktop
and kind of laptops as well.
So it's not just for mobile devices
such as tablets and smartphones
where touch is important.
Use the maximum of two columns when it comes to smartphones
and then make they provide instant value
and stay clear of kinda menu pages.
This is specifically the case for apps.
So with that try to make sure that you kinda deliver
someone straight into the experience.
Think about delivering straight
into Facebook's newsfeed, for example.
And then in general avoid bespoke mobile websites
as much as possible.
It means that you need to maintain different code bases
and different content and that generally means that
something is gonna have to give.
In terms of how to go about doing content stacking strategy,
this is gonna be the foundation for kinda wireframing
that we talk about in the seventh lesson.
Start out by sketching out either kind of
desktop or mobile as a modular overview
if you want to go into more detailed.
And then give each module a number
based on the importance.
So be clear on the importance
on that kind of content.
Then take, if you started with desktops,
and go on to mobile and do the same kind of layout
for example a home page,
and sketch that out and lay out exactly
how that content should be prioritized.
You might find yourself in situation
where you see actually the content
on mobile to be organized slightly differently
and that's fine to some extent.
What I'd like you to do for this exercise is
actually to work through the home page
for your product or service.
Or take a website that you use on a regular basis
and adapt it to different devices that you have
based on content, based on breakpoint.
So this exercise is very much about not thinking
too much about the device
but let the size of the device actually guide you.
So what I want you to do is take
and A4 piece of paper
take it like this
put it in kind of portrait horizontal view
and then rip it into parts in the middle
until you have two pieces
and that gives you a piece that is this size.
Once you've done that, rip that into two pieces again
until it gets to kinda that size.
And then rip that into a piece again until you get
to that part the size and then rip this one again
into this size.
So you end up with five different sizes of paper
and what I want you to do is to take,
or to do a home page sketch,
and you can start on the smallest, on the largest,
or anyone in between but do a home page sketch
for your product or service.
Sketch it up on one and then adapt all of that
into the kind of smaller devices
and think about the edge of these
as the kind of, the size of the actual devices.
Also, at the end of the piece of paper
that's essentially your fold.
Try to consider the use of it.
Try to consider what makes sense for the device in question.
And that's essentially the exercise for this one.
There's a few more articles to read
about kind of designing for multiple devices
at the last slide of this presentation
and we'll talk about more wireframing
in one of the lessons of UX and Marketers.
(technical music)
For more infomation >> Meghan Markle Has Put Prince Harry on a Diet for the Wedding (2018) - Duration: 1:29. 
For more infomation >> Workers to rally for minimum wage at State Capitol - Duration: 0:19. 
For more infomation >> Law enforcement to serve pancakes for autism awareness - Duration: 0:20. 
For more infomation >> 성욕이 높아지는 5가지 약용 식물 - Health For you 건강 - Duration: 7:08. 
For more infomation >> Polls open for local elections - Duration: 2:28. 
For more infomation >> Rockport clinic reopens for the first time post-Harvey - Duration: 2:23. 
For more infomation >> Trucker lost for days didn't touch shipment of potato chips - Duration: 0:25. 
For more infomation >> Experts report rising numbers for Autism - Duration: 1:26. 
Không có nhận xét nào:
Đăng nhận xét