# Mobile Webdesign
* What? * Why? * How? * Examples
## What?
## What? Designing websites for tablets and mobile phones
## Why?

Why?

More visitors
## Why? Much easier than an app
## Why? _The Scout Association is dedicated to all its users and members in making scouts.org.uk as accessible as possible._
## How?
### Order 1. Content structure 1. Resolutions and accessibility 1. Wireframes 1. Stable html structure 1. CSS 1. Javascript
### Content * Separate website → Duplication * Adaptive content → Less is more * Same content → Simple
### Resolutions | | Minimum | Maximum | | ------------- |---------------| ---------| | Width | 320px | _5K?_ | | Aspect ratio | _9/16?_ | _16/9?_ | ####   #### Optimize * Common resolutions * Current users?
## Mobile first * If possible → new layout/website * Both for wireframes and CSS
## Fluid second * Easy to maintain * Consistent quality

Media queries third

  • Current users?
  • Add where necessary
  • Re-use min/max-widths → testing

              <style>
                @media (min-width: 600px) {
                  .sidebar {
                    float: left;
                  }
                }
              </style>
### CSS techniques * Server-side dynamic css → Complicated * Responsive css → _Simple_

Viewport


            <head>
              <meta name="viewport"
                  content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
## Testing * Desktop * Smartphone

Getting started

Single page with all kinds of content

poor-mans-styleguide
### Font size
## White space Clickability
## Examples (Disclaimer)

Use pictures

Redudant content

Sin categoría and administrador

Large menu

Think as user looking for specific information

Unoptimized layout

Also adaptive, but not good enough

Long titles

Flexible menus

Word documents

Tiny font

Sidebar

Tables


                table, thead, tbody, th, td, tr {
                  display: block;
                }

Too wide

  • Logo background
  • Title to long
  • Image not cropped

                .title {
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              

                .photo_wrapper {
                  overflow: hidden;
                }

Forms

Youtube

Long line

Scrolling

Google map

Hidden form

Don't make me think

Link color

No feedback on mouseover

Lightbox

Clickable photos

Horizontal alignment

Vertical alignment

Alignment of external content

Invisible checkbox

bit.ly/2kJIPoL