Millennial Magazine Redesign April 2014

noel saw
Verified List
  • (0 votes)
  1. Gaya says:

    Just copied live site to staging 🙂

  2. noel saw says:

    Hi, Britt – User Pro documentation is here: http://userproplugin.com/userpro/forums/forum/tutorials/

  3. noel saw says:

    Thanks Gaya!
    Team, I also made an easy to remember URL that redirects to the full editable (read/write) version of this list (page):
    http://stratalist.net/millennial/

  4. noel saw says:

    Britt, please share with me the working of PSDs and Wireframe folder as “Share This Folder…” rather than “Share Dropbox Link”. Share this folder will allow us to see the changes as they’re made without you having to send us a sharing notification every time something is updated. Screenshot: http://goo.gl/4tXOQj

  5. Britt says:

    Noel- shared the folder with you yesterday. Please check again.

    Staging looks good! Everything is there.

  6. Gaya says:

    Hi Noel,

    I’m finishing homepage backend coding. Can’t figure out what Profiles and Spotlight are. Are those supposed to be categories because I didn’t find them in the list. I can use some other categories until we figure this out.

    In what order are contributors shown? Is it latest authors or randomly? And j

  7. Gaya says:

    * And are we going to use User Pro plugin for displaying the contributors?

    Cheers,
    Gaya

  8. Hi Gaya

    Profiles and Spotlights are categories. You can see both in the visuals as well as in the notes on the wireframes. All sections should be built to pull in from any category feed, but for section 6 (row 6 via Google Doc) I will be pulling from the Profile category and for section 7 (rows 7 & 8 via Google Doc) I will be pulling from the Spotlight category.

    Does this help?

    -Britt

  9. noel saw says:

    Hi Gaya, please create two new categories called “spotlight” and “profiles” – for now put some placeholder content there so the home page has “demo” content.

    For the Contributor bios, we are going to use the User Pro plugin’s default pages for the directory and bio profile page that get generated automatically. The only exception is the bio profile page will have a grid of thumbnails that show featured images of articles (posts) the author has on the site similar to this:
    http://stratalist.net/profile/neochrome/

    Thanks!
    Noel

  10. noel saw says:

    Hi Britt, quick question. For the “profiles” posts, are the “author” and “pubdate” pulled from the WP author name and post published date information? Or is this additional meta data we need via a custom field?

    Screenshot – see question text in blue:
    https://dl.dropboxusercontent.com/s/bwy964rq0lipcdy/2014-04-28%20at%2010.46%20AM%20%281%29.png

    Also could you do a quick mockup of the bio page:
    http://stratalist.net/profile/neochrome/

    Please stick with a 100% of the default layout on the left side but show how you want the post/article thumbnails to appear.

    For now there will be two open tasks for you on the list above – the other task is to look through how the User Pro custom fields are setup.

    Thanks!
    Noel

  11. Gaya says:

    Hi Britt and Noel, thanks for the response.

    Then I assume Photo, Cafe, Dessert, etc. are child categories under the Spotlight. And when you click on these, category listing should open, am I right?

    Also, here are some additional meta info that need clarification, see highlighted: https://dl.dropboxusercontent.com/u/25601876/profiles.jpg

    Regards,
    Gaya

  12. Hi Gaya

    The titles on the thumbnail in Spotlight are NOT child categories. Those thumbnails are created in Photoshop and the title is flat (not hyperlinked). When the image is clicked, it takes the user to the post page where the title of the post will be “Photo of the Day” “Cafe of the Day” “Dessert of the Day” – but in order to only show the first word of that title on the thumbnail, I will create it in Photoshop.

    Does this make sense?

    Britt

  13. Hey Noel

    1. Yes, the “author” and “pub date” are pulled from the WP author name and post published date. It does not require a custom field.

    2. I will create the bio page mockup with thumbnails.

    Thanks
    Britt

  14. noel saw says:

    Hi Britt, for the “Spotlight” section, let’s discuss in person tomorrow at Blankspaces. I want to give Gaya final directions by Thursday.

  15. Hi Noel, I just uploaded the mock bio page to the “visual” folder within MiLLENNiAL Redesigns. And yes, let’s discuss the Spotlight to clarify!

  16. noel saw says:

    Thanks got it. We’ll review tomorrow!

  17. noel saw says:

    Hi Gaya, for Spotlight are, the headline text will be embedded in the jpeg because they’re using the “header image” option.

    Also the titles that are on the PSD are just placeholder so those are not meant to go to a category page. They will go to individual posts.

    I’ve updated the PSD to indicate these are individual posts. Sorry for the confusion with previous titles that seem to indicate they were categories.
    https://dl.dropboxusercontent.com/s/mr4tqwf5xcq00c0/2014-04-30%20at%207.08%20PM.png

    But we’ll need a category called “Spotlight” that will pull the correct posts there.

  18. Gaya says:

    Hi,

    here is the first draft of featured post single template: http://milmagz.staging.wpengine.com/charity-water-brings-fresh-water-to-the-world/

    I put nRelate plugin to index the website for related content. It will take awhile.

    Britt, do you have a Disqus account? I’m asking because you used disqus in the designs. You can sign up here: https://disqus.com/profile/signup/ Then please, send me Disqus login details so I can setup the comments system on the website.

    Or if you want to use other commenting system (Facebook or WordPress core comments), please, let me know.

    Regards,
    Gaya

  19. Gaya says:

    Here’s the draft of Culture single post: http://milmagz.staging.wpengine.com/southern-culture-pancake-waffle-mix/

    I still need to work on sidebar and related posts layout.

  20. Gaya says:

    Here’s the News and Politics single post template, same with the layout: http://milmagz.staging.wpengine.com/airlines-debate-cellphone-calls-during-flight/

  21. Gaya says:

    On the homepage, in profiles module, it’s written Style next to author name. Is it a subcategory of Profiles?

  22. Hi Noel & Gaya

    I’ve updated the wireframe and visuals to match each other. Please review the dropbox file. I’ve customized all fonts – but it looks very similar to the samples you’ve already posted.

    I’ve removed the dropcap from the post layout wireframes. Also, Gaya, I removed the “category title” i.e. Style, from the visual on the homepage profile module.

    Things are looking good so far!

    Thanks!
    Britt

  23. noel saw says:

    Hi Britt, thanks for the update.

    It looks like you have a footer in the PSD but there’s no design or layout. Just one big black rectangle background. Please supply design asap. Once this is done, I think we have everything else we need in order to start the clock again for the first draft.

    Also sorry I didn’t notice this earlier but the “heart” like and other counter function for the right side bar widget area, I need to see with Gaya if we can include for this phase 1 since that function wasn’t defined in the wireframes. We might able to leverage an existing plugin but next time, we need to have the wireframe storyboard be all inclusive. Anything that’s on the visual design needs to originate from the wireframes other wise this is definitely what they call “scope creep” or adding features through visual design.

    Noel

  24. noel saw says:

    Hi Britt, forgot two things. I forgot to mention that I did create a to-do item for you above so please check mark that when it’s done for the footer design.

    Also please keep the design simple and straight forward as much as possible since we’re on a time and budget crunch 🙂

    Thanks!
    Noel

  25. noel saw says:

    Hi Britt, saw the new files thanks! Let’s start the clock today (May 6th) since I think you’ve answered most if not all of our questions.
    If there’s something missing, we’ll bring it your attention but for speed we are going to make an “executive decision” because of time/budget constraints. We’ll need to address anything that isn’t precisely defined in the wireframes on a future project please.

    Hi Gaya, I’ve added a to-do for you to review the footer widget area above.
    Let’s you and chat tomorrow to make sure we have everything now.

    Thanks team!
    Noel

  26. noel saw says:

    Hi Britt, forgot to mention, we can’t have the sidebar post functionality with the “favorite”/heart buttons and comments counter in phase 1.

    If you have identified an existing WP plugin that provides this functionality we can try it but if there are conflicts with our code we can’t guarantee that it will work as part of phase 1.

    Thanks!

  27. Hey Noel

    No need for the “heart-like” button. And no need to show comments if that’s easier.

    How’s it coming?

    Britt

  28. noel saw says:

    Hi Britt, we’re making progress. I had to divert Gaya’s attention to another project temporarily but she’s hopping back on it tomorrow.

    I think the home page is about 70% done. We’re not quite ready for feedback yet because we know not everything is there and/or working.

    Just a side note, it’s been 4 business days since the 6th when we got the “final” wireframes and PSDs 🙂 I think I had mentioned 7 business days for first draft of home page, 1 category page, and 1 inner page so we should be mostly on track 🙂

    Thanks!
    noel

  29. Hi Team

    I reviewed the staging site yesterday, and realized my dimensions for the homepage feature, news, and cultural stories were about an inch off. It was nice to see it live and make adjustments accordingly. I have uploaded the revised 1.1 Homepage PSD file, so that you can see my new dimensions. Feature story = 1920 x 930 NOT 1920 x 1080.

    The goal is to have the feature story take up the full screen when landing on the homepage – I did not previously account for the browser bar which is where I made my mistake.

    I also updated the feature story image to match what will be published on June 1st.

    @Noel – call me if this is confusing.

    Great work so far!

    Thanks
    Britt

  30. noel saw says:

    Hi Britt, the time/budget is really limited so normally we’d have to charge extra for the height adjustment but we can make this one change. But if there are *any* other changes we absolutely have to charge extra for it. Also note that what you’re seeing now is limited by your laptop resolution so it may not have that problem on other higher resolution devices.

    Noel

  31. noel saw says:

    Homepage: http://milmagz.staging.wpengine.com/
    Featured posts category: http://milmagz.staging.wpengine.com/category/featured-post/
    Single featured post: http://milmagz.staging.wpengine.com/charity-water-brings-fresh-water-to-the-world/ (I stretched images to 100% width, they’ll need to upload larger images in future for them to look crisp. Also video embeds are now responsive.)
    News / Culture / Profiles / Spotlight single post: http://milmagz.staging.wpengine.com/democracy-why-we-should-all-be-radically-moderate/
    News category: http://milmagz.staging.wpengine.com/category/world-headquarters/news-politics/
    Profiles category: http://milmagz.staging.wpengine.com/category/profiles/
    Spotlights category: http://milmagz.staging.wpengine.com/category/spotlight

  32. noel saw says:

    Hi Britt,
    There’s an inconsistency between the width of home page and article pages.

    Please see screenshot:
    https://dl.dropboxusercontent.com/s/ra02ft9laffrqoj/2014-05-29%20at%2010.18%20AM.png

    The home page width is a bit wider overall than the article pages.

    Also please confirm you want the navigation bar items to be aligned to the left margin of the home page and article pages. In your article PSD (as shown in the screenshot) that was not the case. So we’re making an alteration that wasn’t defined correctly in the PSD.

    Noel

  33. noel saw says:

    Here’s an overlay specifically for one of the article pages showing navigation bar alignment:
    https://dl.dropboxusercontent.com/s/7quiq1cyh849mpg/2014-05-29%20at%2010.26%20AM.png

  34. There needs to be about 1″ of breathing room from the left and about .25″ from the right. See screenshot and refer to PSD 2.2 – https://www.dropbox.com/s/et3q5y8vh4qb53s/2014-05-29%20at%2010.29%20AM.png

  35. Hi guys! The whole header/navigation bar should be persistent. See screenshot – http://glui.me/?i=wa30rvyb89m53vi/2014-05-29_at_11.34_AM.png/

  36. Layout #1 is functioning like Layout #2 … see screenshot – http://glui.me/?i=d314t5lfuer7v0x/2014-05-29_at_12.48_PM.png/

    There should be a distinction between homepage cover image (Position 1- Features) and the header image of the post layout #1 … see screenshot – http://glui.me/?i=nm7oolf1lqx789z/2014-05-29_at_12.51_PM.png/

    Also, please review PSD 1.4 Editorial Post – Layout 1 to see the difference … see screenshot – http://glui.me/?i=m0asvpa0d7uxrnz/2014-05-29_at_12.55_PM.png/

  37. noel saw says:

    Per phone call, we’re keeping the persistent navigation bar thin as possible to match best practices.

  38. The “Scroll down” on Position 1 is not properly responding to the largest screen size. Also, the anchor point should drop down to the next 5 articles (Positions 2-6). AND there is blank space to the right and left of Positions 1-6. See screenshot – http://glui.me/?i=nvhisaoqfysry8m/2014-05-30_at_9.06_AM.png/

  39. Also, the header is not aligned with the navigation bar. Millennial Magazine logo should be directly above the “Home” tab. Once aligned, the navigation bar and header need 50% more space from the left. See screenshot – http://glui.me/?i=duqqna6mjx42qfg/2014-05-30_at_9.18_AM.png/

  40. 2pts of space could be added in between post paragraphs for both Layout 1 & 2 … Also font size could be increased by 1pt on all posts. See screenshot – http://glui.me/?i=jas6w8jfld053ys/2014-05-30_at_9.23_AM.png/

  41. Layout 1 is experiencing a glitch with images in the body. I inserted an image that is 275px x 250px and set it to align left. It is taking up the whole page. See screenshot – http://glui.me/?i=f9591ljg9ubcbx9/2014-05-30_at_9.39_AM.png/

  42. noel saw says:

    Britt, we’ll fix the bugs but the font size optimizations will need to wait for phase 2.

    We already added 50% more space yesterday so we can add another 50% but this needs to be the last change for the navigation bar.

  43. noel saw says:

    hi Britt, the full width image is back for layout #1.

    Gaya said you probably accidentally deleted the original “features” category and then had recreated the “features” but the code relies on a hidden category ID number to show the full width image on layout #1. She updated the code to point to the new ID number for the new “features” category and it’s working now. There’s no need for you to do anything in the future for this as long as the “features” category ID doesn’t get deleted again.

    Also for the 275×250 px image, what’s the actual page URL please? Next time please also include the page URL bar in the screenshot or provide a link to the actual page.

    Noel

  44. noel saw says:

    We’re working on adjusting the logo – I think it got thrown off when the placeholder leaderboard got replaced.

    Also two things:
    1.) Don’t forget to update the social media links here in the widgets editor:
    https://dl.dropboxusercontent.com/s/3hed2093xyyrtrb/2014-05-30%20at%2010.15%20AM.png

    http://milmagz.staging.wpengine.com/wp-admin/widgets.php

    2.) Don’t forget to install this plugin after you push the site to live:
    https://wordpress.org/plugins/multicons/

    Then create the icons in Photoshop as PNG files and upload them into plugin. These are the icons that appear on the browser tabs and Apple iOS devices when you book mark something. Read the instructions on the WordPress.org page above.

  45. Ok will make those adjustments to the social media links.

    Here is the URL for the small images that are posting as full width. Also, I manually adjusted the font size to 20pts, but that is going to be hard to do it to every post. Is it possible to change that in the main code?

    http://milmagz.staging.wpengine.com/jaded-incorporated-get-real-on-the-coconut-sofa/

  46. noel saw says:

    Which font size? The body or headlines?

    We’re installing a plugin that will let you override the CSS and do the font tweaks yourself. We’ll let you know when it’s ready.

  47. The font size for the body. The plugin would be great! thanks

  48. noel saw says:

    Britt, I think you might have deleted the original category so code needs to be updated. Gaya and Matt are both working on the site now.

    I’ve added “news” via the WP menu builder. Screenshot:
    https://dl.dropboxusercontent.com/s/ne8r58q0x5sq1lg/2014-05-30%20at%2012.26%20PM.png

  49. noel saw says:

    Britt,
    You have to define all 3 images per the instructions for that metabox.
    https://dl.dropboxusercontent.com/s/83ubot80hocc06s/2014-05-30%20at%2012.35%20PM.png

    Gaya uploaded an image and it’s showing up:
    http://milmagz.staging.wpengine.com/xavier-cross-wood-carver/

    We have to hop onto other projects so we can’t do anything else until Monday.

    Here’s how to copy over the staging site to the live server:
    http://wpengine.com/support/staging/

  50. noel saw says:

    Britt, here’s how to edit the paragraph spacing in “My Custom CSS”:
    https://dl.dropboxusercontent.com/s/nv8wstl9dmuvmuy/2014-05-30%20at%2012.59%20PM%20%281%29.png

  51. Please clarify how I change out contributors in the “Contributors” section on homepage – http://glui.me/?i=vsj8oj75bs0lpz4/2014-05-30_at_2.01_PM.png/

  52. noel saw says:

    Britt,

    The navigation bar is now aligned with the left margin of the home page. Screenshot from both Crhome and Safari:
    https://dl.dropboxusercontent.com/s/i0hca6nd4burpvd/2014-05-30%20at%202.04%20PM.png

    As for the “contributors” section, they’re currently shown in alphabetical order. On the wireframes it does say “(possibly a check off box next to their name for admin use only)” so it was not guaranteed that it was included in this round of work.

    So we need to charge extra if you do want this because we’ve blown through 40 hours already on issues that were not covered in the PDF wireframes (in addition to bugs).

    We can start on that next Monday if you want.

    Noel

  53. noel saw says:

    Britt, also the image wrap should also be now working.

    Just make sure the class on the image dialog box just shows this “alignleft” – screenshot:
    https://dl.dropboxusercontent.com/s/ztyqnvg0bmrpxm0/2014-05-30%20at%203.10%20PM.png

  54. Also, please reduce the gap between the navigation bar and profiles on the homepage – http://glui.me/?i=e1ki32z62f6x7ye/2014-06-03_at_4.58_PM.png/

    And fix the “Scroll Down” on Position 1 to the bottom center – http://glui.me/?i=63lfjzgrmz8ty4h/2014-06-03_at_5.03_PM.png/

    Noel – what happen to the grayed box around “Scroll Down” ? [view PSD 1.1 Homepage (Noel’s conflicted copy 2014-05-29)]

    Thanks! Great job guys. The site is being very well received!

Leave a Comment