- designing for mobile first not only prepares you for the explosive growth and opportunities on the mobile internet, but it forces you to focus and work in ways you previously couldn't.
Chapter 1 - Growth
- The introduction of the first iPhone changed mobile web browsing drastically
- Phones are becoming cheaper (paired with affordable plans), which means more people are buying mobile phones instead of laptops
- Broader coverage from faster networks is also a reason
- Mobile data traffic includes a lot more than just the web
- Phones are created differently - people with smartphones browse the mobile web a lot more than people with feature phones
- Because native mobile applications run natively, they have access to system resources that web applications do not
- This means that user interface transitions and interactions are generally smoother in native applications
- Mobile web solutions are missing core features such as access to address book, SMS, camera, audio inputs, and other built in sensors. They also can't run processes in the background and easily monetize through mobile app stores or in-app purchases
- More native application use quickly turns into more web use since links in native applications opens a web browser
- The best reason to start with a mobile web solution is that it builds on web design and development skills you already have
Chapter 2 - Constraints
- Screen size
- the first volley of smartphones stuck to a 320x480 pixel resolution
- having a small screen size means you have to either find other places for links, or get rid of them all together
- most people start to want the desktop version to be as simple as the mobile version
- losing that much screen space forces teams to focus
- Performance
- anything that can be done to increase performance on mobile should be done, this means sending less stuff and using whichever browser and server technologies are available to you to speed things up and reduce people's monthly bills
- THINGS YOU CAN DO:
- use image sprites to group multiple images
- bundle together and minify CSS and Javascript files
- limit or remove dependencies on heavy Javascript libraries
- limit the use of CSS grid systems
- use proper HTTP headers to ensure files are appropriately cached in the browser's memory
- take advantage of modern browser capabilities
- use CSS3 properties for rounded corners, gradients, text shadows, and box shadows
- Time and Place
- Location - most of the time you will not have the users full attention when they are using the web - one eye one thumb
- Time - people reading articles on iPhones read the most during breakfast, the morning commute, the commute back home, and then couch time after work
- You should embrace the constraints instead of fighting them
Chapter 3 - Capabilities
- Location detection
- allows mobile web experiences to use your current whereabouts to deliver relevant information
- Device orientation/accelerometer
- let us know when our mobile device has been pivoted, rotated, and moved so our websites and applications can respond accordingly
- can use the tilt of the phone to scroll up and down
- can shake your phone to create a snow globe effect
- Touch
- can find a spot to eat by just drawing a circle or line on the map in an app
- Extending your capabilities
- Some additional capabilities that may be here soon:
- Direction - from a digital compass
- Gyroscope - 360 degrees of motion
- Audio - input from a microphone, output to speaker
- Video and image - capture and input from a camera
- Dual cameras - front and back
- Device connections - through Bluetooth
- Proximity - device closeness to physical objects
- Ambient light - light/dark environment awareness
- NFC - Near Field Communications through RFID readers
- A mobile fist approach:
- prepares you for the explosive growth and new opportunities emerging on mobile today
- forces you to focus and prioritize your products by embracing the constraints inherent in mobile design
- allows you to deliver innovative experiences by building on new capabilities native to mobile devices
I also did research for name tags for the conference.
OfficeMax had a couple of different options.
You could get paper ones that would slide into plastic holders or self adhesive ones that would stick right to clothing. They also sell the plastic holders for the paper name tags.
Office Depot pretty much had the same options.
So we would have to decide which kind to get and then our next step would be to look around at different places for the best price. The self-adhesive ones are the cheaper option but the paper and plastic tags are more professional.
