Designing for Mobile Web
Julie Ann Horvath
Lesson 22
If we've entered any particular age or genre in web development, it's most likely that of accessibility. We can now view web pages on almost any device and, WiFi permitting, from almost anywhere in the world. What's even cooler is that we finally have the tools to make web pages usable, functional, and beautiful without designing entirely separate apps for the mobile experience.
The objective of this lesson is to learn a few new tricks to make designing and building responsive web applications a little less painful. With a few lines of code and some low-cost and reusable assets, we can dazzle and delight our users on any platform.
-
Understanding Mobile Patterns
Design is mostly a trained eye. And a big part of training your eye to know good design is learning how to recognize patterns. Browse this breakdown of different mobile layout patterns to see if you can identify which of these you've seen in the wild. Then, try and identify the mobile pattern that would work best for what you're working on now, or maybe for projects you've worked on in the past.
-
Tackling Visual Solutions for UX Challenges
A great way to learn how to design for mobile is to experience and play with other applications. Take note of what works and what doesn't. Explore this mobile pattern library and look for visual solutions to common UX challenges like Search, List Views, and Sign Up Flows.
-
Digging into the Code
Time to write some mobile friendly CSS! Read through the documentation for Bootstrap's Responsive Design to learn how to write conditional CSS based on a device's width or viewport. Now try styling some of your web application's elements differently using Bootstrap's media queries. Drag your browser window back and forth to see them in action. You can even hide and show elements based on the width of the device.
-
Reusable UI Resources for the Win
It's good to use a visual language in your applications that your users will understand. Most icon fonts are modeled after bulletproof visual language and can also lend you a ton of versatility when you're coding. You can scale an icon's width and height just by changing the font-size attribute in your CSS. You can even add cool effects like image-mask overlays to give your icons gradients. And because these icons scale the way fonts do, you don't have to make any CSS changes for them to look great on retina displays.
-
Adding Some High Resolution Personality to your Designs
If you're a developer, you probably don't spend a lot of time in Photoshop designing pixel-perfect swatches for stylish background images. Subtle Patterns provides you with a ton of well-designed and royalty-free background images ready for download. The image .zip even comes with the 2x image for retina support. Download a few and see if you can't find the perfect background swatch for your website.
Julie Ann Horvath
Designer
I'm a designer and frontend developer. I like to think of myself as an open source advocate with a big heart for making mockups in markup. I spend a lot of my time speaking at conferences and volunteering to teach (more) women to code.
