‘Mobile first’ in the cultural sense can also refer to the fact that for many people, especially babies and young children, a mobile device is often the first connected device they interact with and become familiar with. This mobile-first mentality shapes how they interact with the world and creates expectations for everything around them, including non-touch devices and inanimate objects, to be intuitive, touch-friendly, and always on. These mobile-first minds are unencumbered by mental models from computing’s past, and as a result will certainly shape what we expect from our connected world moving forward.
The web developer plays an essential role in the process of building and refining a mobile-friendly website. Choosing the right responsive framework and staying up-to-date on evolving web standards can make the process of going mobile easier and more effective. By working with designers and communicators, developers can build a usable and accessible “mobile first” website that scales to fit any screen size.
Webkit just added support for the new
srcset attribute. From the Webkit blog:
WebKit now supports the
srcsetattribute on image (
img) elements (official specification from the W3C). This allows you, the developer, to specify higher-quality images for your users who have high-resolution displays, without penalizing the users who don’t. Importantly, it also provides a graceful fallback for browsers that don’t yet support the feature.
Although it will be a while before this is usable across a broad spectrum of browsers, it’s progress in a good direction.
Texas A&M Information Technology recently redesigned Security.tamu.edu thinking mobile first. Our team worked to streamline and reorganize the content to improve readability. The site is divided into articles on big topics like identity theft or protecting confidential information. Each article has an introduction paragraph and sections with clear headings to make the content easy to scan. On mobile devices, the body content is converted into an accordion, which keeps scrolling to a minimum and allows readers to select the topics most relevant to them.
Resources that were discussed in the RWD Clinic on Friday, June 14, 2013:
- Barebones Foundation 4 WP theme – http://fwp.drewsymo.com/
- Barebones Foundation 3 WP theme – http://themes.required.ch/
- One of thousands of places to find premium responsive wordpress themes –http://themeforest.net/category/wordpress
- Article discussing different responsive table techniques – http://elvery.net/demo/responsive-tables/
- Reflowing the table on smaller screens – http://css-tricks.com/responsive-data-tables/
- Zurb responsive tables – http://zurb.com/playground/responsive-tables
Other resources mentioned
- Live, web-based browser testing service – http://www.browserstack.com/
- Interface builder for web apps, export to responsive HTML and CSS – http://www.divshot.com/
- Client side code for delivering retina images to compatible devices – http://retinajs.com/
- Glyph font replacement article – http://alistapart.com/article/the-era-of-symbol-fonts
- Glyph font replacement – http://symbolset.com/
- PNG compressor – http://tinypng.org/
- CSS/JS minification – http://refresh-sf.com/yui/
- jQuery plugin for responsive video – http://fitvidsjs.com/
- Responsive heading text – http://fittextjs.com/
Watch the presentation or download, Best of both worlds: How to think like a designer, work like a developer, at mediamatrix.tamu.edu/streams/491562/IT_Forum_06-05-13.
The speakers, Laura Root and Xavier Porter, graphic designers with Texas A&M Information Technology, provide insights on how the design process fits into the new responsive website paradigm. Key takeaways include how to integrate RWD into your team process, the importance of wireframes, and helpful tools and resources for designers and developers.