This is how Wunderlist designed its app for the Apple Watch
Wunderlist’s head of design, Ben Lehnert, has gone into detail about how the company designed its app for the Apple Watch.
Not wanting to try and fit everything from the desktop and mobile apps onto the Apple Watch, the Wunderlist team decided to only implement those features that were extremely relevant to users. The goal is to quickly get users to where they need to be, according to Lehnert on the Wunderlist blog:
We designed the Home View in a unique way that gives you access to the most important things first. You can quickly jump to your Inbox, your agenda for Today, and important to-dos that are assigned to you. Those four buttons give you a bird’s eye view of everything you need and want to do. And in case you want to jump to a specific list, simply use the Digital Crown and scroll through all your lists.
Wunderlist is one of many apps that has been updated with support for the Apple Watch, and will be available for watch owners to use when the device hits stores in first-wave launch countries on April 24.
Source: Wunderlist
<!–*/
<!–*/
<!–*/
.devicebox
background-color: #5CB8DB;
border: 1px solid #E2E9EB;
float: right;
display: block;
margin: 0 0px 10px 10px;
max-width: 350px;
overflow: hidden;
width: 50%;
.devicebox h3
background: #8D98BD;
color: #fff;
font-family: “camptonmedium”,sans-serif;
font-size: 20px;
margin-bottom: 0;
margin-top: 0;
padding: 0;
text-align: center;
.devicebox h3 a
display: block;
line-height: 30px;
padding: 0 10px;
.devicebox h3 a:hover
background: #7e88aa;
text-decoration: none;
.devicebox .video
margin: auto;
border: 0px;
.devicebox p,
.entry-content .devicebox p > img,
.devicebox img
margin: 0px;
max-width: 100%;
padding: 0px;
.devicebox,
.devicebox a,
.devicebox a:active,
.devicebox a:hover,
.devicebox a:link,
.devicebox a:visited,
.devicebox p,
.devicebox ul,
.devicebox ul li,
.devicebox li
color: #fff;
.devicebox a:hover
text-decoration: underline;
.devicebox p,
.devicebox ul,
.devicebox ul li,
.devicebox li
border-width: 0px;
font-family: “camptonlight”,sans-serif;
font-size: 16px;
padding: initial;
.devicebox ul
margin: 0;
padding: 0.5em 1em 1em 30px;
.devicebox ul li
display: list-item;
.devicebox ul,
.devicebox ul li,
.devicebox li
line-height: 24px;
list-style: disc outside none;
.devicebox ul li:before
display: none;
.devicebox p ~ p
padding: 0px 15px 15px;
line-height: 1.25;
.devicebox p:first-of-type + p
padding: 15px;
.field-items p:last-of-type + .devicebox,
.slide p:last-of-type + .devicebox,
.article-body-wrap p:last-of-type + .devicebox,
.field-items p:last-of-type + .devicebox ~ .devicebox,
.slide p:last-of-type + .devicebox ~ .devicebox,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox
float: none;
margin: 0 auto 30px;
max-width: 700px;
min-height: 225px;
position: relative;
width: 100%;
.field-items p:last-of-type + .devicebox .video,
.slide p:last-of-type + .devicebox .video,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox .video,
.field-items p:last-of-type + .devicebox ~ .devicebox .video,
.slide p:last-of-type + .devicebox ~ .devicebox .video,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox .video
bottom: 0px;
left: 50%;
position: absolute;
right: 0px;
top: 30px;
.field-items p:last-of-type + .devicebox .video_iframe,
.slide p:last-of-type + .devicebox .video_iframe,
.article-body-wrap p:last-of-type + .devicebox .video_iframe,
.field-items p:last-of-type + .devicebox ~ .devicebox .video_iframe,
.slide p:last-of-type + .devicebox ~ .devicebox .video_iframe,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox .video_iframe
height: 100%;
padding: 0px;
.field-items p:last-of-type + .devicebox ul,
.slide p:last-of-type + .devicebox ul,
.article-body-wrap p:last-of-type + .devicebox ul,
.field-items p:last-of-type + .devicebox p,
.slide p:last-of-type + .devicebox p,
.article-body-wrap p:last-of-type + .devicebox p,
.field-items p:last-of-type + .devicebox ~ .devicebox ul,
.slide p:last-of-type + .devicebox ~ .devicebox ul,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox ul,
.field-items p:last-of-type + .devicebox ~ .devicebox p,
.slide p:last-of-type + .devicebox ~ .devicebox p,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox p
width: 43%;
.field-items p:last-of-type + .devicebox h3 + p,
.slide p:last-of-type + .devicebox h3 + p,
.article-body-wrap p:last-of-type + .devicebox h3 + p,
.field-items p:last-of-type + .devicebox ~ .devicebox h3 + p,
.slide p:last-of-type + .devicebox ~ .devicebox h3 + p,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox h3 + p
bottom: 0;
left: 50%;
overflow: hidden;
position: absolute;
right: 0;
top: 30px;
width: 50%
.field-items p:last-of-type + .devicebox h3 + p img,
.slide p:last-of-type + .devicebox h3 + p img,
.article-body-wrap p:last-of-type + .devicebox h3 + p img,
.field-items p:last-of-type + .devicebox ~ .devicebox h3 + p img,
.slide p:last-of-type + .devicebox ~ .devicebox h3 + p img,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox h3 + p img
float: right;
height: 100%;
width: auto;
@media all and (max-width: 500px)
.devicebox
float: none;
margin: 0 0 30px;
max-width: 100%;
width: 100%;
.field-items p:last-of-type + .devicebox .video,
.slide p:last-of-type + .devicebox .video,
.article-body-wrap p:last-of-type + .devicebox .video,
.field-items p:last-of-type + .devicebox ~ .devicebox .video,
.slide p:last-of-type + .devicebox ~ .devicebox .video,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox .video
left: 0;
position: relative;
top: 0;
.field-items p:last-of-type + .devicebox .video_iframe,
.slide p:last-of-type + .devicebox .video_iframe,
.article-body-wrap p:last-of-type + .devicebox .video_iframe,
.field-items p:last-of-type + .devicebox ~ .devicebox .video_iframe,
.slide p:last-of-type + .devicebox ~ .devicebox .video_iframe,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox .video_iframe
padding-bottom: 56.25%;
.field-items p:last-of-type + .devicebox h3 + p,
.slide p:last-of-type + .devicebox h3 + p,
.article-body-wrap p:last-of-type + .devicebox h3 + p,
.field-items p:last-of-type + .devicebox ~ .devicebox h3 + p,
.slide p:last-of-type + .devicebox ~ .devicebox h3 + p,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox h3 + p
left: 0;
position: relative;
top: 0;
.field-items p:last-of-type + .devicebox ul,
.slide p:last-of-type + .devicebox ul,
.article-body-wrap p:last-of-type + .devicebox ul,
.field-items p:last-of-type + .devicebox ~ .devicebox ul,
.slide p:last-of-type + .devicebox ~ .devicebox ul,
.article-body-wrap p:last-of-type + .devicebox ~ .devicebox ul
width: auto;
/*–>*/
/*–>*/
/*–>*/
AIVAnet 