mirror of
https://github.com/samuelclay/NewsBlur.git
synced 2025-04-13 09:42:01 +00:00
139 lines
8.7 KiB
HTML
139 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en"><head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="shortcut icon" href="https://newsblur.com/media/img/favicon.ico" type="image/png" />
|
||
<link rel="icon" href="https://newsblur.com/media/img/favicon_32.png" sizes="32x32"/>
|
||
<link rel="icon" href="https://newsblur.com/media/img/favicon_64.png" sizes="64x64"/><!-- Begin Jekyll SEO tag v2.7.1 -->
|
||
<title>Redesigning NewsBlur on the web, iOS, and Android | The NewsBlur Blog</title>
|
||
<meta name="generator" content="Jekyll v4.2.0" />
|
||
<meta property="og:title" content="Redesigning NewsBlur on the web, iOS, and Android" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta name="description" content="This past year we’ve focused on maintenance and improving quality behind the scenes. It just so happens that the urge to clean is so strong that this work extended to the front-end. After months of work, today we’re launching a redesigned NewsBlur for all three platforms: on the web, on iOS, and on Android. There’s a lot that’s new." />
|
||
<meta property="og:description" content="This past year we’ve focused on maintenance and improving quality behind the scenes. It just so happens that the urge to clean is so strong that this work extended to the front-end. After months of work, today we’re launching a redesigned NewsBlur for all three platforms: on the web, on iOS, and on Android. There’s a lot that’s new." />
|
||
<link rel="canonical" href="https://blog.newsblur.com/2021/07/01/refreshing-newsblur-design/" />
|
||
<meta property="og:url" content="https://blog.newsblur.com/2021/07/01/refreshing-newsblur-design/" />
|
||
<meta property="og:site_name" content="The NewsBlur Blog" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="article:published_time" content="2021-07-01T00:00:00-04:00" />
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta property="twitter:title" content="Redesigning NewsBlur on the web, iOS, and Android" />
|
||
<script type="application/ld+json">
|
||
{"@type":"BlogPosting","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://blog.newsblur.com/assets/newsblur_logo_512.png"}},"headline":"Redesigning NewsBlur on the web, iOS, and Android","dateModified":"2021-07-01T00:00:00-04:00","datePublished":"2021-07-01T00:00:00-04:00","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.newsblur.com/2021/07/01/refreshing-newsblur-design/"},"description":"This past year we’ve focused on maintenance and improving quality behind the scenes. It just so happens that the urge to clean is so strong that this work extended to the front-end. After months of work, today we’re launching a redesigned NewsBlur for all three platforms: on the web, on iOS, and on Android. There’s a lot that’s new.","url":"https://blog.newsblur.com/2021/07/01/refreshing-newsblur-design/","@context":"https://schema.org"}</script>
|
||
<!-- End Jekyll SEO tag -->
|
||
<link rel="stylesheet" href="/assets/main.css">
|
||
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6565292/711824/css/fonts.css" />
|
||
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6565292/731824/css/fonts.css" /><link type="application/atom+xml" rel="alternate" href="https://blog.newsblur.com/feed.xml" title="The NewsBlur Blog" /></head>
|
||
<body><header class="site-header" role="banner">
|
||
|
||
<div class="wrapper"><a class="site-title" rel="author" href="/">
|
||
<div class="site-title-image">
|
||
<img src="/assets/newsblur_logo_512.png">
|
||
</div>
|
||
<div class="site-title-text">The NewsBlur Blog</div>
|
||
</a><nav class="site-nav">
|
||
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
|
||
<label for="nav-trigger">
|
||
<span class="menu-icon">
|
||
<svg viewBox="0 0 18 15" width="18px" height="15px">
|
||
<path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
|
||
</svg>
|
||
</span>
|
||
</label>
|
||
|
||
<div class="trigger"><a class="page-link" href="https://www.newsblur.com">Visit NewsBlur ➤</a></div>
|
||
</nav></div>
|
||
</header>
|
||
|
||
<header class="site-subheader" role="banner">
|
||
|
||
<div class="wrapper">
|
||
<div class="top">
|
||
NewsBlur is a personal news reader that brings people together to talk about the world.
|
||
</div>
|
||
<div class="bottom">
|
||
A new sound of an old instrument.
|
||
</div>
|
||
</div>
|
||
|
||
</header>
|
||
<main class="page-content" aria-label="Content">
|
||
<div class="wrapper">
|
||
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
|
||
|
||
<header class="post-header">
|
||
<h1 class="post-title p-name" itemprop="name headline">Redesigning NewsBlur on the web, iOS, and Android</h1>
|
||
<p class="post-meta">
|
||
<time class="dt-published" datetime="2021-07-01T00:00:00-04:00" itemprop="datePublished">Jul 1, 2021
|
||
</time></p>
|
||
</header>
|
||
|
||
<div class="post-content e-content" itemprop="articleBody">
|
||
<p>This past year we’ve focused on maintenance and improving quality behind the scenes. It just so happens that the urge to clean is so strong that this work extended to the front-end. After months of work, today we’re launching a redesigned NewsBlur for all three platforms: on the web, on iOS, and on Android. There’s a lot that’s new.</p>
|
||
|
||
<p>To start, let’s take a look below at the redesigned NewsBlur.</p>
|
||
|
||
<p><img src="/assets/redesign-web.jpg" style="width: 750px;" /></p>
|
||
|
||
<p>Loads of new features:</p>
|
||
|
||
<ul>
|
||
<li>The dashboard now has multiple, customizable rivers of news</li>
|
||
<li>Image previews are now customizable by size and layout</li>
|
||
<li>Story previews are also customizable by length</li>
|
||
<li>Images are now full bleed on the web (edge-to-edge)</li>
|
||
<li>Controls have been re-styled and made more accessible</li>
|
||
<li>Sizes, spaces, and text have all been tweaked for a more legible read</li>
|
||
<li>Upgraded backend: Python 2 to Python 3, latest Django and libraries, containerized infrastructure</li>
|
||
<li>Both Android and iOS apps have been updated with the new design</li>
|
||
</ul>
|
||
|
||
<p>Below you can see the design in action. Notice how easy it is to change where the image preview is located as well as adjust the number of lines of story text to show.</p>
|
||
|
||
<p>
|
||
<video autoplay="" loop="" playsinline="" width="500" style="width: 500px;margin: 0 auto;display: block; border: 2px solid rgba(0,0,0,0.1)">
|
||
<source src="/assets/redesign-content-preview.mp4" type="video/mp4" />
|
||
</video>
|
||
</p>
|
||
|
||
<p>The reading experience itself has also seen improvement. Full bleed images have been ported over from iOS to both Android and the web. This means that images will now run edge-to-edge. And the controls at the top and bottom of the web app have been restyled to be easier to understand at a quick glance.</p>
|
||
|
||
<p><img src="/assets/redesign-full-bleed.jpg" style="margin: 0 auto; border: 2px solid rgba(0,0,0,0.1);" /></p>
|
||
|
||
<p>And on mobile:</p>
|
||
|
||
<p><img src="/assets/redesign-ios-android.jpg" style="width: 750px;" /></p>
|
||
|
||
<p>This whole redesign weighs in at a whopping 1,316 commits, which <a href="https://github.com/samuelclay/NewsBlur/compare/dashboard3">you can view on GitHub</a>.</p>
|
||
|
||
</div><a class="u-url" href="/2021/07/01/refreshing-newsblur-design/" hidden></a>
|
||
</article>
|
||
|
||
</div>
|
||
</main><footer class="site-footer h-card">
|
||
<data class="u-url" href="/"></data>
|
||
|
||
<div class="wrapper">
|
||
|
||
<h2 class="footer-heading">The NewsBlur Blog</h2>
|
||
|
||
<div class="footer-col-wrapper">
|
||
|
||
|
||
<div class="footer-col footer-col-1"><ul class="social-media-list"><li><a href="https://github.com/samuelclay"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">samuelclay</span></a></li><li><a href="https://www.twitter.com/newsblur"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">newsblur</span></a></li><li><a href="mailto:blog@newsblur.com?subject=Hello from the NewsBlur blog"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#email"></use></svg> <span class="username">blog@newsblur.com</span></a></li></ul>
|
||
</div>
|
||
|
||
<div class="footer-col footer-col-3">
|
||
<p>NewsBlur is a personal news reader that brings people together to talk about the world.<br />
|
||
A new sound of an old instrument.<br />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</footer>
|
||
</body>
|
||
|
||
</html>
|