Website Redesign (start to finish) - "live coding", or close to it

Hey, all! I thought I’d start a post of some sort that takes you along on a web design journey - from start to finish.

It’s kinda like “live coding” but not real-time, instead I’ll try to take you step-by-step on this journey of a website redesign of an existing live site. I’ll post my thoughts on why I did this or that, design decisions I made, tools I use, problems encountered, etc.

Feel free to post questions, and I’ll try to answer them best as I can.

BACKGROUND INFO: The website is owned by a family friend of ours, and they’ve been very good to my family in providing their professional services. So I thought I’d return the favor, in my own little way, by offering my web design services to them for free.

ALSO! This post also serves as an accountability for me, to push me to finish this project to the very end. I have this very bad habit of neglecting and delaying pro-bono projects when deadlines from paid projects approach. :slight_smile:

With that introduction out of the way, let’s go…


This is their current website. From my understanding, they made it themselves several years ago. Looking at the source code, I can see it was made with WYSIWYG editor, Macromedia Dreamweaver. As you can see from the style, it’s dated and I think it’s time for a modern redesign.

My goals for this site redesign are:

  1. Improve the looks and aesthetic of the site, bring it up to par to current design trends
  2. Re-organize, and make it easy for visitors to find information they need
  3. Make it mobile friendly, and responsive by using modern web frameworks
  4. Install analytics for web traffic monitoring

So where do I begin?

First, I went over their current site and read everything to see what information/copy they have and what I can re-use. Then I tried to re-organize the information to something more logical (from the point of view of a prospective customer). After all, in the very end, the purpose of the website is to serve the visitor, and turn that visitor into a paying customer, and make a sale.

I used Microsoft OneNote to make my preliminary notes. (https://www.onenote.com/)

For this site, I decided to go out of my comfort zone, ditch using Bootstrap and try using a new (to me) CSS framework called MaterializeCss. So I’ll be learning about MaterializeCss as I go along.

FYI, MatrializeCSS is based on Google’s Material Design philosophy.
http://www.materializecss.com


The hardest part in web design is starting with a blank empty canvas!

I’m staring at a big white, empty canvas in Photoshop and there are just a million ways to go from here. I don’t want the site to have a weird or avant-garde navigation because I want ordinary people (non-web savvy) to be able to use this site easily.

The reason I’m laying out the site design in PhotoShop first is because I have no idea on what I want to do yet. By using Photoshop, I can easily move things around, change layouts, colors, fonts etc. and not be committed to it (because there is no code yet). I think if you start coding HTML/CSS right away, you tend to stick to the first iteration you made and you end up with a not good-looking site – because we people are lazy to make changes again.


I’m going to design the site in PhotoShop to fill up a WXGA size monitors (1366px, tablet/ultrabook size). I know the site will be responsive, and then I’ll just make adjustments in the HTML and CSS code so the site still looks good on narrower and smaller monitors. For very wide monitors 1600px & 1920px wide, the whole site will be centered on the screen and the left and right extra margins will just be filled with white space (or the same teal color).


I used www.unsplash.com for the closeup photo of the eye. It’s actually a big high-res photo of a face, but I just zoomed in and crop the eye part. The other photo is a cropped picture I took with my iPhone about last year. And the headshot is from the existing website. I may take new headshot and office photos somewhere down the road – we’ll see.

For the font, I used Adobe Typekit (https://typekit.com/). The nice thing about being an Adobe CC Cloud member is for $50/month, you have access to ALL the Adobe programs and Web/Font Typekit. I chose a font that I can use on the web, and also download to my Mac. Once you’ve selected a font to use, it becomes immediately available in PhotoShop to use. Very convenient!

Colors - what color do I use? I took hints from the colors used on their current logo… Some sort of Teal color? I’ll use various shades of Teal and maybe a complementary color for accent? And some blacks and grays.

Again, using Adobe Color to play with color combinations came in handy.


So we need a header, we need a logo on the left side and a pull-down menu structure. We also need a hero shot below the header. I also want all the contact information (email, phone#, social media accounts) be easily seen on the very top… so they need to be present in the header.


The first design I came up with is this. Let’s call this Option 1.

But I thought the header is too tall, and there’s a lot of empty unused space on the header. The gray + white + teal ribbons also made it look like a flag. – I don’t know if I like it.

I’m not yet sold on what the right-side picture should be. I may change this to a shot of their office’s interior space. – or something else, don’t know yet.


I made another iteration, attempting to reduce the whole height of the header section. Let’s call this Option 2.

I moved the menu to the white background and removed the gray ribbon banner. I’ve certainly reduced the height. Not totally sure how this menu will behave on narrower monitors, so that’s something I have to watch out for… I may have to go back to Option 1 but we’ll see.

You’ll notice the pull-down menu and the name-badge background isn’t a solid color. You can kinda see some part of the background image. It’s semi-transparent, but not too much. In CSS, I will have to adjust the opacity property.


These are the layers I used in Photoshop for the header section. You’ll notice they’re also organized in folders within folders. This allows me to easily move complete sections to other parts of the web page while I play with the layout.


Anyways, that’s all for now for this first post. If you’re interested in seeing future updates and following this post, let me know.

Cheers!

11 Likes

So I’ve decided that if a user has a wide display, the website content should be centered on screen, and the left and right margins will just be empty space.

Like so:

But the site looks barren, looks almost unfinished with all that empty white space.


So let’s try filling it up with some color. And we get this.

Hmmmm… but now the site looks too “heavy” with that solid bar of color on the left and right-hand side margins.


We need a middle-of-the-road solution. So I tried using a gradient instead. I start from a solid color and gradually fade down to white as the user scrolls down the page.

Ok, I’m happy with that, and I think that’s what I’ll use.


Now, I can use a PNG file with a gradient and use that as the background image, or use CSS gradient properties.

Here’s a site where you can easily setup CSS color gradients.

I’m keeping an eye on your thread :^)

1 Like

UPDATE: After the hero shot graphics, we followed with a Mission Statement text on a white background.

I chose a white background so there is a clear demarcation between the hero shot and the start of the content of the page. The mission statement has a small URL link beneath it, basically going to the “About Us” section.

Now, moving our attention to the top header menu “About Us”, instead of having individual, separate pages for “About Us”, “Meet the Doctor”, “Meet the Staff”, etc… I’ll just make a single page, and all these menu options will point to the same page. Basically, it will just be one long page (ala Single Page Application).

But what happens if the user clicks on “Meet Our Staff” link? Will the user be taken to the top of the “About Us” page?

No, I’m planning to use Scrollspy feature of MaterializeCss.
http://materializecss.com/scrollspy.html

So the page URL will be something like this
/aboutus.html#meetdoctor
/aboutus.html#meetstaff
/aboutus.html#community
/aboutus.html#awards

And the user’s browser will immediately display that particular section after loading the About Us page.


May I suggest that you spread the Mission Statement over four or five lines - it’s pretty dense in content and sweeping so far from side to side feels hard to read to me.

Does ScrollSpy do something special with internal links (#abc)?

Good idea. I’m not too happy with the mission statement, I’ll ask if they want to update it on the new site and shorten it maybe.

Instead of using anchor href tags, it’s implemented using id tags. Then a JS program is used to initialize ScrollSpy.

If you click on a #link, the page will scroll to that id location centering it on screen. It’s also possible to set an offset on how far above or below the top of browser window the id location will be.

3-column layout.

I decided to use a 3-column layout for the Services/Products/Location section.

My first design was arranged as Title, Icon, Text Blurb. (see Option 1 above)

Then I tried swapping the Title and Icon position for an Icon, Title, Text blurb layout. (see Option 2)

I think either way would work just fine for a website, but somehow Option 2 seems to have a more “solid” feel to it. The icon is sitting on top of the heavy, bold Title text…

With Option 1, the bold, heavy Title seems to be precariously balanced on top of the Icon… as if it’s going to fall down sideways.

So I’m going with the Option 2 format.

The one thing that bugs me though is I don’t have symmetry. I have a people icon, and then (2) rounded/circle icons. I can swap Services and Products location, that’s one solution… or I can use a different rounded/circle Icon for Services.

I like option 2 better also; having the icons at the top looks clean. Text at the top surprisingly makes my brain want to read it, and that feels stressful.

I also like it that the three icons are unique in character - the Products icon is dark, the Location is bright, and the Services is wide. Each one stands out for different reasons and is easy to find.

So a visitor ended up on your company website, what’s a good way to convince these visitors to become a patron of your business and try you out?

User Reviews!

So here, I’m using the Card format of MaterializeCSS (http://materializecss.com/cards.html) to display User Reviews that I’ll scrape from Google, Yelp and other Review sites.

I don’t know yet if I’ll do this as a slideshow where users can scroll left/right to view more reviews, 6 at a time. or just show 6 random reviews everytime a user reloads the page.

The business also invites clients to a survey or leave a comment/review so I think I’ll have these 2 links above, just below the stars… instead of a separate menu item. A satisfied customer reading other people’s reviews will be more likely to also leave a positive review at this point, thus I’m showing the “Write a Review” also in this section.

Planning on using modal windows for the Write a Review and Join Survey links. That way, the user isn’t taken elsewhere on the site, they remain on the homepage.

To create the circular photos, all we need to do is use a square image, and apply it a border-radius of 50%.

Contact Form… nothing special. The Patient Forms and Insurances Accepted are on separate pages on the current site.

For the redesign, they’ll just be modal windows… or maybe a slideOut DIV from under the gray box.

The Date field will have a pop-out Calendar to select the date.

This being a medical-related site, I’d probably have to talk them into getting an SSL certificate so the contact forms/survey forms are encrypted/secured.

2 Likes

UPDATE: The client liked the site design, so we’re GO for coding :slight_smile: There may be few changes here and there, but I think I can start coding now.


So let’s finish up our homepage design… on our future posts we’ll start to see some code-porn.

Another section on the homepage is a highlight of the organizations this company has helped or contributed its free services. In this section, instead of just doing a plain list of organizations and companies, I decided to spruce it up a bit by using these organization’s logos.

The different logos were a mis-mash of different colors (that doesn’t really go well with our site color theme), so to tie them all together, I made the different logos into grayscale images.

The problem with converting a colored logo to grayscale, is you may not get the result you expected.

For example, the first image is the original logo with the original colors. Converting it simply to grayscale results into the second image. As you can see, the contrast in grayscale mode is very low (though it was fine when it was blue against a yellow background). What we need to do is adjust our grayscale image to bring out the details.

We can do this using Curves feature of Photoshop. Basically, we’re mapping and shifting the intensities of the different levels of grayscale, and overall increasing the logo’s contrast.

As you can see, the 3rd logo is a much nicer visual. It’s still grayscale, but there is more contrast between the different areas and you can see more detail. It looks just as nice as the colored version.

Nice tip! I’m not sure if Photoshop desaturate is the same, but on GIMP you could use the “luminosity” option to get a similar effect.

Started coding the homepage last night and this afternoon.

But first, there’s a few setup procedure that needs to be done:

  1. Git init, repository and backup
  2. Bower (to download and install components and it’s dependencies)
  3. CNAME - for uploading to surge.sh for client previews.
  4. Codekit setup – this is an OSX program that kinda serves as a WYSIWYG ‘Gulp’ like program… but much easier, no need to deal with writing Gulp code. It has a built-in server, LESS, SASS pre-processors, minify, uglifier/compressor, JSHint, Lint, Babel, Markdown converter, Image optimizer for SVG, PNG, JPG, GIF… also Jade, Haml (which I don’t use at the moment), Typescript targetting, css-prefixer, etc. etc. and it’s all easy to configure. It also has a /build directory, ready for upload to your remote server.
    https://codekitapp.com/


For Git, I use SourceTree… I think it’s much easier to use vs. working on the command line.


When I’m coding, I start with lots of “to-do” comments in my html code, and later on I try to fill in those gaps. The “to-do” comments also serve as my reminder. For example, here’s the head section of the homepage.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Eyedentity Eyecare P.C.</title>
  <meta name="description" content="temporary description for Eyedentity Eyecare">
  <meta name="keywords" content="eyecare, eye, more keywords, to do...">
  <meta name="author" content="Eyedentity Web Developer">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="favicon.png" />      <!-- to do: Create favicon.png -->
  <meta property="og:title" content="Welcome to Eyedentity Eyecare!"/>
  <meta property="og:image" content="/images/eyedentityFBPhoto.png"/> <!-- to do: create postcard image for facebook use -->
  <meta property="og:site_name" content="Eyedentity Eyecare P.C"/>
  <meta property="og:description" content="temporary description for Eyedentity Eyecare... this will be displayed on facebook pages when somebody likes, recommend this page."/>
  <!-- to do: Add Twitter meta tags -->
  <!-- to do: Add iPhone icons -->
  <!-- Adobe Typekit font -->
  <script>
    (function(d) {
      var config = {
        kitId: 'igh5toz',
        scriptTimeout: 3000,
        async: true
      },
      h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
    })(document);
  </script>
  <!-- MaterializeCSS -->
  <link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons" >
  <link rel="stylesheet" href="/bower_components/materialize/dist/css/materialize.css">
  <link rel="stylesheet" href="/css/eyedentity.css?v=052617">
  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

I like to attach a cache buster on my CSS file, so if I ever need to make a change to the CSS and upload it to the live server, I can force a new CSS version to be downloaded to the user’s computer. I do this by attaching a ?=9999999 to the end of the filename. I just use the month-day-year in mmddyy format.

 <link rel="stylesheet" href="/css/eyedentity.css?v=052617">

I’m still using LESS for my pre-processor, I know SASS is all the rage and popular nowadays… but may I remind you, a few years ago LESS was the popular kid on the block. I’m sure a few years down the road, SASS will be kicked to the curb when another CSS pre-processor comes to the scene :slight_smile:


I didn’t like the default width of 70% of MaterializeCSS and max-width of 1280px for it’s container class, so I’ve overridden that. Max-width is now set to 1366px and width of 90%. For mobile screen, it will take up 100% of phone display’s width.

// media query overrides
// ---------------------

// adjust margins for small (s) displays; i.e. mobile phone
@media only screen and (min-width: 300px){
  .container {
    width: 100%;
  }
} // min-width: 300px


// adjust margins for medium (m) displays
@media only screen and (min-width: 680px){
  .container {
    max-width: 1366px;
  }
} // min-width: 680px

Customer Testimonials

This is the html implementation of customer testimonials

The problem with this is I have no control over the length of each customer testimonial/review. Some may be short, some may be long. And really, you can’t predict how long each testimonial is going to be.

So implementing testimonials as “cards”, you’ll see the varying height of each testimonial/review. So not looking good…

How do we fix this?

Here’s the markup for each card.

            <div class="col s12 m6 l4">
              <div class="card">
                <div class="card-content ">
                  <p>I am good at containing small bits of information.
                  I am convenient because I require little markup to use effectively.</p>
                </div>
                <div class="card-action">
                  <img src="/images/face-matt.png" class="circle photo">M. Perry
                </div>
              </div>
            </div>

What we can do is give each card a fixed CSS height. That way, all the cards will display at the same size, regardless if the user review is long or short.

In CSS, we just do a:

   .card-content{
      height: 200px;
      font-size: 0.78em;
    }

So is the problem solved? Not quite… because now, if the customer’s review is too long, it will appear cut off once it reached the height limit we set. Not so good from a user interface point of view… content is abruptly cut off.

So what we can do is allow the user to scroll and read the full reviews by using the overflow property.

    .card-content{
      height: 200px;
      overflow: auto;
      font-size: 0.78em;
    }

Scroll bars appear on user reviews that are too long, allowing the user to read the complete text… and yet all cards remain at the same height.

3 Likes

Simplifying Messy HTML Code

This is the complete code for the Testimonials section. As you can see, it’s repetitive, lots of DIVs and classes involved to display each card.

     <section id="testimonials">
        <h2>What our Customers are saying...</h2>
        <div id="stars">
          <img src="/images/star.png"><img src="/images/star.png"><img src="/images/star.png"><img src="/images/star.png"><img src="/images/star.png">
        </div>
        <div id="customerprompts">
          <a href="#">Write a Review</a> &nbsp;|&nbsp; <a href="#">Join our Survey</a>
        </div>

        <div id="customercards">

          <!-- start of first row -->
          <div class="row"> 
            <div class="col s12 m4">
              <div class="card">
                <div class="card-content ">
                  <p>I am good at containing small bits of information.
                  I am convenient because I require little markup to use effectively.</p>
                </div>
                <div class="card-action">
                  <img src="/images/face-matt.png" class="circle photo">M. Perry
                </div>
              </div>
            </div>

            <div class="col s12 m4">
              <div class="card">
                <div class="card-content ">
                  <p>I am a very simple card. I am good at containing small bits of information.
                  I am convenient because I require little markup to use effectively. I am good at containing small bits of information.
                  I am convenient because I require little markup to use effectively.</p>
                </div>
                <div class="card-action">
                  <img src="/images/face.png" class="circle photo">Jen A.
                </div>
              </div>
            </div>

            <div class="col s12 m4">
              <div class="card">
                <div class="card-content ">
                  <p>I am a very simple card. I am good at containing small bits of information.
                  I am convenient because I require little markup to use effectively. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi quisquam consequatur dolores provident nemo impedit exercitationem saepe, repellat sunt reprehenderit omnis ut adipisci cupiditate neque veritatis blanditiis, placeat fugit quia!</p>
                </div>
                <div class="card-action">
                  <img src="/images/face-erin.png" class="circle photo">Erin O.
                </div>
              </div>
            </div>

          </div> <!-- end of first row -->


          <!-- start of second row -->
          <div class="row"> 
            <div class="col s12 m4">
              <div class="card">
                <div class="card-content ">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam animi magnam, alias id, velit quia, molestiae asperiores ut impedit, culpa quas quis optio. Recusandae ipsam non, repellat odio voluptas officia.</p>
                </div>
                <div class="card-action">
                  <img src="/images/face-jeff.png" class="circle photo">Jeff G.
                </div>
              </div>
            </div>

            <div class="col s12 m4">
              <div class="card">
                <div class="card-content ">
                  <p>I am a very simple card. I am good at containing small bits of information.
                  I am convenient because I require little markup to use effectively. I am a very simple card. I am good at containing small bits of information.
                  I am convenient because I require little markup to use effectively</p>
                </div>
                <div class="card-action">
                  <img src="/images/face-olivia.png" class="circle photo">Olivia M.
                </div>
              </div>
            </div>

            <div class="col s12 m4">
              <div class="card">
                <div class="card-content ">
                  <p>I am a very simple card. I am good at containing..</p>
                </div>
                <div class="card-action">
                  <img src="/images/face-courtney.png" class="circle photo">Courtney C.
                </div>
              </div>
            </div>

          </div> <!-- end of second row -->
            
        </div> <!-- customercards -->
      </section> <!-- testimonials -->

So I wanted to simplify it and ended up with this HTML markup below:


      <section id="testimonials">
        <h2>What our Customers are saying...</h2>
        <div id="stars">
          <img src="/images/star.png"><img src="/images/star.png"><img src="/images/star.png"><img src="/images/star.png"><img src="/images/star.png">
        </div>
        <div id="customerprompts">
          <a href="#">Write a Review</a> &nbsp;|&nbsp; <a href="#">Join our Survey</a>
        </div>

        <div id="customercards">

          <!-- start of row -->
          <div class="row"> 

            <user-review 
              name="M. Perry" 
              photo="/images/face-matt.png" 
              review="In laudantium accusamus molestiae nisi, ipsam error eius. Temporibus commodi natus, velit, voluptatem, rerum quas repudiandae pariatur itaque, necessitatibus eius enim sint.">
            </user-review>

            <user-review 
              name="Jen A" 
              photo="/images/face.png" 
              review="The quick brown fox jumps. Ullam animi magnam, alias id, velit quia, molestiae asperiores ut impedit, culpa quas quis optio. ">
            </user-review>

            <user-review 
              name="Erin O." 
              photo="/images/face-erin.png" 
              review="I am convenient because I require little markup to use effectively. Lorem ipsum dolor sit amet.">
            </user-review>

            <user-review 
              name="Jeff G" 
              photo="/images/face-jeff.png" 
              review="The quick brown fox jumps. Ullam animi magnam, alias id, velit quia, molestiae asperiores ut impedit, culpa quas quis optio. The quick brown fox jumps. Ullam animi magnam, alias id, velit quia, molestiae asperiores ut impedit, culpa quas quis optio.The quick brown fox jumps. Ullam animi magnam, alias id, velit quia, molestiae asperiores ut impedit, culpa quas quis optio.">
            </user-review>

            <user-review 
              name="Olivia M" 
              photo="/images/face-olivia.png" 
              review="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Very good.">
            </user-review>

            <user-review 
              name="Courtney C." 
              photo="/images/face-courtney.png" 
              review="Really excellent">
            </user-review>

          </div> <!-- end of row -->
            
        </div> <!-- customercards -->
      </section> <!-- testimonials -->

Of course, there’s no such thing as a user-review HTML tag… so how did we do this magic?
By using VueJS components.

In VueJS, we defined a component called “user-review” and all it’s DIV tags and classes are defined in a template. Then we just pass to each user-review HTML tag the 3 pieces of information we want to display… name, photo and review text.

// Vue App    
Vue.component('user-review', {
  // declare properties array for this component
  props: ['name','review','photo'],

  template: '<div class="col s12 m6 l4">' + 
              '<div class="card">' + 
                '<div class="card-content ">' + 
                  '<p>{{ review }}</p>' + 
                '</div>' + 
                '<div class="card-action">' + 
                  '<img :src="photo" class="circle photo">{{ name }}' + 
                '</div>' + 
              '</div>' + 
            '</div>'
 
});

That way, all the ugly and messy implementation is hidden in VueJS, and in our HTML markup we just have something simple and clearer in its intent.

The formatting of the HTML also makes it for easier reading during coding.

1 Like