We sometimes forget that mobile devices can make phone calls, and also that some desktop configurations can launch VoIP applications to initiate a phone call. We’re including an easy way for users to facilitate a phone call, which in some cases might make sense (i.e. a mobile user who might prefer finishing the transaction over the phone versus going through a checkout flow on their mobile device).
Now that we have a strong, semantic foundation in place, let’s move onto adding style enhancements.
When crafting our CSS, we’ll do everything in our power to keep things lightweight and as fluid as possible. We understand that all these devices have many different screen sizes, and that tomorrow’s devices won’t have the same resolutions as today’s. Because screen size is an unknown, we’ll use the content itself to determine how the layout should adjust to its container.
Separate style sheet for larger screens
We’re creating two separate CSS files, style.css and enhanced.css in order to deliver basic styles for screens less than 40.5em and using media queries to serve up enhanced styles for screens larger than 40.5em.