The app experience should be made up of these distinct parts:
[]
Adorable Avatars Free, square avatars that look like little, colorful monster faces. The best part of the service is that when you pace a unique string at the end, it will always serve the same image so the avatar is always the same for that user. Example: https://api.adorable.io/avatars/200/matt@sproutsocial.com.png
~~PlaceIMG — Free, random placeholder images with simple URL-based size and category configuration. Example: https://placeimg.com/200/200/tech~~ Too damn slow and keeps choking my page reloads in development!
LoremFlickr - Better than because it supports query strings which will generate different images on the same page at the same size.
iOS > Settings > Safari > Advanced > Web Inspector
xxxxxxxxxx<html lang="en-us"> <head> <meta charset="utf-8"> <title>Bambu by Sprout Social</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="panel-1"> <div class="navigation-bar"> <div>Options</div> Stories <div>Profile</div> </div> <div class="table-view"> <div class="item" onclick="showStory()"> <img src="https://placeimg.com/200/200/tech"> <div> <p class="featured">Featured</p> <h1>Kris</h1> <p>Excerpt</p> <small>Byline</small> </div> </div> <div class="item" onclick="showStory()"> <img src="https://placeimg.com/200/200/tech"> <div> <p class="featured">Featured</p> <h1>Title</h1> <p>Excerpt</p> <small>Byline</small> </div> </div> <div class="item" onclick="showStory()"> <img src="https://placeimg.com/200/200/tech"> <div> <p class="featured">Featured</p> <h1>Title</h1> <p>Excerpt</p> <small>Byline</small> </div> </div> </div> </div> <div class="scroll-view" id="panel-2"> <div class="navigation-bar"> <div onclick="hideStory()">Back</div> Article <div onclick="showCompose()">Share</div> </div> Humble hero <img src="https://placeimg.com/350/350/tech"> </div> <div class="scroll-view" id="panel-3"> <div class="navigation-bar"> <div onclick="hideCompose()">Back</div> Share <div onclick="share()">Share</div> </div> <div>Schedule - maybe make this more like share, something that happens after you write your message, perhaps a new share confirmation screen that includes the meta data preview with network-specific message formatting, a huge Send button with network-specific text, icon, and color, support for multi-network posting, scheduling, and metrics about that individual’s audience (you are sharing this with your 1,234 followers (aggregate when multi-network)</div> <div>Pick network – maybe we do the same with this since all our default text rules are written to accommodate the lowest common denomenator—Twitter’s 140 character limit … also, maybe we automatically switch to Facebook if they try to write a longer message and disable LinkedIn if they write too long of one (we might be getting into extreme rocking the boat territory here)</div> <textarea>My response to the story I just read that I am going to share with the world because I care about this industry and the place my company has in it.</textarea> <div>View options – choose a starting point from a list of canned messages so my voice is better aligned with the company voice</div> </div> <!--<div class="scroll-view" id="panel-4"> <div class="navigation-bar"> <div onclick="hideCompose()">Back</div> Share <div onclick="share()">Share</div> </div> </div> <div class="scroll-view" id="panel-5"> <div class="navigation-bar"> <div onclick="hideCompose()">Back</div> Share <div onclick="share()">Share</div> </div> </div>--> <!--<img src="https://api.adorable.io/avatars/200/matt@sproutsocial.com.png">--> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="scripts.js"></script> </body></html> https://code.jquery.com/jquery-2.2.3.min.js