Full restyle #419

finnhodgkin · 2017-10-06T09:48:55Z

New styling for:

~~Restyles the nav so the shadow only appears once scrolling begins (pure css)~~
Changes white pages to a white nav
Changes the portfolio section on the homepage and portfolio page so it's more responsive and the images can no longer escape the bounds of each element
Adds padding and raises the font size of the titles on the home page, portfolio page and blog
Changes the design of the blog page to be more in line with the original
Restyles the home-page to be like the original designs.
Adds a new larger shadow to css for elements like the portfolio boxes and the values paper-page-like title element

Also adds a max width that's more in line with the original designs. #407

… other pages. Adds padding to values page. #407

finnhodgkin · 2017-10-06T09:50:00Z

There are some major changes to the homepage that don't fit with the rest of the site but could easily be swapped back or applied to the other pages. I thought it would be worth applying them so people could see what it looked like exactly like the original designs.

Mostly the side borders:

finnhodgkin · 2017-10-06T09:51:14Z

The be/make image is a bit messy (I accidentally uninstalled Photoshop 😢). If the restyle gets approved I'm happy to put together a nicer version 😊

ghost · 2017-10-09T10:11:48Z

@finnhodgkin https://pixlr.com/editor/ is a nice photoshop alternative

Changes look good to me!

iteles · 2017-10-09T11:38:21Z

I promise to review this this afternoon!

iteles

@finnhodgkin Thanks for this! Overall it's looking much tighter and more consistent <3

Not all of these are blockers, I find padding and excess (or lack of) whitespace quite stressful so I would rather get those fixed before this is merged in 😊

I have tested by far and away mostly on desktop, I trust @markwilliamfirth has thought 👍

iteles · 2017-10-09T18:07:04Z

index.html

-    <section class="dwyl-bg-mint ph4 pt5 pb4 tc">
-      <img src="./img/common/mvp.png" alt="We can be/make your MVP" class="center tc pt4"/>
+    <section class="ph4 pt5 pb4 tc">
+      <h2 class="pa0 ma0 f1 b dwyl-dark-gray text-shadow-1">We can <span class="relative transparent"><img src="/img/common/be-make.png" class="dwyl-mint be-make dib relative"/>Make</span> your MVP*</h2>


I'm assuming I'm getting this because I'm just opening the page in the browser and it doesn't know where to load the image from?

How does this play out in screen readers or SEO impact?

The weird span/image mix is just leftover mess from trying to get #308 working. Now I know this restyle is going ahead I'll make an image for the section.

iteles · 2017-10-09T18:07:25Z

index.html

-    <section class="dwyl-bg-mint ph4 pt5 pb4 tc">
-      <img src="./img/common/mvp.png" alt="We can be/make your MVP" class="center tc pt4"/>
+    <section class="ph4 pt5 pb4 tc">
+      <h2 class="pa0 ma0 f1 b dwyl-dark-gray text-shadow-1">We can <span class="relative transparent"><img src="/img/common/be-make.png" class="dwyl-mint be-make dib relative"/>Make</span> your MVP*</h2>


alt seems to have disappeared from the image here (still in the commented out one below

iteles · 2017-10-09T18:11:47Z

index.html

-    <section class="dwyl-bg-mint ph4 pt5 pb4 tc">
-      <img src="./img/common/mvp.png" alt="We can be/make your MVP" class="center tc pt4"/>
+    <section class="ph4 pt5 pb4 tc">
+      <h2 class="pa0 ma0 f1 b dwyl-dark-gray text-shadow-1">We can <span class="relative transparent"><img src="/img/common/be-make.png" class="dwyl-mint be-make dib relative"/>Make</span> your MVP*</h2>


Haven't been able to fully test this in mobile because of the missing image, but the line height feels a little off, most likely an optical illusion because of the combination of the all lower case your with no ascenders with the line above and the descender in your with the capitalised MVP in the line below. Just mentioning it for a sanity check though:

iteles · 2017-10-09T18:15:38Z

index.html

+            <li class="v-top dib w-100 w-50-ns f5 dwyl-yellow fw3 mb3 pb2 pr3">Data Visualisation</li>
+          </ul>
+        </div>
+        <a href="#contact" class="dib center link mt2 mb5 ph4 pv2 dwyl-bg-yellow dwyl-dark-gray br2 f5 shadow-4">Enquire Now</a>


The lack of padding at the bottom of this section feels like a bug to me:

I know this is what is in the designs (as per the last comment here: #407 (comment)) but the lack of symmetry between the white padding at the top and the abrupt end of this section is completely lost on me.

Would you agree @markwilliamfirth @finnhodgkin ?

These changes are implementing the designs that we accepted, so this question is probably for @harrygfox

I haven't changed the bottom padding, but the white margins don't exist anymore and I think it makes the bottom look less weird.

iteles · 2017-10-09T18:18:08Z

index.html

-    <section class="dwyl-bg-mint center pv5-ns pb5-ns relative z-0">
+  </main>
+
+    <section class="dwyl-bg-mint center pv5-ns pb5-ns relative z-0 mw9">


Not entirely convinced by this section being boxed in by the sides, I feel like a footer should cover the expanse of the webpage, but not offended enough to ask for the change:

It does need to be consistent across the board however (see 404.html) and I think that would be easier if the Training box was enclosed within the white 'Services' box (essentially) and this expanded across the site.

I've expanded the footer and the training section:

I'm not convinced this looks better, but at least it's more consistent with the rest of the site.

iteles · 2017-10-09T18:35:31Z

portfolio.html

-      <section class="mw9 center ph3">
-        <h2 class="pl3 pr3 f2 mt0 w-100 tc tl-ns dwyl-dark-gray">Open Source</h2>
+      <section class="mw8 center ph3">
+        <h2 class="pl3 pr3 f1 mt0 w-100 tc tl-ns dwyl-dark-gray">Open Source</h2>
        <p class="pl3 pr3 f4 b ph0-m dwyl-dark-gray pb3">We also create and maintain over 200 open source repositories on <a href="https://github.com/dwyl" class="dwyl-teal-dark link" >GitHub</a>, check out some of our most popular ones below:</p>


This is a very random use of the dark-teal colour:

iteles · 2017-10-09T18:36:53Z

portfolio.html

-                and searchable!</p>
-              <img src="./img/common/science-museum-logo.jpg" alt="Science Museum logo" class="w-70 w-75-l pt3 pt2-l"/>
-            </div>
+        <div class="dt-m dt-l dt--fixed-m dt--fixed-l mb3 ph3 ph0-ns" style="border-spacing: 1rem 0px;">


These new cards are looking great 🎉

Shall we open an issue about the weird lack of consistency with the github cards directly below it?

iteles · 2017-10-09T18:38:57Z

team.html

    <section class="dwyl-dark-gray pt5 pb3 pb3-ns ph1 ph0-m ph3-l center tc mw9">
-      <h1 class="pt4-ns b">Meet the dwylers</h1>
+      <h1 class="pt4-ns pt6-l b f1 mt0">Meet the dwylers</h1>


That padding though 🙈

It would look better a little more like this:

iteles · 2017-10-09T18:42:09Z

values.html

        </a>
        <a href="/team" class="white link">
-          <button class="bn dib link ml2 mb3 ph3 pv2 dwyl-bg-mint white br2 f5 shadow-4 pointer istok-web">Meet the Team</button>
+          <button class="bn dib link mb3 ph3 pv2 dwyl-bg-mint white br2 f5 shadow-4 pointer istok-web">Meet the Team</button>


There seems to be less padding between the 'More than Just Software' section and the 'We believe in' section than between the value themselves:

This was quite confusing to the eye when I first scrolled down as I wasn't sure where to focus and this looked like one big glob of text.

iteles · 2017-10-09T18:42:44Z

values.html

@@ -116,7 +118,7 @@ <h3 class="dwyl-yellow mt1">People 🤝</h3>
            <a href="https://www.focushub.co.uk/" class="dwyl-yellow">a home for our London-based team at Focus Hub.</a>
          </p>
        </div>
-        <div class="dib w-45-ns ml4-m ml5-ns v-top">
+        <div class="dib w-45-ns ml0-m ml5-ns v-top pb5-ns pb0">


Comment on pb above 👍

…een #419

…#419 #394

…image #419

iteles

Thanks for all the changes @finnhodgkin !
I think we've left it long enough that we can say for certain that no one has any other comments. Merging 🎉

finnhodgkin added 6 commits October 5, 2017 18:26

Restyle nav so the shadow only appears once scrolling begins.

f37927f

Also adds a max width that's more in line with the original designs. #407

Adds white nav to portfolio and values pages and no-shadow nav to all…

4b9cfc4

… other pages. Adds padding to values page. #407

Fix homepage portfolio section #407

c5b899e

restyles home page to fit with original designs #407

20f8ec5

Restyles portfolio page to fit with the original designs #407

f31057e

removes no-shadow nav from page with different background colours #407

edaa96f

finnhodgkin added the awaiting-review An issue or pull request that needs to be reviewed label Oct 6, 2017

finnhodgkin assigned iteles and ZooeyMiller Oct 6, 2017

finnhodgkin requested review from iteles and ZooeyMiller October 6, 2017 09:48

dwylbot bot added the awaiting-review An issue or pull request that needs to be reviewed label Oct 6, 2017

dwyl deleted a comment from dwylbot bot Oct 6, 2017

finnhodgkin mentioned this pull request Oct 9, 2017

[WiP] Redesigned navbar and homepage #411

Closed

iteles added in-review Issue or pull request that is currently being reviewed by the assigned person and removed awaiting-review An issue or pull request that needs to be reviewed labels Oct 9, 2017

iteles requested changes Oct 9, 2017

View reviewed changes

iteles removed the in-review Issue or pull request that is currently being reviewed by the assigned person label Oct 9, 2017

iteles assigned ZooeyMiller and finnhodgkin and unassigned iteles and ZooeyMiller Oct 9, 2017

finnhodgkin added in-progress An issue or pull request that is being worked on by the assigned person T1h Time Estimate 1 Hour labels Oct 10, 2017

finnhodgkin unassigned ZooeyMiller Oct 10, 2017

finnhodgkin added 8 commits October 10, 2017 11:05

expands footer and training section backgrounds to fill the whole scr…

5ed6a64

…een #419

lowers top padding on the portfolio page #419

b9e9bc1

adds drop shadow to github repo cards #432

1c97af9

changes github link colour and adds an underline on the portfolio page …

00df528

…#419 #394

lowers padding on team page #419

ada9e42

fixes values page padding #419

fc9d261

makes nav shadow always visible on the homepage and adds new be/make …

ddfbb81

…image #419

adds shadow back to all top navbars #419

0c6a5e2

finnhodgkin added T4h Time Estimate 4 Hours and removed T1h Time Estimate 1 Hour labels Oct 10, 2017

merges master #419

37d1527

finnhodgkin assigned ghost and unassigned finnhodgkin Oct 10, 2017

finnhodgkin added awaiting-review An issue or pull request that needs to be reviewed and removed in-progress An issue or pull request that is being worked on by the assigned person labels Oct 10, 2017

finnhodgkin assigned iteles Oct 10, 2017

iteles added in-review Issue or pull request that is currently being reviewed by the assigned person and removed awaiting-review An issue or pull request that needs to be reviewed labels Nov 1, 2017

iteles approved these changes Nov 1, 2017

View reviewed changes

iteles merged commit f7e3b25 into master Nov 1, 2017

iteles deleted the blog-page branch November 1, 2017 23:13

This was referenced Nov 3, 2017

Keep card styling consistent #432

Closed

Improve design of Cookie Notification #427

Closed

Add Cloudflare setup to the readme #426

Closed

Differences between InVision design and live site #407

Closed

jammur unassigned ghost Dec 14, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Full restyle #419

Full restyle #419

finnhodgkin commented Oct 6, 2017 •

edited

Loading

finnhodgkin commented Oct 6, 2017 •

edited

Loading

finnhodgkin commented Oct 6, 2017

ghost commented Oct 9, 2017 •

edited by ghost

Loading

iteles commented Oct 9, 2017

iteles left a comment

iteles Oct 9, 2017

finnhodgkin Oct 10, 2017

iteles Oct 9, 2017

iteles Oct 9, 2017

iteles Oct 9, 2017

ghost Oct 10, 2017

finnhodgkin Oct 10, 2017

iteles Oct 9, 2017

finnhodgkin Oct 10, 2017 •

edited

Loading

iteles Oct 9, 2017

iteles Oct 9, 2017

iteles Oct 9, 2017

iteles Oct 9, 2017

iteles Oct 9, 2017

iteles left a comment

Full restyle #419

Full restyle #419

Conversation

finnhodgkin commented Oct 6, 2017 • edited Loading

finnhodgkin commented Oct 6, 2017 • edited Loading

finnhodgkin commented Oct 6, 2017

ghost commented Oct 9, 2017 • edited by ghost Loading

iteles commented Oct 9, 2017

iteles left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

finnhodgkin Oct 10, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

iteles left a comment

Choose a reason for hiding this comment

finnhodgkin commented Oct 6, 2017 •

edited

Loading

finnhodgkin commented Oct 6, 2017 •

edited

Loading

ghost commented Oct 9, 2017 •

edited by ghost

Loading

finnhodgkin Oct 10, 2017 •

edited

Loading