The presentation from the lecture about a mobile approach.

1. Mobile first.
Mobile versions of websites
and adaptive design
hey, man,
would you like some mobile?

2. Who I am?
Alex Kagor
founder and art director at MEAT Agency
UX research, Interface design and development
meat.agency
facebook.com/sasha.kagor
founder and lector at MEAT Studies
Ukrainian Design Acadedemy
meatstudies.com
Studies
Kyiv

3. What we create at Agency?
meat.agency

4. What we are teaching?
meatstudies.com
G R A P H I C
D E S I G N
3 MONTHS
U X + U I
D E S I G N
3 МЕСЯЦА
C A S E
D E S I G N
2 MONTHS
C A L L I
G R A P H Y
1 MONTHS W E B -
D E S I G N
M O B I L E
D E S I G N
2 MONTHS
D E S I G N
T H I N K I N G

5. Mobile first?
Mobile version of website?
Adaptive design?
Responsive design?
WTF?

6. when you see m. prefix
before domain name
Mobile version of website

7. Pluses+
- Minuses
• Easy and quick loading
• Easy and quick loadingugly view of links from desktop
• Sometimes web sites can show you mobile version if have low speed of internet,
they can show mobile version
• Outdated approach

8. Responsive Design
https://www.dropbox.com/s/
df9l65tww2mmbki/
Screenshot%202016-10-22%202
2.32.21.png?dl=0
“stretchy”

9. • Easy to use for text layouts
Pluses+
• outdated approach
- Minuses
• narrow application range

10. simply put, it’s a site that adapts
differently to:
1) desctop,
2) tablet,
3) mobile.
So what is responsive
design?

11. Minuses-
• no need for a separate subdomain; it’s the same one site
that adapts to a screen size and device type
Pluses+
• site looks cool on any resolution (if all screens are
made)
• if a site has a lot of content it can download slowly via mobile
internet

12. Sad truth of adaptive
1920
(1680)
1440
1280
1024
800
640
(480)
320
you’ll need all these resolutions
for a perfect site appearance
Desktop Tablet Mobile

13. So what should you do?

14. ADAPTIVE.
TIVE.So what should you do?

15. Lazy option
1440 or 1280
1024
320
1920
(1680)
1440
1280
1024
800
640
(480)
320
PRO option

16. Tips on mobile resolutions design

17. 1. Don’t go up to 640px wide.
640 320

18. 2. Watch the fonts size.
Smallest font
Do you like to use mobile
phone for service ordering in
a hotel? Especially, if you are
in a country, where people
speak different language and
have different way of
mentality? The majority says
they’d rather go to reception
12px 16px
For a big text amount

19. 3. You can use only sides instead of net

20. Mobile first
Start with mobiles

21. Regular approach
Start with desktop resolutions

22. Sooo, how do we do it?
Every option has pros and cons. But …

23. Need help? I’m here:
facebook.com/sasha.kagor
instagram.com/sashakagor
a.kagor@makemeat.com