public-mirrors/NewsBlur
1
0
Fork 0
mirror of https://github.com/samuelclay/NewsBlur.git synced 2025-08-21 05:45:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
NewsBlur/blog/_site/2021/07/01/refreshing-newsblur-design/index.html

146 lines
9.6 KiB
HTML
Raw Normal View History

Redesign blog post, nearly done.
2021-07-01 15:01:42 -04:00
<!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>
Polishing redesign blog post.
2021-07-01 16:25:04 -04:00
<p><img src="/assets/redesign-web.png" style="width: 750px;" /></p>
Redesign blog post, nearly done.
2021-07-01 15:01:42 -04:00
<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>
Adding graf about rivers.
2021-07-01 16:38:43 -04:00
<p>Those multiple rivers come in handy when you want to follow different interests at a glance. You can of course change which individual feeds or folders is loaded, letting you focus on saved searches, infrequent stories, a single feed, or everything you’re subscribed to.</p>
Redesign blog post, nearly done.
2021-07-01 15:01:42 -04:00
<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>
Polishing redesign blog post.
2021-07-01 16:25:04 -04:00
<video autoplay="" loop="" playsinline="" width="500" style="width: 500px;border: 2px solid rgba(0,0,0,0.1)">
Redesign blog post, nearly done.
2021-07-01 15:01:42 -04:00
<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>
Polishing redesign blog post.
2021-07-01 16:25:04 -04:00
<p><img src="/assets/redesign-full-bleed.jpg" style="border: 2px solid rgba(0,0,0,0.1);" /></p>
Redesign blog post, nearly done.
2021-07-01 15:01:42 -04:00
Polishing redesign blog post.
2021-07-01 16:25:04 -04:00
<p>There’s many ways to adjust story titles to fit. Pack them in dense or offer titles room to breathe.</p>
Redesign blog post, nearly done.
2021-07-01 15:01:42 -04:00
Polishing redesign blog post.
2021-07-01 16:25:04 -04:00
<p><img src="/assets/redesign-bottom.jpg" style="border: 2px solid rgba(0,0,0,0.1);" /></p>
Redesign blog post, nearly done.
2021-07-01 15:01:42 -04:00
Polishing redesign blog post.
2021-07-01 16:25:04 -04:00
<p>The redesign has also come to both of the official Android and iOS apps. Right now both are in beta testing, but you can join the <a href="https://testflight.apple.com/join/hYk9WU3f">iOS TestFlight</a> or the <a href="https://play.google.com/store/apps/details?id=com.newsblur&amp;hl=en_US&amp;gl=US">Android beta</a>.</p>
<p><img src="/assets/redesign-ios-android.png" style="" /></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>. If you’ve enjoyed using NewsBlur and are a fan of this grand redesign, please take a moment to share on social media that you read your news with the help of NewsBlur.</p>
Redesign blog post, nearly done.
2021-07-01 15:01:42 -04:00
</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>
Reference in a new issue Copy permalink