I'm excited to announce a new online class I've been working on and recording over the past several months. It's called Introduction to SharePoint Framework, and I find it to be a refreshingly enjoyable online training course taking you from zero to expert in all things SPFx.
In this introduction to SharePoint Engineer, author Kyle Schaeffer demonstrates the basic features of the application and provides insight into the driving force behind Engineer’s creation.
This is the second video in a multi-part series in which designer Kyle Schaeffer demonstrates the entire SharePoint user experience design process from beginning to end. In this video, Kyle builds upon the previously completed website wireframes to create fully detailed desktop and mobile design compositions depicting the SharePoint home page.
This is the first of several posts in a video series detailing the SharePoint user experience design process from beginning to end. Designer Kyle Schaeffer begins the creative process with quickly drafted wireframes crafted in our very own QuirkTools Wires.
Phew! It’s been quite a year! Old River Creative was born on January 1, 2014. Since that time, I’ve written very few posts here on my blog, but I have had some great clients and have been part of some very exciting work. It all started with a great idea from my wife and co-owner, @ErikaORC.
In my last post, Making <canvas> Art, I introduced the idea of using the HTML5
<canvas> API to create a randomly-generated “northern lights” animation. The effect of the resulting animation is entirely aesthetic in nature. It provides no interactivity beyond the generation of new colors and shapes. In this follow-up post, we’ll use the same technique introduced in the original post, but extend our example to introduce keyboard input and manipulation in order to create a fully interactive game.
<canvas>. Click anywhere on the page to generate new lights, each with randomized colors and trajectories that alter the appearance of the site header as they slowly move across the page.
Crafting an interface for an electronic medium like the web browser is no easy task. The canvas of the web appears in so many mediums, on so many devices and in so many forms that visualizing the outcome of your work is a tall order, to say the least. Now, consider doing this for a platform like SharePoint. Microsoft offers a plethora of templates and functionality within the confines of its flagship platform. We have blogs, wikis, sites, pages, calendars, lists, libraries, and web parts, oh my. There are also limitations in SharePoint. There are things that are easy and infinitely flexible. There are things that are surprisingly rigid and difficult to customize. Recognizing the difference between the easy, the hard, the possible, and the impossible can be challenging. Quickly, the creative process becomes a minefield of things you can, can’t, should, or shouldn’t do. This is a challenge that everyone faces when introducing themselves to this platform. It is something that we overcome, that we learn over time. We teach ourselves to overcome some obstacles, and to avoid others. We learn the intricacies of SharePoint; we hit roadblocks, discover caveats, and we explore new features that unlock new abilities.
Recently, a friend and colleague, much more savvy in the art of code than I, showed me how to do something that opened a door. I knew it was there, I was aware of the capabilities, but I never really understood the power of REST services until now. Very simply, SharePoint’s REST web services allow you to get SharePoint data from a number of data end-points like lists, libraries, navigation, or the search service. This may seem exceedingly obvious to any SharePoint developer, but for UX guys like me who are more focused on the interface and design, it’s new ground.
There was a time, not so long ago, when the notion of the world wide web hadn’t yet crossed our minds. Books were read on paper. Movies were watched in theaters. We bought magazines that told us when our favorite shows were scheduled to appear on the television. We huddled around our tiny, fuzzy, distorted screens to enjoy the simple pleasures of entertainment. The year was 1989, and in that year an amazing thing happened. The seeds of change were sewn into every facet of our lives, and we would, all of us, eventually be touched by this amazing evolution of technology.
You’ve seen it before. Your clients ask for it. They demand it. Perhaps you’ve done it yourself (shame on you). We’ve all done it. I’m talking about filling space with meaningless stock photography. I’m talking about photos of nameless models smiling, with their arms stretched out as if they were at the bow of the Titantic, staring at a blue sky while a photographer captures their moment of pure joy in a faux moment that is staged to look haphazard, but in reality is glaringly engineered to look just so. With the moment captured, you slap this meaningless photo on the home page of your website to elicit feelings of jubilation in your users. You may even feel a bit of jubilation yourself. But…does it work?
In my previous post, Minifying SharePoint 2013, I talked about the idea of minifying SharePoint’s CSS files in order to achieve better performance and better style cascading in CSS. Truly, this was the direct result of my work on a starter master page template I had been working on for SharePoint 2013, which is now available on CodePlex.
The SharePoint interface is huge. Really quite huge. When I first laid eyes upon Microsoft’s latest rendition in the SharePoint legacy, I immediately turned my attention to the man behind the curtain. I delved into the interface and started looking at the goings-on behind the scenes. My first stop?
corev15.css. This is a file that I have known well in previous versions of the product. To my initial delight, the interface in SharePoint 2013 seemed so simple, so elegant and clean. Surely, the CSS files that support this interface would reflect that, right?
This is going to be a short one. The “tool pane” in SharePoint 2013 has been causing me some headaches. In this version of SharePoint, the tool pane often appears inside your site’s design layout, instead of off to the side of the entire document. In a fixed-width layout, this definitely causes some issues due to a lack of space for web part zones, sidebars, and other content to fit into the space that is available.
My lack of posts as of late is largely due to my pet project, QuirkTools. It’s been much more successful than I had ever anticipated, and I’m excited to be working on some exciting new features that will be released in the coming days and weeks. If you’ve never seen QuirkTools, check out this video showcasing the flagship web app, Wires.
In years past, as a wee adolescent first discovering the intimidating art of interaction with real people, I worked as a sales clerk in a local software store. At the store, we had a motto, something that you’ve probably heard many times before: the customer is always right. I will say now that I didn’t fully believe in our motto at the time. I was young, naive, and perhaps even a little cocky (weren’t we all?).
This week at SharePoint Fest Chicago, I was honored to be speaking alongside the likes of Marc Anderson and many other talented and intelligent thought leaders in the SharePoint community. My slides and resources from my sessions are posted below for anyone who attended, or for anyone who might be interested in the topic of SharePoint design.
I had the pleasure of doing a great workshop with Paul Swider yesterday at SPTechCon. In this end-to-end workshop, we discussed strategy, processes, and implementation techniques for building a public-facing SharePoint publishing site. Paul had some great insight on architecture and strategy, while I detailed the journey from idea to Photoshop to SharePoint, with a few tips and tricks along the way. The end result was a fictitious digital bakery, built on the able shoulders of SharePoint 2010.
Last week, I was happy to present at SusQtech’s “30 on Thursdays” weekly webinar event. This is a great series of free webinars from some talented speakers, and the succinct format is a great opportunity to learn something new without a huge investment of your time.
I had the pleasure of speaking at SharePoint Saturday Virginia Beach this weekend. Thanks for all who attended; I had a great time speaking on some exciting new topics, and sharing my passion for design in SharePoint. For those of you who were at the seminar, and also for those who might be interested, I wanted to share my presentations on my two sessions:
On January 23-26, 2012, I’ll be instructing a class that focuses on the more advanced strategies behind applying style and branding to a SharePoint 2010 website. This isn’t your average SharePoint training class: we’ll cover topics like improving the SharePoint user experience, creative design for the SharePoint platform, and implementation strategy for making your creative designs come to life. Over four days, we’ll learn how to bend the rules in SharePoint to make it a truly limitless platform for customization.
“v5.master” is a simple HTML5 master page designed for SharePoint 2010. It makes good use of the amazing new features of both HTML5 and CSS3, including CSS3 media queries. The master page is extremely simplistic in nature, and is truly meant to serve as a framework for building your own SharePoint 2010 customizations.
As a designer of the world wide web, you are armed with the power to amaze, enlighten, entice, and captivate. The web is an easel for your creative aspirations, and the content you design for is the foundation of your creativity. With so much power at the tips of your fingers, you also possess the ability to deter, annoy, anger, and infuriate. Your users are yours to command, their emotions yours to pluck like the strings of a harp.
It’s easy to forget how a website really works. I mean really works. I’ve had the pleasure of working with many brilliant and talented developers (programmers) who could bend the functionality of any application or server-side platform at the drop of a hat. They are problem-solvers, as is everyone in this industry of the online.
You can now download my free SharePoint theme, Medazio, on SharePointDesigNerds.com. We’re still working on cleaning up the site while it’s in “draft” version, but feel free to sign up, browse a couple of the themes that we’ve uploaded, post your amazing SharePoint spotlights, and give us feedback on the design, navigation, and functionality in the site.
Responsive design is all the rage. Ethan Marcotte, just today, released a new book on the subject, of which I’m quite excited. My last post was all about responsive web design, and after writing the article, I couldn’t help but ask myself: what now? Designing and implementing experiences for an unknown number of devices can be an intimidating task, especially when you don’t have the opportunity to test your designs on many (or any) of them. The answer, for me, was to create a new web app that aids in this testing process. It’s called Screenfly, and it’s the first of many apps that will be available on QuirkTools.com.
The days of the desktop are numbered. In the past, designing a web interface involved targeting a screen resolution in the vicinity of 960 pixels wide. For many years, this worked, and it worked well, because 99% of online users could easily read and scroll at that resolution, regardless of the browser, operating system, or machine they were using. Times have changed.
I’ve done some crazy things to make SharePoint work like I want it to. One of the things that I’ve done in the past is write some insanely complex XSLT functions to format dates in SharePoint 2007 item styles. SharePoint 2007 offered a very useful
FormatDate feature of the DDWRT XSL library, but the formatting customization was limited to picking a prefab format, which didn’t always gel with what you or your client wanted to see. To get some custom date formats, I wrote crazy XSLT functions that literally had
A most difficult aspect of customizing the SharePoint 2010 interface is the arduous task of overriding the thousands of styles that Microsoft has already put in place for anything and everything that you see in the browser window. This can be a tedious task, to say the least. Largely, the SharePoint interface doesn’t rely on the cascading facet of Cascading Style Sheets. Instead, most of the elements that you see in SharePoint 2010 (like web parts, navigation menus, lists, libraries, page editor styles, etc.) all have specific CSS styles that specify font size, color, and even the font family. In a more traditional HTML/CSS structure, you begin your presentation alterations with a default style that cascades throughout the entire HTML document, like so:
If I have one gripe about SharePoint 2010, it’s scrolling. It’s something I’ve bumped into in every 2010 project I’ve worked on thus far (which has been a lot). First, I’ll explain the problem, and we’ll subsequently look at some potential solutions (which have their drawbacks) for this highly visible and hotly debated element of the SharePoint interface.
I’m very excited to be a part of the upcoming SharePoint .ORG Conference that will be held in Baltimore this year. If you have even a small amount of interest in SharePoint or SharePoint design, you’ll love the line-up. I’ve attended and have spoken at numerous conferences and events around the country, but this is the first SharePoint conference I’ve seen with a dedicated “design” track. I’m very excited to have the opportunity to speak at a few of the design sessions, and I look forward to seeing any readers at the conference.
I am starting to see a pattern. It is approaching the end of the year, and as with many, hindsight is on the mind. Over the course of my blog, I think I’ve set a course and direction for what I write. The web has definitely changed since my first post in September of 2008; so too have we, as designers, developers, and avid fans of the internet. We have altered our methods, our tools, and our expectations for what a website should be. In all of this change, I have clung to one idea that holds me steady on this shaky ground: constraint.
SharePoint 2010 makes it incredibly easy to add dialog content to your website. Built-in functionality allows you to retrieve content from anywhere within your site and display it in a modal dialog that appears over the page. This is pretty standard stuff when it comes to modern web technology, but the ease of use is what makes SharePoint dialogs so amazing. In this article, we’ll explore the dialog functionality that comes with the SharePoint 2010 platform, and we’ll discover new ways to customize that content to create a uniquely fresh appearance for your SharePoint portal.
I do quite a bit of design and implementation on the SharePoint platform. Today, I created a very handy little script that I think might be something worth sharing. I don’t often post anything so specific on my blog, but I found this to be extremely useful, and I hope you do too.
Bigger, better, and bolder. That’s the direction of things. The art of the interface is a little more complex than it was yesterday. We have new techniques, new technology (languages and libraries and acronyms, oh my), and even more bandwidth to back it all up. What to do with all this power? The possibilities are nearly limitless. I say, take it down a notch.
Header text gets all the love, doesn’t it? From Photoshop to the browser window, the focus seems to be on design elements like logos, navigation, and of course, header type. It’s great fun to use tools like Typekit to make your header text something a little less than ordinary. It defines your site, gives you a unique look and feel, and gives readers that oh-so-scannable sensation they know and love. When you really think about it, however, readers aren’t there for the header text. The headers serve as an essential tool to quickly find what you’re looking for, but the real prize here is the body text, isn’t it? This is where your information is, this is where you write and communicate to readers, and this is an area of design that cannot be neglected. Sadly, it often is.
It’s a very cool feature to have a form field that has prompt text such as Enter search keywords… right inside the input box, itself. It looks good, it makes sense to users, and it can save a lot of real estate in your design by negating the need for field labels. The problem, however, is that there are about one hundred ways to implement prompt text, and ninety-nine of them are wrong. Let’s look at this thing from all angles and come up with a fantastically simple and reliable way to make this work.
If you’re into client-scripting, then jQuery AJAX is probably your thing (if it’s not, perhaps it should be!). jQuery has some fantastic support for AJAX, and implementing it into your web application is so easy it’s stupid. The AJAX functionality in the AJAX library is so flexible, sometimes it’s easy to get lost when you’re trying to do something very simple. I’ve come up with a very basic jQuery AJAX template that I use for just about everything I do, and I thought it might be useful to share.
According to W3Schools’ latest March update, 8.9% of internet users are still using the old and oft-neglected grandson of Microsoft’s intrepid series of web browsers, Internet Explorer version 6. Times are changing people, and you’re falling behind. It’s amazing to me that a web browser that is now two major versions outdated, that is no longer supported by its developer, and that was released almost ten years ago is still in circulation today. Nearly one in ten internet users are browsing the internet like it’s 2001. That’s simply not acceptable. You are missing out; there is so much more to see! As a web designer, my charge is to make websites look good. This is my plea: please, update your browser, and never look back.
The designer in me seems to live in a perpetual state where I regard my six-months-previous-self as an “idiot,” and I think that the latest and greatest design I’ve just come up with is the best thing since sliced bread. Welcome…this is my latest and greatest design. I’m sure I’ll hate the high-contrast and dark background in another six months, but I’m digging it for now. Let me know what you think. I’ve been playing around with typography quite a bit lately, and I have to say that I’m starting to enjoy this new “type is coming to the web” phenomenon quite a bit. I got an idea in my head this evening and went from concept to complete WordPress theme in about three hours. Gotta love that WordPress…
Are you in the Winchester area? I’ll be speaking at Refresh Winchester tonight, detailing my painstaking journey throughout the development of my personal pet project, ThumbSticks.com. It’s been a long road, and there have been many bumps along the way. I’ll share what worked, what didn’t, and I’ll also share a few invaluable assets I discovered along the way. If you’re nearby, be sure to check it out tonight at 6:30pm in downtown Winchester.
I’ve totally revamped my weekend project, ThumbSticks.com. An entirely new visual presentation accompanies what I hope to be the final version of my ambitious new website. I’m still working on adding box art and other media to the thousands of products you can find on the site, but it’s come quite a long way since last year when I officially launched the initial beta.
I’ve recently started using Amazon Web Services (AWS) to import large amounts of rich content into my weekend-warrior project, ThumbSticks.com. I have to say that I’m quite impressed with Amazon’s dedication to providing their product information in such a transparent and detailed manner. If you’re not familiar with AWS, here is a quick introduction and some useful code snippets to help you get started with AWS in your PHP environment.
The “lightbox” is a unique and useful design tool when used properly. It allows designers to present information that is totally independent from the site theme, and it is especially useful when displaying information that is loaded via AJAX requests (often negating the need for additional post-backs on your pages). There are countless ways to implement lightbox functionality into your site, and almost every option I’ve ever seen is weighed down by extraneous functionality or useless transition animations. It’s quite easy to create your own lightboxes with minimal effort. This tutorial can serve as a quick and easy template to get you started.
The latest update to Mozilla’s wonderful web browser, Firefox 3.6, includes support for some fantastic CSS version 3 recommendations that you may or may not be aware of. Obviously, these tricks won’t work in Internet Explorer just yet, but look for widespread support coming in the (hopefully) very near future.
I am pleased to announce the launch of my latest project, ThePeev.com. The Peev is a quick and dirty WordPress site designed for the sole purpose of serving as my personal artistic outlet. I’m posting doodles and sketches regarding all the things in life that may or may not bother you. I had a lot of fun creating the site, which came together nicely from concept to complete in less than eight hours of work. What’s your pet peeve? Visit ThePeev.com and let me know.
I recently had a client whose design demanded rounded corners in a lot of different areas of their site. As I looked through the design documentation, the variety and color of these rounded widgets really started to add up. I quickly decided that pure CSS corners were the best choice for their design. Most users can utilize
border-radius to apply the rounded effect without any overhead (the browser does the work), and the remaining users can be handled by a quick and easy bit of jQuery.
I updated the site’s theme a bit to add some “fresh.” Please give me a bit of time to go through some of my older posts and clean them up for a better display. I’m trying to be very good and do things like add
<acronym/> tags and
<code/> tags to my posts. Ooh, how very accessible of me. My SEO senses are tingling. More tutorials and other goodies coming very soon.
Image buttons are a fairly common occurrence in web media. As with everything else in web design, you have a dizzying arsenal of methods from which you can choose to create this type of design element, and choosing the right method can greatly aid in your design’s accessibility, performance, and SEO-friendliness.
I love jQuery; I use it all the time. I also love the great UI controls that come with the jQuery UI library. Unfortunately, I’ve found that a lot of these controls can be a little heavy in terms of required JS/CSS files that your clients will have to download in order to use these controls. Being the minimalist that I am, I really want to drop a small amount of CSS and HTML into my site and quickly get myself up and running with a tab structure that’s both flexible and accessible.
Just about every web designer uses applications like Dreamweaver, Coda, Photoshop, and the like for their work each and every day. These tools really lay a foundation for web design work, but there are a number of other applications and plug-ins out there that you may not be aware of. These tools can increase your productivity and make your job easier to boot. In an effort to alleviate your designer woes, I have come up with a list of the five most valuable (and FREE) tools that I’ve found. Your comments and supplemental suggestions are most welcome!
In retrospective, there are definitely some areas where I could have improved on my Karate Corners design. I decided to take a second look and write a quick post that details how I create corners today, after almost a year of evolution in the ever-changing world of web design. This is absolutely the most simple and efficient way to create rounded corners using strictly CSS and HTML.
Each time you implement a new design element into your site, there are a vast array of approaches you can take to achieve the same outcome. Often times, I feel that the most simple of solutions is the best one. When implementing the “user comments” feature into ThumbSticks.com, I decided to wrap each user comment in a sort of “chat bubble box,” much like you would see in a comic book story. I experimented with various solutions that gave me different amounts of flexibility and performance, but I eventually settled on a very simple solution that resulted in what I think is an elegant CSS chat bubble.
I’m constantly creating new designs, either for work or for fun, so periodically I try to update my portfolio to include the latest and greatest. Check out the newest additions and please let me know what you think!
Web designers would be wise to approach every situation with one thing in mind: simplicity. Simplicity is the cornerstone of designing a well-structured and highly flexible HTML/CSS design. I’ve found that all too often, many designers approach a website with one thing in mind: the “look” of the fully rendered site. They approach each page or screen with a definitive pixel-perfect image in their heads, and they execute the design process to produce each pixel as it was originally intended.
After many months of diligent design, testing, and development, I have finally reached the first major release of my latest project, ThumbSticks.com. You may have seen the design for this site on my portfolio page for quite some time now. This creative design has finally become a reality!
Should we abandon rounded corner techniques that require additional HTML markup in favor of emerging CSS techniques that are not yet supported on all browsers? Apparently, the answer is an overwhelming YES.
I know it’s been a long time since my last post, but things have been busy! I’m at An Event Apart this week, which is a conference for UI designers such as myself. I’ll be making a few posts that have been “in the making” for quite a while now in the coming weeks, so look forward to seeing some new design tips and tricks in the days to come.
Absolute positioning is a very powerful CSS technique when used properly. Traditionally, when you use
<div/> tags and the like, everything in your page design is generally stacked from top to bottom. Using absolute positioning gives you the freedom to place elements of your page just about anywhere you’d like. Here are some fundamentals of absolute positioning that can make your design appear more fluid, elegant, and easier to manage.
Most of the time, web designers will optimize a site to display on screen media (any type of screen, such as a computer monitor or a mobile device screen). If your site has a lot of information that could potentially be printed out by your visitors, you should consider adding print-specific CSS to your design in order to make your print media visitors happy. Depending on your design itself, the visitor’s printer, and the visitor’s web browser, you can get a number of different results when printing a given page from the internet. Here are a few quick and simple steps you can take to make your site display just as well on paper as it does on the screen.
This is a paper that I had to write for a psychology class that I’m currently taking. I had fun in writing it, so I figured that I would share it with more than just my professor. Without further adieu…
In the process of moving my blog to a new web server, I decided to take this opportunity to create a new theme for the site. The theme changes depending on what time of day or time of the year that you visit, so check back often! I’ll continue to add little customizations for holidays, special occasions, etc. (what a wonderful use of my time it is to create little meaningless PNG images). Let me know what you think.
The W3C’s CSS3 specification includes an oft-requested CSS attribute called
border-radius. Using this attribute, you can create rounded-corner boxes that use no images, script, or other fancy DHTML tricks (pure CSS). This will make your site flexible, faster, and more accessible. It’s not yet supported in Internet Explorer 7/8, but other modern browsers have already introduced support for this fantastic CSS feature.
Web design is about much more than HTML and CSS. In many cases, the quality of a website lies just as much in its code and functionality as it does in the quality and optimization of its images and other graphical information. The amount of choices in image format, quality, and optimization is dazzling to say the least. What format should you use? Is there a end-all format for the web that trumps all other formats?
Ian had been looking forward to coming in to town on this early Friday morning. Now, hustling down the paved walkway of Midland Avenue, he wondered why he looked forward to such errands. If there was one thing he didn’t like, it was forcing a false bond with people he didn’t know, and frankly didn’t care about. He was polite and respectful of other people, but when it came to shallow conversations about the world, he simply wasn’t interested. It was an arduous task in such a small community to avoid these conversations, when everyone seemed to want to know his name and what he “did” for a living. What does anyone do for a living?
I wanted to really take the concept of my “Karate Corners” design to new levels, so I created this simple demo to show you how visual elegance can work in tandem with technical simplicity.
An unordered list (the
<ul/> tag in HTML) is a great way to easily organize your site navigation with a minimal use of HTML, but how is it done? This is a simple tutorial showing you exactly how to create a simple list-based navigation menu in your site.
There are a number of ways to create vertical columns in your XHTML design without using the
<table/> tag and the horrendous amount of HTML that always seems to accompany it. Each method listed here is superior in various situations, so choose a good fit for your particular design.
I’ve seen a lot of different ways to create round corners and boxes in web sites, and quite frankly I haven’t exactly fallen in love with any of them. A lot of the methods that I’ve seen use either (1) a table structure which I try to avoid at all costs, (2) too many nested
<div> tags, (3) complex CSS, or (4) too many different images that have to be loaded all at once.
One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.