Corrie Haffly

Creating a custom SharePoint profile page using the PnP Modern Search solution

corriespondent — Sun, 19 Jan 2025 16:30:38 +0000

With Microsoft Delve’s retirement, the profile page experience in SharePoint is no more. The unified M365 profile experience continues to be improved, but with the power of the PnP Modern Search solution, you can have an attractive layout and display information not typically found on the people card. For example:

Display a personalized bio or intro paragraph for a user
Show information about projects, initiatives, or teams that the current user is part of
Display a list of the user’s publications or featured documents
Provide the user’s curated links or resources
In short: If you can build a search query to pull information filtered by a particular user, you can put it on a profile page.

Using the PnP Modern Search solution, you can put all of the above into a beautiful custom profile page layout that meets the marketing team’s branding standards. Here is a simple example; I’ll be walking you through how to build this page in the rest of this post.

Overview

For the profile page, we’ll be creating a normal SharePoint page and adding sections for the layout. We’ll add search result web parts set up to use a query parameter that passes the user’s email for the search queries.

To get to this profile page, you’ll want to set up another page that display people search results, and add a link within the result template that passes the user email to the profile page in a query parameter. Let’s tackle this page first.

Custom people search page

Create a new page to display people search results.
Add the PnP – Search Box web part to the page.
Below the search box, add the PnP – Search Results web part to the page. For this basic scenario, we’ll configure the web part to just show all people results:
- Panel 1
  - Select SharePoint Search
  - In the query text field, use this query to allow for search terms while making use of the HideFromAddressLists field from Exchange:
    {searchTerms} "SPS-HideFromAddressLists":0
  - Under Result Source Id, choose LocalPeople Results
- Panel 2
  - Choose the “People” layout
  - Turn on Use Microsoft Graph Toolkit
  - Turn on Show persona card on hover
- Panel 3
  - Turn on Use input query text
  - Choose Dynamic value
  - For Connect to source, choose PnP – Search Box
  - Under PnP – Search Box’s properties, select Search query.

You should now see a basic people search interface on your SharePoint page, with a search box and people search results. Hovering over a card will bring up the Microsoft Graph Toolkit persona card.

Lessons learned:

It’s really easy to create a custom people search page. Learn more at the PnP Modern Search documentation for “Create a useful People Search.”
Turn on the Microsoft Graph Toolkit option and the hover card option to show profile data from Microsoft Graph.

Next, we’ll build the profile page, and we’ll come back to this page later to link the cards to the custom profile page.

Build profile page layout

Create a new page for the profile page.
After adding a title for the page (“Profile Page”), delete the top banner section completely.
Add the following sections:
- Section 1 – One column – Add a background color of your choice
- Section 2 – One-third left – White background
Save the page as a draft.
In the browser URL, manually add ?q=emailaddress where emailaddress is an actual email address of a user on your tenant, for example, ?q=AdeleV@yourtenant.onmicrosoft.com.
Click “Edit” again, and you should see the page load in edit mode while keeping the query string intact. While not required, this will be useful for the next section when we configure web parts to use the query parameter.

Profile banner

In the top section, we’re going to use a custom handlebar template to display the user’s name, profile picture, job title, and department. Add the PnP – Search Results web part into the top section. Configure with the following:

Panel 1
- Select SharePoint Search
- Under Selected properties, click and type “Department,” then hit Enter
- Scroll back up. Under Layout Slots, click Customize and add the following:
  - JobTitle / JobTitle
  - Department / Department
- For Result Source Id, choose LocalPeopleResults.
- Hide paging
Panel 2
- Use the following handlebar template from the code block below
Panel 3
- Turn on Use input query text
- Choose Dynamic value
- Keep Connect to source at Page environment
- For Page environment’s properties, choose Query string
- For Query string’s properties, choose Query parameters
- For queryParameter’s properties, choose “q”



    

    

     
        
        
            
                {{#each data.items as |item|}}
                    

                        
                            
                    
                {{/each}}
            
        


    




    

        {{#if @root.properties.showResultsCount}}
            
                
            
        {{/if}}

        
            
                {{#times @root.properties.paging.itemsCountPerPage}}   
                    
                    
                {{/times}}

Your page will now look something like this:

Lessons learned:

The search result web part can be set up to use a query parameter. Learn more at PnP Modern Search documentation for using the query string from url for dynamic results.
If you can figure out the managed property that holds the data, you can display it in your search results web part by mapping it to a layout slot.

Contact Information

Duplicate the web part and drag it into the left column of the second section. Configure the following:

Panel 1
- Under selected properties, add the following properties:
  - WorkPhone
  - OfficeNumber
  - BaseOfficeLocation
  - MobilePhone
- Scroll back up to Layout slots and add:
  - WorkPhone / WorkPhone
  - OfficeNumber / OfficeNumber
  - OfficeLocation / BaseOfficeLocation
  - MobilePhone / MobilePhone
Panel 2
- Use the custom handlebar template from the code block below.



    

    
        
            
                {{#each data.items as |item|}}
                    

                        
                            
                    
                {{/each}}
            
        
    




    

        {{#if @root.properties.showResultsCount}}
            
                
            
        {{/if}}

        
            
                {{#times @root.properties.paging.itemsCountPerPage}}   
                    
                    
                {{/times}}

Your profile page is starting to shape up with basic profile information laid out nicely on the page:

Lessons learned:

Handlebar templates provide endless possibility for CSS formatting. In this example, we added some styling to the labels to make it prettier.
You can use theme color references such as @root.theme.palette.themePrimary in your handlebar template CSS.
Implication: You can duplicate this web part and modify the managed properties and layout slots to pull in other properties from the SharePoint user profile. For example, you can create sections for displaying the user’s interests, skills, past projects, etc.

Custom SharePoint user profile properties

What if you want to display information that isn’t part of the normal SharePoint user profile data? SharePoint administrators can create custom user profile properties, then map those to managed properties. You can then pull the managed properties into the search results web part and add them to your custom handlebar template.

As an example, let’s add a link to an audio pronunciation for the user’s name as a custom profile property.

In SharePoint Admin, go to More features > User profiles > Manage User Properties and click New Property:
- Name: AudioPronunciation
- Display name: Audio Pronunciation
- Type: URL
- Policy Setting: Optional
- Default Privacy Setting: Everyone
- Allow users to edit values for this property: Checked
- Show on the Edit Details page: Checked
- Search settings: Indexed
Populate the value in a user’s profile. Go to SharePoint Admin > More features > User profiles > Manage User Profiles and search for a user. Scroll down to find the new profile property. Add a URL in the field and save.
You will now have to wait for SharePoint to crawl the data, which could take anywhere from 15 minutes to over a day! To check for the crawled data, go to SharePoint Admin > More features > Search > Manage Search Schema > Crawled Properties and search for “audio” to see if the crawled property for “People:AudioPronunciation” shows up yet. Once it does, continue.
Click on Managed Properties > New Managed Property.
- Name: AudioPronunciation
- Searchable: checked
- Queryable: checked
- Retrievable: checked
- Scroll down and click Add a mapping, search for “audio,” and select the People:AudioPronunciation crawled property. Click OK to add.
- Scroll back down and click OK to save.
Go to a different user’s profile and fill out the Audio Pronunciation field, then save. You can also update the original user’s profile in hopes of kicking off another SharePoint search crawl. Again, it may take 15 minutes to a couple of days for the data to crawl and update.
Update the top PnP search result web part with the profile picture and name.
- Add AudioPronunciation to the selected properties
- Click Layout slots and add:
  - AudioPronunciation / AudioPronunciation
- In Panel 2, use the custom handlebar template from below



    

    

     
        
        
            
                {{#each data.items as |item|}}
                    

                        
                            
                    
                {{/each}}
            
        


    




    

        {{#if @root.properties.showResultsCount}}
            
                
            
        {{/if}}

        
            
                {{#times @root.properties.paging.itemsCountPerPage}}   
                    
                    
                {{/times}}

The new handlebar template checks for if the audio pronunciation field has content, and then renders an icon and a link:

Lessons learned:

SharePoint search brings in values from managed properties. You can create custom user profile properties in SharePoint, then map those to custom managed properties, and pull those into the search results web part.
Notice that we used the component to render the Fabric icon:

Surfacing other SharePoint data

One benefit of building a custom profile page like this is that you can pull in any organizational data that you want, as long as it’s tied to this SharePoint user. For example – you can use PnP search results to display documents that this user has authored, or information from custom lists that include this user in a person column. In this example below, we’ll set up a list for holding employee bios and links to CVs. We can then use PnP search to display the information for the user on the page.

First, create site columns for your data. I’ll use some OOTB site columns for the text and link, but I will want to create a person/group field for the user.
- Go to the gear > Site information > Site settings > Site columns > Create
  - Name: BioPerson (or whatever name you want)
  - Type: Person or Group
Now, create a new blank list, called “ProfileBios.” Go to the gear > List settings and then click Add from existing site columns. Add the following:
- BioPerson
- Description
- URL
Add list items for some of your users.
Wait fifteen minutes. Check to see if SharePoint has crawled the ProfileBios column by going to SharePoint Admin > More features > Search > Manage Search Schema > Crawled Properties and search “bioperson” to see if the crawled property shows up.
When the crawled property is available, create a new managed property. Go to Managed Properties > New Managed Property:
- Name: BioPersonOWSUSER
- Type: Text
- Searchable: checked
- Queryable: checked
- Retrievable: checked
- Allow multiple values: checked
- Click Add a Mapping. Search for “bio” and select the “ows_q_USER_BioPerson” crawled property, then click OK.
- Scroll down and click OK.
Return to the list, go to the gear > List settings > Advanced settings > Reindex list. Select the checkbox and one of the options and click Reindex list. Wait fifteen more minutes.
Add a new PnP – Search Results web part in the right side of the second section. Configure:
- Panel 1
  - Select SharePoint Search
  - Query template: Add the following:
    Path:https://yourtenant.sharepoint.com/sites/YourSite/Lists/ProfileBios/ AND (BioPersonOWSUSER:{QueryString.q})
  - Under Selected Properties, select:
    - Description
    - URLOWSURLH
  - Scroll up to Layout slots and add:
    - Description / Description
    - URL / URLOWSURLH
- Panel 2
  - Use the custom handlebar template from the code block below



    

    
        
            {{#each data.items as |item|}}
                

                {{#> resultTypes item=item}}
                

                    Biography

                    {{slot item @root.slots.Description}}
                    
                         
                                 View CV

                    
                 {{/resultTypes}}
            {{/each}}

You will now see the bio and CV link show on your custom profile page:

Lessons learned:

The query template with the QueryString.q value – the email address of the user – searched against the managed property value of the person column (BioPersonOWSUSER) is what does the magic. You can use this pattern with queries for other kinds of SharePoint data to render additional data on your custom profile page.
Notice the way to split the URL field value to get just the URL. The returned managed property is a string that looks like “https://www.yoursite.com, Link text” with the URL followed by a comma and the link label. To split the string, we used handlebars to split the string and just render the first half (using the [0] index) into the “href” attribute:

Update the people search page

Finally, our last step is to update the people search page so that clicking the person card will take you to the custom profile page with the user’s email in the query string.

Go back to your people search results page and edit.

Edit the result template by adding a link element around the mgt-person element:
...
Save the handlebar template and republish your page.

The search result page will now allow you to click the card to go to the profile page for that user.

Lessons learned:

Once you modify a handlebar template based on the People layout, you will lose the people layout configurations (such as profile picture size, use hover card, etc.). If you are going to create a custom handlebar template based on the People layout, be sure to configure the options before applying your custom template.

Getting even fancier

My colleague Deepa Moorjmalani has put together a brilliant series of blog posts that cover how to use the PnP Modern Search Extensibility framework to create custom components, add custom layout templates, and handlebar helpers to the PnP Modern Search solution. These concepts will allow you to accomplish even more with a custom profile page layout. Check out the series here:

Displaying multiple people in PnP Modern Search

corriespondent — Sat, 23 Nov 2024 01:27:53 +0000

I use the PnP Modern Search solution a lot in my role as a developer with Creospark (formerly PixelMill) – not only for custom search and search result pages, but also for different types of rollups within client projects. The out of the box layouts that come with the PnP Search Results web part includes a “people” layout which can be configured with SharePoint People Search results, showing one person card per person search result. But what if you want to show multiple people in a search result – and not from the SharePoint LocalPeopleResults people search, but from a site column that has been configured to allow for multiple people?

Let’s assume that I’ve created a site column as shown above, and I’ve then added this to a list or library (go to your list or library’s settings page and click “Add columns from site columns” to add the column to your list or library), added at least one item with multiple people selected, then waited around 15-30 minutes. This will ensure that SharePoint has a crawled property to work with. Below is a screenshot of my creatively named “People” list with a couple items added, each with the MultiplePeople column populated.

The first step is to map this column’s crawled property to a managed property. As a SharePoint administrator, go to the SharePoint admin center > More features > Search (open) > Manage Search Schema. In the managed properties screen which shows by default, type “RefinableString” in the filter box and click the green arrow to filter the managed properties. Find a RefinableString value that isn’t already mapped and click the name to edit (in my example, I’m using RefinableString10). Scroll all the way down to the bottom and click “Add a mapping.” Type part of your column name to help filter the list. You want to look for your column’s internal name and the “Q_USER” crawled property (the other one would only return first names, which doesn’t help you in this case). Select that property and click OK to add it.

Scroll all the way back down the page to click “OK” to save the mapping.

Next, reindex your library or list, to force SharePoint to re-crawl the information. Go to your list or library’s settings page (gear > List Settings, or gear > Library Settings > More library settings), click the Advanced Settings link, and click the “Reindex [list or library]” button. Confirm the reindex in the dialog box by specifying that the search schema has changed and click the reindex button. Grab a cup of coffee or a snack, because you’ll have to wait another 15-30 minutes or so for SharePoint to crawl the data again.

Now you’re ready to configure your PnP Modern Search result web part. Add the web part to your page and set up the query as you normally would to retrieve results for your list or library. (For my example, I’m making a basic SharePoint query to the list, filtered by list item type.)

In your list of selected properties, add your refinable string property name – in my case, I’m adding RefinableString10. This will retrieve that property for each item.

Now, click the Layout slots “Customize” button, and add a new slot that refers to the refinable string property. In this example, I’m calling my layout slot “MultPeopleQ,” pointing to that RefinableString10 property.

To confirm that you did everything properly, click Next to advance to the layout panel and choose the “Debug” layout. Hopefully, you can see your search result items in JSON format. Look for the RefinableString10 property and make sure that you can see the data for the property. Each person’s identifying information should be separated by semicolons. (By the way, this is why you want to map that field to a managed property. The default managed property that SharePoint creates does not split people by semicolons but includes hard-to-parse newline characters instead.)

Choose a layout template for your display or set up a custom template. I’m not going to go into detail on making custom layout templates, as there are other resources and tutorials out there, but you can always select one of the existing layouts to customize. In this example, I’m going to pick the “List” layout. Click the “{}” button next to the Edit results template field to customize the handlebar template.

Inside your handlebar template, add the following bit of code:

{{#each (split (slot item @root.slots.MultPeopleQ) ";") as |person|}} {{/each}}

This code takes the MultPeopleQ slot (which pulls in the refinable property we mapped earlier), splits it into multiple person items using that semicolon, and uses the each handlebar helper to render a card for each person (by passing in the email of the person). Be sure to check the person card component in the MGT playground to see the various properties you can configure, and adjust that code as you wish. Click Save to save your custom layout and close the editor panel.

Click the toggle for “Use Microsoft Graph Toolkit.”

Finally, you should see your people cards showing up in your results!

(Many thanks to my brilliant colleague Deepa Moorjmalani for helping me with the final step to properly display the mgt-person component.)

Accessing SharePoint/IIS sites in Firefox for Mac

corriespondent — Mon, 17 Nov 2014 18:44:37 +0000

I was reminded of this little quirk today when Heather pinged me as she was setting up her new Mac:

If you’re getting a 401 Unauthorized access error when trying to get to a SharePoint site on Firefox for Mac, it’s because you have to change a config setting. From Stack Overflow:

As part of Firefox 30′s release, Mozilla made a change to disable support for NT LAN Manager version 1 (NTLMv1) network authentication. This change affects sites using Microsoft’s SharePoint or IIS services. The Windows version of Firefox 30 should switch to using NTLMv2 authentication automatically, but NTLMv2 is not supported by Firefox on non-Windows platforms.

The result for non-Windows platforms is that access may be blocked when Firefox 30 users try to access those kinds of sites.

To Enable NTLMv1 in Firefox

Open Firefox

In the address bar, enter the following: about:config

If prompted, click on the I’ll be careful, I promise! button.

Search for the following: network.negotiate-auth.allow-insecure-ntlm-v1

Once the network.negotiate-auth.allow-insecure-ntlm-v1 setting is located, double-click on the setting. That should change the entry in the Value column from false to true.

Once the network.negotiate-auth.allow-insecure-ntlm-v1 setting has been set to true, close the Firefox browser window.

Open a new browser window and attempt to access the SharePoint-based or IIS-backed site. You should now be able to log in.

NCCC part 5: All the good stuff

corriespondent — Fri, 31 Oct 2014 17:00:00 +0000

Since finalizing the NCCC logo, I’ve been shooting things over to Rusty as he needs them… digital files for t-shirts, hats, the outdoor sign, fliers, and more. It’s been more than gratifying to see him post the physical results via his Instagram and Facebook pages. Given the logo’s humble beginnings and the challenges I had with the figure of the climber, I’m really pleased with how the final logo and related “good stuff” turned out.

Just to give you a sense of the gym itself: The climbing walls are painted red, white, and blue, and colorful grips give the entire place a fun, vibrant feeling.

Staff t-shirts and customer hats and t-shirts; flier, business card, and rack cards below:

The outdoor sign got a font change so that the words were larger and made better use of the sign area.

Finally, I put together a simple one-page responsive web page to use until Rusty was ready to figure out what to do for a web site.

If you’re in New Hampshire, be sure to stop by and check them out. Congratulations to Rusty and the rest of the crew at North Country Climbing center!

NCCC part 4: Finalizing the logo

corriespondent — Thu, 30 Oct 2014 16:37:17 +0000

Rusty put the two versions of the logo that I had provided to a vote, getting feedback from everyone that he could. It was a really tough decision, because the girl looked more dynamic and interesting (especially to climbers), but some people (generally non-climbers) also said they thought she looked unstable and unsafe. Rusty wondered if I could edit the girl to have her foot up on the cliff, and I ended up trying and deleting some pretty awful attempts. Rather than admit to my mediocre figure drawing skills, I finally said that putting her foot up on the cliff would result in her back being straight or rounded, which would lose some of the curves that made the image look more dynamic to begin with. We had several skype conversations going back and forth on this, scouring the internet for examples of photos that looked dynamic-yet-stable, and then in the middle of that, Rusty sent me photos of the completed walls:

I tried something completely different, but Rusty didn’t love it (even when I suggested that we use rainbow colors to make it more exciting – maybe I should have suggested adding kittens!).

With the grand opening weeks away and signage yet to be ordered, Rusty pulled the trigger and picked the girl. I offered some color suggestions based on the red and blue color scheme they were using for their walls:

Rusty decided to use different colors depending on the application. He also asked me for a centered version, as well as a graphic with the tagline over the logo:

Then it was time to pull together the files for the t-shirts, sign, fliers, and all that good stuff.

NCCC, part 3: Refining the logo

corriespondent — Wed, 29 Oct 2014 16:45:52 +0000

After sending off my digital “sketches,” shown in yesterday’s post, Rusty decided he liked the girl better and asked to spin the “old man” profile and have it on the outside of the mountain on the left side to be more true to depictions of that image. He also asked me to try to move one of the legs to be up against the wall, and to overall slim down the outline of the girl. I knew I couldn’t just “move the leg” (I know my figure drawing limitations!), so I found a photo of a man with one hand and one leg on the cliff to come up with a few more versions:

Girl loses a few pounds, deforestation occurs, ski trail or river added, and “old man” profile flipped to the left. Top left has cliff going all the way up, while top right has the original cliff shape.

Bottom left: Girl gets a haircut, but still looks very female. Bottom right: I found a male image to work from for the one-hand one-foot on/off pose.

Rusty decided to stick with the cliff shape. I made a few final tweaks to each version to enlarge the figure slightly and move the figure and cliff to the left to take up more of the white space. Then it was time for a battle of the sexes… and finalizing fonts and colors.

NCCC, part 2: sketching and more sketching

corriespondent — Tue, 28 Oct 2014 15:40:59 +0000

Armed with a detailed design brief and the logo created by the previous designer, I spent some time on quick sketches, trying some options with a climber and other more abstract shapes reminiscent of the climbing wall “prow,” pictured below:

I sent Rusty the first batch of sketches: (the first batch did not include the pencil sketches at the bottom of the page – those were some second-round attempts)

Instead of scanning, cropping, and emailing, I simply snapped a picture on my phone and texted it to Rusty. He responded: “I had been imagining something sort of like the upper left. I like how clean the [the NCCC with the abstract shape] is, but without a climber it’s not clear it’s a climbing gym.” He mentioned that he liked how you could see both sides of the climbing wall in that sketch.

I tried more sketches after looking at various images of people climbing. I decided that I liked having the orientation flipped from the original logo – having the cliff on the right and the person on the left seemed to flow better for me, particularly if there was going to be text on the right side of the logo.

Rusty said that he liked “both hands on, both feet off.” Time to search for more stock photos and refine my figure. I knew that having a realistic figure was going to make or break this logo. Figure drawing is not really my forte, so I knew I’d have to look up some similar poses of real people to draw from.

At this point, I felt comfortable enough to start some digital versions. I spent some time tracing and refining in Illustrator, then blocked out mountain and tree shapes. I also explored some different fonts.

Top: Trend Slab. Middle: Modified Century Gothic for “NCCC” and Futura Light. Bottom: Geometric Slab Serif.

But would Rusty like any of these directions? More in the next post…

NCCC, part 1: awesome design brief

corriespondent — Mon, 27 Oct 2014 21:16:03 +0000

My former coworker Rusty Talbot left the web industry recently to pursue a dream – opening a climbing gym in the beautiful hills of New Hampshire. He came to me after his artist was unable to complete the branding project to see if I could take it over. Rusty sent me one of the best, detailed briefs I’ve ever received from a client:

The logo files from the former designer: (The one on the left was the latest iteration)

What I want to evoke:

This is an indoor climbing gym but I wanted to connect with some visual imagery that reflects the location – northern New Hampshire. This is why we included the distant mountains and trees and so forth in the lower right corner

I want to make clear that this is about rock climbing – so that’s why we have the silhouette of the climber on a steep rock face

If possible, it would be cool to evoke an image related to the gym itself. I don’t think that the logo we were working with actually did this, but I’m attaching a photo showing a small part of the gym as it is being built. I think it is a cool looking feature like the prow of a ship. If you can think of a cool way to incorporate something that evokes this look into the logo, that could be really excellent

What I think of the current elements in the logo:

I really like what’s in the lower right corner:

The snowy mountains and the trees.

If you look closely you’ll even see a version of the NH state symbol – the “old man of the mountain” that was part of a local cliff until it collapsed in 2003 (it’s still the state symbol even though it doesn’t exist in nature anymore, however!).

The other side of the mountain that has the old man on it has a ski area, so we represented that with the little ski slope curving down the mountain on the right.

I think that the climber and the overhanging wall is ok – and it is nicely evocative of rock climbing in a gym

Please note that I’m not that attached to the climber or his/her body position. It’s not as crisp as I think I’d like it to ideally look.

Also, I’m not super attached to the way the cliff face looks. It sort of looks like a blob. As noted above, I’d be more psyched to evoke an element of my gym like the prow in the attached picture

We toyed with different shapes and sort of honed in on a circular design.

If it wasn’t an attached circle, it looked like a monster eating a climber

If it was an oval it looked a lot like an eye (especially if the cliff face was a bit steeper and more like a horizontal roof)

The shape of the cliff in the larger file was sort of blah so we were moving toward a cleaner circle-style. She hadn’t gotten around to cleaning up the cliff to make it flow smoothly into the circle, however.

We toyed with including the wording or lettering in the logo and it didn’t feel like it worked

We tried both w letters in the cliff like in the larger file as well as with the words going around it in a circle (“North Country” on top, “Climbing Center” on the bottom)

I think that I’ll just want to have the words “North Country Climbing Center” next to the logo or below it or not all depending on the context.

Colors

I’d like to include color in my brand – but I don’t know how to incorporate colors in the logo (if at all)

The walls are going to be a mix of deep blue, brick red, and off white (it’ll actually be light granite). We need to be careful to keep this from looking like an American flag, however!

Uses – what I plan to use the logo for:

Signage

An interior sign above the main entrance / desk

Maybe painted on one of the walls if it makes sense…

One big sign out in front of the building (this is the only expensive, hard to change thing that I’ll use the logo for)

Website

Facebook page

Business cards

“coming soon” promotional posters

Brochures

Tee shirts

Hats

Note that I’m using the catch-phrase of “live free and climb” (a play on the NH motto of “live free or die”).

Thank you so much for being willing to assist with this. While I do like the direction [former designer] was going in, I’m totally open to your awesome creative ideas.

Rusty was detailed and organized in sharing his thoughts about the existing logo design and what he wanted.

Bulleted lists are always helpful to break things down!
Rusty gave me some bigger picture branding requirements, explaining his desire to integrate “New Hampshire” and “rock climbing” into the logo.
He was extremely detailed with what he liked and didn’t like about the logo, and explained their design process so that I wouldn’t have to reinvent the wheel by trying things that didn’t work the first time around
He included all the potential uses that he would need for the logo, which helped to give me an idea of the level of detail (or simplification) that might be needed
And of course, he implied that my ideas would be “awesome” and “creative.” Flattery never hurts!

Next: I start sketching.

New family life comics

corriespondent — Tue, 29 Apr 2014 22:46:54 +0000

Here are some recent comics… (Click to view larger)

Matthew (3 1/2 yrs old) really dislikes snuggling with Steve if Steve doesn’t have a shirt on.

One of my biggest challenges right now is keeping my patience when helping Steven (just turned 6) to practice piano.

Benjamin (1 yr 9 mo) is starting to say lots of words.

Benjamin is also discovering his “no,” which can be mildly confusing.

Steve and Matthew have developed their own vocabulary.

Our boys love watching “Chopped.” This actually happened.

Benjamin loves to whack people. He’s gotten strong enough that it actually hurts, and we have given permission for the older boys to hit him back (but not in the face). He hasn’t quite figured out the new rules.

My treadmill desk

corriespondent — Thu, 12 Dec 2013 23:30:17 +0000

I’ve been wanting a treadmill desk since 2005, when I first read about James Levine putting one together.

(Reference one of my comics from 2005’s Christmas newsletter:)

Steve and I are not quite as penurious as we used to be in 2005, and it was reading this blog post by Ann Marie Michaels where she credited much of her increased activity to her treadmill desk that I decided to bite the bullet. I also pinned a number of DIY treadmill desks to a new Pinterest board.

That very weekend, I went on Craigslist, and lo and behold, there was a $180 treadmill for sale literally around the corner from our home. And we even had our friends’ truck in the driveway after a car-trade-for-a-day sort of thing. Perfect! In a matter of hours, we were owners of a Pro-Form 725 FP. It seemed massive.

We had a random piece of white melamine shelving in the garage. I had Steve hold it against the treadmill. Pushed up against the top edge of the angled handlebars, it was a good height for a keyboard. I took some scrap 2×4 and drew a rough angle for a cut. With two screws on each side, I now had my Treadmill Desk Beta.

The screws weren’t countersunk so they stuck up a little bit, but they were far enough out that it didn’t bother me.

To attach the supports, I used Velcro dots and strips that we already had on hand.

Here’s how it looked in our bedroom:

But where I really wanted it was in the office! Naturally, I picked a time when Steve was not at home to help me. I managed to scrape the floor nicely as I shoved the treadmill down the hallway. Then I wrestled the treadmill across the short span of carpet. And then I was stuck.

After removing the office door and making use of the doorways and closet opening, I was able to finally swivel and pivot the treadmill into the office. (At one point, it was standing up on one corner, wedged against the walls, and I had to crawl under and around it to get to better angles!)

Then I moved it into the place where my filing cabinet, with printer on top, used to be. The file cabinet was now in the middle of the room (you can see it in the picture below). The printer got moved to our new upright file cabinet in the other corner of the room. Luckily, it’s a wireless printer, so location wasn’t important.

I took it on a test run, moving my work-issued laptop and setting the keyboard into the built-in book holder. I configured my Bluetooth mouse and keyboard and successfully walked and worked for the first time! I did this for a couple of days — using my Mac at my desk for most of my work, and moving to the treadmill when I had to do stuff on the PC.

Things got serious when my Amazon order arrived. I purchased two articulating wall mounts ($22.99 each) and a second monitor (20-inch, $99.99). My other monitor is 22 inches, and I approximated that I would have about that much room to work with if I put them up side-by-side.

The wall mounts arrived – a box inside a box inside a larger box. Really, Amazon?

I had to install a new surge protector onto the bottom of my declutered desk’s pegboard so that cords would properly reach.

Then, I put up the first wall mount and mounted the new monitor.

Connected to my work laptop:

And it swings to the side…

… leaving room for the second wall mount. I needed Steve’s help to strong-arm the bolts all the way into the wall for this one!

Second monitor mounted and connected! Although I was rather annoyed that the insert-and-click post of the monitor stand is not designed to be removed, short of taking a hacksaw to it. Thank you, Samsung.

For now, I put my Mac on the top shelf of my Ikea Jerker desk (another Craigslist find from a while ago) so that the monitor cord would reach.

That was all well and good, but I’m guessing it’s not great for a laptop to be continuously jostled by the movement of someone walking on a treadmill. So, using some half-inch plywood that we already had on hand, and using some shelf brackets we already had as well, I made a shelf.

The shelf has a little slot cut out in the back so that cords can go through… and you can see the Very Basic Shelf Brackets that I’m using.

I covered the shelf with a few coats of polyurethane, leaving it the natural color of the plywood (with a slight “ambering” effect).

The shelf was also positioned with about a half-inch of clearance to the very top point of the treadmill, to provide as much room as possible for my Mac laptop screen to open underneath.

Because this is what I wanted: Mac laptop open on the shelf with external monitor above, and PC external monitor above.

After working on this setup for a week or so, I was ready to make the final version of a treadmill desk. I was envisioning something with natural-looking wood, matching the shelf, but with friendly curves instead of hard corners. I had some quarter-inch plywood in the garage, just enough, in fact, for my new desk, so I cut it to shape with a jigsaw and countersunk the screws.

I made the bottom supports longer – and spent a lot of time with Steve patiently holding the board with a level on top of it so that I could get the angle just right.

I filled up the screw holes with wood filler and put on a coat of polyurethane but then realized the wood filler didn’t pick up the “ambering” effect AT ALL. They stood out visually like sore thumbs. (No picture.) So I ended up sanding the whole thing off and using Minwax Ebony stain (had it on hand in the garage from the treasure chest we made a long time ago). I applied the stain twice, letting it soak in for 15 minutes the first time and 2 hours the second time (I forgot about it!). Then I applied two coats of polyurethane to the top and one to the bottom (getting impatient!).

And here it is!

The dark brown actually blends nicely with our dark wood floors.

Here’s a picture of the supporting pieces underneath. I wasn’t initially going to stain underneath until I realized that you could see the side supports, and now I’m glad I did the whole thing.

Because of the longer supports, I added on a few more Velcro dots.

Contrast with what I had before:

The desk feels much more secure now – before if I leaned on the front part of it, it would start to tip off.

Everything is the same as before – Two mounted monitors, Mac open, PC closed, and box of Kleenex at the ready. I put my water glass and coffee on the top shelf of the desk so it’s easy to reach.

I use a Mac wireless keyboard. I miss my extended keyboard that I used at my desk (but it’s wired), so I may eventually get a full wireless keyboard. Oh why doesn’t Apple make a full wireless keyboard…? I love the feel of the wireless one – it’s so narrow and polished. Then, I use my Logitech Bluetooth mouse. I got this a while ago, although I have a functioning Wacom Intuos 2 Tablet/Stylus/Mouse, because when I started using Synergy to share my keyboard and mouse between my Mac and PC, the Wacom didn’t work with Synergy. Now that I’m doing all my work on the treadmill desk, and facing the reality that I haven’t used my Wacom hardly at all except for some minor drawing in Illustrator and to sign my name on PDFs, I’m cutting the ties and getting rid of it.

(The Field Notes notebook and fancy Pen Type-A have nothing to do with my treadmill desk system but are there for show.)

So yes – with one wireless keyboard and one wireless mouse, I’m able to use my PC and Mac simultaneously. AND walk on the treadmill! (There are times when the work I do requires me to connect to another network on the PC, and the high security measures on the government site kicks off Synergy. In that case, I pull my PC laptop down to the treadmill desk and use the built-in keyboard and trackpad to work. But it’s still nice having the external monitor so I don’t get a kink in my neck!)

One side note is that I moved my Mac Dock from the bottom to the left side. Because I had my external monitor arranged above my laptop, the dock ended up on the smaller screen at the very bottom. SUPER annoying. So now I’m getting used to having the dock on the left side of the big monitor.

Here’s a picture of the new surge protector installed on the side of my desk closest to the treadmill:

And unfortunately my work area isn’t as decluttered as it used to be, with wires visibly showing:

But that is a small price to pay for being able to walk while I work! (And speaking of prices – this was a relatively low-cost venture after the cost of the treadmill and new monitor, mainly because I had scrap wood and power tools already!)

And just how is the walking-while-I-work thing going, you ask?

Well – let’s look at my Fitbit data:

I find it VERY hard to make it the full 10,000 steps on the days I don’t work!

My speed is usually set to 1.8 mph (I started at 1.5 mph and worked my way up). It’s a moderate pace. I’m well able to type and use my mouse while I walk, but the treadmill is noisy enough that I have to turn it off for meetings. So on the days that I have a lot of phone calls, I walk a little less. I can usually get 5-7 miles a day.

With small kids in the house, I find that I get enough breaks from walking and have a hard-stop with work hours as it is so I haven’t missed sitting down too much. But I could definitely see having to figure out a sitting solution if I worked longer hours. I can’t imagine a bar stool on a treadmill, even stationery, would be a good idea!

That’s that for my treadmill desk!

Now I just have to clean up the rest of the office. Especially my desk.