-
Notifications
You must be signed in to change notification settings - Fork 0
/
project-5.html
204 lines (169 loc) · 11.3 KB
/
project-5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<!-- Use title if it's in the page YAML frontmatter -->
<title>SVT Nyheter - Mobile Optimization</title>
<script src="javascripts/vendor/libs/modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css" />
<link href="stylesheets/application.css" rel="stylesheet" type="text/css" />
</head>
<body class="project-5">
<div class="u-wrapper">
<header class="Bar u-off-canvas-transition js-Bar--top">
<a href="#" class="Bar-link js-aboutLink Icon" data-controller='[{"offCanvas": {"type": "top", "allow-reinit": true, "deeplink": "about"}}]'><img src="icons/black/icon_arrow_next.svg" class="Icon-img Icon-right" alt=""><img src="icons/black/icon_arrow_up.svg" class="Icon-img Icon-up" alt=""><span class="Icon-text">About Me</span></a>
<div class="ProjectNavigation ProjectNavigation--right js-asyncLoad">
<a class="ProjectNavigation-next Icon Icon--extended" href="project-6.html" data-controller='[{"asyncPageLoad": {"selector": ".js-asyncLoad"}}]'><img src="icons/black/icon_arrow_nav_next.svg" class="Icon-img" alt=""><span class="Icon-text Icon-text--is-hidden">Next</span></a>
<a class="ProjectNavigation-previous Icon Icon--extended" href="project-4.html" data-controller='[{"asyncPageLoad": {"selector": ".js-asyncLoad"}}]'><img src="icons/black/icon_arrow_nav_prev.svg" class="Icon-img" alt=""><span class="Icon-text Icon-text--is-hidden">Previous</span></a>
<span class="ProjectNavigation-index">5 / 16</span>
<div class="ProjectNavigation-current">
<h1 class="ProjectNavigation-title">SVT Nyheter - Mobile Optimization</h1>
<a href="#" class="ProjectNavigation-infoLink Icon Icon--extended" data-controller='[{"toggler": {"selector": ".js-Info", "className": "Overlay--is-active", "clickElActiveClass": "ProjectNavigation-infoLink--is-selected", "deeplink": "info"}}]'>
<img src="icons/black/icon_info.svg" class="Icon-img" alt=""><span class="Icon-text Icon-text--is-hidden">Info</span>
</a>
</div>
</div>
</header>
<div class="OffCanvas js-OffCanvas u-off-canvas-transition">
<section class="Page">
<div class="Page-inner">
<div class="ContentBlock ContentBlock--small u-text-center">
<img src="/images/portfolio/robertlindin.jpg" alt="Me, posing" class="ContentBlock-image">
<small class="ContentBlock-caption">Robert Lindin.</small>
</div>
<div class="ContentBlock ContentBlock--big">
<h1 class="Page-header">What I do</h1>
<p class="Page-text">Passionate and visionary designer with the ability to see beyond conventions. Focuses on- and creates design for the actual needs, leading to measurable results. I am driven by the desire to implement projects with optimal execution and with maximum effect create genuine value.</p>
<p class="Page-text">I write HTML & CSS to make my designs come alive as digital products and services. And work together with skilled developers for implementation of advanced JavaScript and server-side technology.</p>
</div>
<div class="ContentBlock ContentBlock--small">
<h2 class="Page-subHheader">Cost</h2>
<span class="Page-popText">850 SEK / h</span>
<p class="Page-altText">I also offer per project pricing.</p>
<p class="Page-altText">Check out my <abbr title="Curriculum Vitae">CV</abbr> at <script type="IN/MemberProfile" data-id="https://www.linkedin.com/in/robertlindin" data-format="hover" data-text="Robert Lindin" data-related="false"></script></p>
</div>
</div>
</section>
</div>
<section class="Overlay js-Info js-asyncLoad">
<div class="Page Page--full u-centerVertical"><div class="Page-container u-centerVerticalInner"> <h2 class="Page-header Page-header--alt">Optimization</h2>
<p class="Page-text">Some of the things we worked with in this project:</p>
<ul class="Page-text">
<li>Better packaged stories</li>
<li>Increased Editor control of pace and dynamics in the news flow</li>
<li>Higher tempo in the news flow</li>
<li>Increased information density</li>
<li>More usable and dynamic use of breaking events like for example: “Right now” or “Live”</li>
<li>Increased focused on a compact “Latest news” section</li>
<li>Rebuilt right column with increased tempo and dynamics</li>
<li>Mobile- and touch friendly menus</li>
<li>Slow but high quality news repositioned to swipe areas in the bottom of the page</li>
<li>Labeling of sections and navigation to sections in the main news flow, increased of menu navigation</li>
<li>Rebuilt article with increased options around hierarchy and associated media</li>
<li>News related to the Story of the article placed in a swipe box in the bottom of the article</li>
<li>Touch-friendly icons and buttons</li>
</ul>
<p class="Page-text">…and obviously in a project of this size a lot more unmentioned things.</p>
<div class="Page-projectLink">
<a href="http://www.svt.se/nyheter" class="Page-blockLink--frame">SVT Nyheter Website</a>
<a href="https://itunes.apple.com/se/app/svt-nyheter/id735240056?mt=8" class="Page-blockLink--frame">SVT Nyheter iOS App</a>
</div>
<h3 class="Page-subHeader">Tags</h3>
<ul class="List">
<li class="List-item List-item--inline"><a href="" class="Tag">Interaction Design</a></li>
<li class="List-item List-item--inline"><a href="" class="Tag">User Interface Design</a></li>
<li class="List-item List-item--inline"><a href="" class="Tag">Web Design</a></li>
</ul>
</div>
</div>
<button class="CloseBtn CloseBtn--top Icon" data-controller='[{"toggler": {"selector": ".js-Info", "className": "Overlay--is-active", "deeplink": "info"}}]'><img src="icons/black/icon_close.svg" class="Icon-img" alt=""><span class="Icon-text Icon-text--is-hidden">Close</span></button>
</section>
<main class="Content js-content u-off-canvas-transition u-posRel u-fullHeight js-asyncLoad">
<ul class="Slider" data-controller='[{"slider": {}}]'>
<li class="Slider-item Slider-item--is-selected">
<img src="/images/portfolio/svt/nyheter/optimization/svt-nyheter-montage.jpg" alt="Slide 1" class="Slider-image">
</li>
<li class="Slider-item">
<img src="/images/portfolio/svt/nyheter/optimization/svt-nyheter-paket.jpg" alt="Slide 2" class="Slider-image">
</li>
<li class="Slider-item">
<img src="/images/portfolio/svt/nyheter/optimization/svt-nyheter-sport-lop.jpg" alt="Slide 3" class="Slider-image">
</li>
</ul>
<nav>
<ul class="DotNavigation StickyNavigation u-centerV js-StickyNavigation">
<li class="DotNavigation-item DotNavigation-item--is-selected"></li>
<li class="DotNavigation-item"></li>
<li class="DotNavigation-item"></li>
</ul>
</nav>
<nav>
<div class="StickyNavigation StickyNavigation--right u-centerV js-StickyNavigation js-GotoSlideNavigation">
<a href="#" class="Icon Icon--full StickyNavigation-item js-GotoSlideNavigation-previous"><img src="icons/black/icon_arrow_nav_up.svg" class="Icon-img" alt=""><span class="Icon-text Icon-text--is-hidden">Previous</span></a>
<a href="#" class="Icon Icon--full StickyNavigation-item js-GotoSlideNavigation-next"><img src="icons/black/icon_arrow_nav_down.svg" class="Icon-img" alt=""><span class="Icon-text Icon-text--is-hidden">Next</span></a>
</div>
</nav>
</main>
<footer class="Bar Bar--bottom u-off-canvas-transition js-Bar--bottom">
<a href="#" class="Bar-link js-contactLink Icon" data-controller='[{"offCanvas": {"type": "bottom", "allow-reinit": true, "deeplink": "contact"}}]'><img src="icons/black/icon_arrow_next.svg" class="Icon-img Icon-right" alt=""><img src="icons/black/icon_arrow_down.svg" class="Icon-img Icon-down" alt=""><span class="Icon-text">Contact Me</span></a>
</footer>
<div class="OffCanvas OffCanvas--bottom js-OffCanvas--bottom u-off-canvas-transition">
<section class="Page Page--bottom">
<div class="Page-inner" itemtype="http://microformats.org/profile/h-card" itemscope>
<div class="ContentBlock">
<h2 class="Page-subHeader">Send message</h2>
<form id="Send-message" method="post" action="mailto:robert.lindin@gmail.com">
<input type="text" placeholder="Name" id="Name" autocomplete="on">
<input type="email" placeholder="Email *" id="Email-address" autocomplete="on" required>
<textarea placeholder="Message …" id="Message"></textarea>
<button type="submit">Send</button>
</form>
</div>
<div class="ContentBlock ContentBlock--small">
<h2 class="Page-subHeader">Email</h2>
<p itemprop="email"><a href="mailto:robert.lindin@gmail.com">robert.lindin@gmail.com</a></p>
<h2 class="Page-subHeader">Phone</h2>
<p itemprop="phone"><a href="tel:+46706031019">+ 46 (0) 70 - 603 10 19</a></p>
</div>
<div class="ContentBlock ContentBlock--small">
<h2 class="Page-subHeader">Address</h2>
<p class="Address">
<span class="Address-name" itemprop="name">Robert Lindin</span>
<span class="Address-street" itemprop="street-address">Krukmakargatan 34</span>
<span class="Address-postal">
<span itemprop="postal-code">118 51</span>
<span itemprop="locality">Stockholm</span>
</span>
<span class="Address-country" itemprop="country-name">Sweden</span>
</p>
<a href="https://goo.gl/maps/xWjPA">Show map</a>
</div>
<div class="ContentBlock ContentBlock--small">
<h2 class="Page-subHeader">Social</h2>
<div class="fb-like" data-href="http://www.robertlindin.com" data-width="100%" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>
<div class="Twitter--follow">
<a href="https://twitter.com/robertlindin" class="twitter-follow-button" data-show-count="false">Follow @robertlindin</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="LinkedIn--profile">
<script type="IN/MemberProfile" data-id="https://www.linkedin.com/in/robertlindin" data-format="hover" data-text="Robert Lindin" data-related="false"></script>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="javascripts/application.js" type="text/javascript"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=223572841110412&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
</body>
</html>