    
|
The real value of events you attend is in the people you meet and connections you make. In this Treehouse Quick Tip, author and blogger C.C. Chapman shares his strategies for successful networking and standing out from the crowd.
The post Successful Networking at Events – Treehouse Quick Tip appeared first on Treehouse Blog.
]]>Professor John Deighton is an expert on consumer behavior and marketing and a professor at Harvard Business School, where he teaches Digital Marketing Strategy. MIT Technology Review Custom reporter recently asked Professor Deighton to share some of his thoughts on the advertising technology, or ad tech, sector, which facilitates the automated placement and targeting of online ads.
]]>|
|
 |
Back in 2010, Microsoft shifted its focus from propriety Web technology to open Web technology. The first fruits of this refocus materialized a few years later — in Internet Explorer, the Windows operating system, its developer tools and its cloud software.
Things have changed for the better so far:
Across the board, Web developers should see significant improvements, making Windows an HTML5-friendly platform.
Windows 8 apps that reflect Microsoft’s “modern UI” can be built using a variety of technologies — HTML5, JavaScript and CSS being among them. Access to the native API enables you to do a lot more than you could from a browser. (Larger view)
In this first article in our two-part series, we’ll look at an HTML5 app that runs natively on Windows 8. In the second part, we’ll tie it up with the server and cloud. It will be a whirlwind tour through Microsoft-based Web development in 2013, with a hands-on case study and some code.
If you code along with us, you’ll end up with an online magazine app, built with Web technology. The Windows 8 app will present articles fetched in JSON format from a content host running on Windows Azure. You will have a personally branded touch-friendly magazine app that you can submit to the Windows Store, that integrates with the Search and Share charms and that displays articles you manage in a cloud-based content management system (CMS).
In this first part, we’ll explain how you can launch and customize a pre-baked HTML5-based Windows Store app. In the second part, we’ll guide you through setting up your own content host, from where you can publish articles.
Our app will run on any Windows 8 machine, including Windows RT devices such as the Microsoft Surface RT. (Larger view)
The source code presented here, as well as the CMS back end, are all open source and easy to adapt, and the hosting and tools referred to here are available free of charge.
Throughout, you will find code snippets and links to relevant in-depth articles, and I’ll pass along some of the gotchas that I learned while building this app.
To develop and debug a Windows Store app, you’ll need to be running Windows 8, either natively or via a virtual machine. To edit the HTML, CSS and so on, you can use your favorite editor and compile the app via the command line; here, I’ll be using Visual Studio 2012. You can download Visual Studio Express 2012 for Windows 8 for free.
Before diving into the pre-baked app, we should get to know the playing field a bit. So, here is what the code for a barebones Windows Store app might look like:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/HelloWorld.svg" />
</body>
</html>
To compile this into an app, Visual Studio will also need a project file and a manifest file (which contains meta data about your app). However, the HTML document above is all you really need to get a “Hello World.”
What you add is up to you, as long as it runs in Internet Explorer (IE) 10. (You can safely use CSS3, canvas, video, SVG, your favorite JavaScript libraries, etc.) In addition, you will also have the option to use the Windows Store API from JavaScript, to take advantage of Windows 8-specific features.
In our pre-baked app, we will use the Windows Store API. Even though it is optional, we will need it if we want things to feel native and to integrate with Windows 8.
The source code for the magazine app is available on GitHub. If you don’t have Git on your machine, simply download the ZIP file and extract the source code.
Once it’s downloaded, launch the project file, Composite.AppFeed.Client.Template.jsproj. When Visual Studio has launched, hit F5 to run the app.
The app’s main view shows articles within tiles that are familiar from Windows 8’s UI. (Larger view)
Our app has the following basic features:
The Search and Share charms are part of a canonical charms menu in Windows 8, invoked by swiping in from the right edge (or moving your mouse to one of the right corners). The Search charm, as the name suggests, lets the user search, in our case, through articles in the app. The Share charm integrates with the user’s mail and social media accounts, enabling the user to share the URL of a given article.
In the following few sections, we will customize the design.
The sample content you see in the app is downloaded from the Web from various sources (including an existing blog, CodePlex and StackOverflow) and gives an idea of what existing raw Web content could look like when presented via this app. We will replace this default feed with one you control in part two.
The project explorer shows files that make up the HTML5 app.
The project’s structure is pretty straightforward. The css, images and js folders contain global resources for the app, while the individual pages (including HTML, CSS and JavaScript) are defined below the pages folder. In the root, we have default.html, which is the app’s starting point, and package.appxmanifest, which contains meta data used by the operating system (OS) to present the app.
Once you know your way around the sources, you can customize as you wish. To customize the UI quickly, focus on the following files.
Edit the package.appxmanifest file. In the “Application UI” tab, specify your app’s title, language and description. In the “Packaging” tab, set a unique package name and publisher display name.
You can customize other things, such as the appearance of the tile for your app. The images for your tiles can be replaced in the /images folder (see below).
The app’s manifest file is where you control how the app shows up in the OS. (Larger view)
Right-click the /image folder, select Open Folder in File Explorer, and replace the various-sized logos with your own. These logos will be used to create the tiles for the Windows 8 start screen and your app’s splash screen. You can change the background on the main page by replacing background_mini.jpg. Change inapplogo.png to customize the footer.
Use PNG and JPEG images in your app and to represent the app on the start screen. (Larger view)
Set the colors for the app’s bar and background at the top of default.css.
In options.js, you can set the app’s title and details such as the “About” page’s URL, the privacy page’s URL and the alert text for offline mode.
At a minimum, customize the title and websiteUrl. Later on, when you’re running your own content host, change dataHostUrl, but keep it as is for now.
The app’s global settings are controlled via JavaScript. (Larger view)
If you will be submitting your app to the Windows Store, pay attention to the value of privacyUrl; this is the URL that gets loaded when the user invokes yours app’s privacy policy, via the Settings charm. Because your app will be contacting a server on the Internet to fetch articles, you will need to explain your privacy policy to the user in order for your app to be approved by Microsoft. More on that in part two.
If you’ve updated the colors, titles, URLs and images, as explained above, then the major design elements of your magazine app should be branded to your liking. The next step is, obviously, to get your own content host up and running. But before we cover this, let’s cover a few pointers on further customizing the app.
When building your app, you can safely use the HTML5 and CSS3 features of IE 10, including canvas and SVG. You can use any JavaScript library out there, such as AngularJS, jQuery or LESS. You are not required to test your pages in other browsers or in older versions of IE.
The Windows Store app API is by far the biggest change from the Web developer’s traditional experience. If you wish to interact with the OS, go through this API using JavaScript. The API also contains a host of other features that make JavaScript even more powerful. The API is unobtrusive in that you don’t have to care about it until you need to interact with the OS or want to use one of its features.
Here are a few APIs used by this app:
WinJS enables more advanced JavaScript features (such as the Promise object and XHR), which are excellent for writing asynchronous network interactions.Windows.UI, Windows.ApplicationModel and Windows.Storage let you plug into the native OS and UI to do things such as interact with the charms menu and read and write to local files.WinJS.UI contains presentation controls that act in accordance with Windows 8’s modern UI, including the scrollable list view that you see when launching the application.For more on this, see “Windows API for Windows Store Apps.”
This app uses a single-page navigation model, meaning that HTML, CSS and JavaScript for individual subpages are loaded into /default.html as you invoke links. This enables you to preserve state across pages and to get smooth page transitions; but it also changes how page-specific CSS and scripts are written.
Below the /pages folder, you will find subfolders with HTML, CSS and JavaScript, making up the individual pages of the app, and this is where you can customize the individual views to your heart’s content.
Due to the single-page navigation model, expect the HTML, CSS and JavaScript from /default.html to stay with you all the time. When you navigate a subpage, scripts and CSS are loaded dynamically, and the HTML of a subpage is loaded into the /default.html div with the ID contenthost.
When you navigate from one page to another, CSS rules will not be unloaded, which means that any global selectors you style in a CSS file for a subpage will stick. If this is not desirable, you can prefix subpage-specific CSS selectors with a unique class name that identifies the subpage.
An example is this rule from /pages/groupedItems/groupedItems.css:
.groupeditemspage .groupeditemslist .group-header .group-title, .groupeditemspage .pagetitle {
color: #eeeeee;
}
The class name groupeditemspage is set in /pages/groupedItems/gropuedItems.html and only there. This enables us to set a light color for title text, but only for this particular subpage. When we navigate to one of the other subpages, the groupeditemspage class will no longer be in the DOM, and titles will fall back to a dark color, even though the CSS rules above still load.
It is worth mentioning that I’m using JavaScript (see /js/navigation.js) to lift this page-specific class name up to the body element on the current page every time the user navigates; this enables me to style all elements on the current DOM. If I didn’t do this, I would only be able to style elements below contenthost in default.html. If you study groupedItems.css, you will see a background image being set, and it only works because of this “move the subpage class up the DOM” trick — a small generic hack that lets us do more with CSS.
You also need to care about unregistering resources, such as removing event listeners when a subpage is unloaded. Because the DOM is always kept alive, failing to unregister subpage resources on unloading can lead to undesirable results.
An example is this handler from /pages/groupedItems/groupedItems.js:
unload: function () {
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.removeEventListener("datarequested", shareDataRequested);
}
Earlier in the subpage’s life, we subscribed to a data request event (which happens when a user invokes the Share charm), and we need to unsubscribe from this event when the user navigates away from that particular subpage.
Your app can run on both classic Windows 8 PCs and ARM-based devices, such as the Surface RT tablet. In addition to a multitude of screen resolutions, be prepared for things such as horizontal to vertical rotation of the device and your app being snapped next to another one.
Windows 8 let you run two apps side by side, with one being “snapped.” Here, our app is snapped next to the Web browser, which lets users follow links in articles within the app without losing focus. (Larger view)
This you can do by using CSS media queries for Windows 8 apps. Below are a few sample declarations.
@media screen and (-ms-view-state: snapped) {
.groupdetailpage .itemslist .win-groupheader {
visibility: hidden;
}
}
@media screen and (-ms-view-state: fullscreen-portrait) {
.groupdetailpage .itemslist .win-horizontal.win-viewport .win-surface {
margin-left: 100px;
}
}
You can also respond to rotation and snap events in scripting. For example, see the updateLayout handler in groupedItems.js.
The coding and debugging experience is slightly different than in normal Web development. For starters, your HTML app will run in a 100% chromeless full-screen environment, so the developer toolbar is not where you are used to seeing it. You’ll find it inside Visual Studio instead, which means you’ll have to jump between Visual Studio and your running app to inspect elements and so on.
The DOM explorer in Visual Studio 2012 looks and feels like most other developer toolbars. (Larger view)
On the bright side, you’ll have a nice spacious development canvas and excellent JavaScript debugging capabilities. And if you are running dual monitors, the experience is quite nice and seamless.
While your app is running, you will find a “DOM Explorer” tab in Visual Studio, which represents the page you are currently viewing. The “Select Element” button will bring focus to your HTML app and let you select an element, just like in the developer toolbars you know.
Visual Studio can launch your app locally, via a simulator and on a remote device. The simulator lets you emulate different device sizes and test things such as touch events, geo-location services and changes in orientation, even though you are sitting in front of a classic PC.
The simulator can launch a new log-in session on your Windows 8 machine, displaying everything as if it were running on the device you have selected. This lets you test how your app will behave (including with touch actions) on different device sizes and orientations. (Larger view)
Remote machine debugging is surprisingly easy to get up and running. Apart from letting you instantly test your app on a device like Surface RT, it is also an easy way to get your app onto a device. Once the app has been launched this way, it will stay on the device and can be used for demoing and so forth.
During development, I ran into two issues that took me way too much time to figure out. To save you from repeating my experience, I’ll leave you with two pointers as you polish the app.
If you ever find yourself developing a Windows Store app that fetches data from your local network, via a virtual private network or the like, you might need to edit package.appxmanifest and enable “Private Network (Client & Server)” in the “Capabilities” tab. If this setting is not enabled and you are trying to read data from a local test server, then network communication will be blocked (with no usable hints). Uncheck this again before submitting the app, unless you expect users to need this feature.
You have to explicitly opt in to access things such as location, the webcam, private networks and the microphone. Users will be informed of this usage. To keep users from getting suspicious, select only what you need. (Larger view)
If you write code that interacts with the Share charm and your code fails inside the datarequested handler or you stop a debugging session there, then you will experience a bug whereby the Share charm stops working, even if you restart the debugging session. The easiest way to fix this is to launch the Task Manager and restart explorer.exe.
In the second and last part of this series, we’ll walk through setting up the CMS back end, getting it online and having the app read content from it. With the customized app and the back end online, you’ll have something of real value to publish, and we’ll briefly touch on how to do just that.
If you plan to submit your app to the Microsoft Store, now is a good time to sign up for a developer account. If you choose the “individual account,” you will get up and running a whole lot faster; the “company account” requires verification but lets you publish apps using more features. Make sure you know the differences between the two account types before signing up. There is a $49 annual registration fee, while submitting apps is free.
(al) (ea)
© Marcus Wendt for Smashing Magazine, 2013.
]]>
Most my clients are focussed on print, so I was super stoked to get my first web design client in a long while.
I had some techniques in mind that I wanted to try out. During the initial client meeting, my mind was racing with ideas on how I wanted the site to look and how it was going to be so much better than what they previously had.
After the meeting, I gathered fonts and pictures I felt worked best with the theme I chose. I informed my clients and my team that I was going to present some mock-ups of the design soon and we would move on from there. I was confident in my design skills and the client seemed to be pretty easy going, so I figured this would be a piece of cake.
Well…I was wrong. I ended up making tons of revisions. The client disliked almost everything I did and we actually ended up parting ways because it seemed we had passed the point of no return.
I had failed. Does this sound familiar?
I was too eager. I was too impatient and I was too caught up in how I wanted the site to look. It was all about me, what I wanted and what I saw. I didn’t think about functionality nor did I think about the purpose of this site. I wasn’t concerned about the brand and I was barely concerned about the client. I just wanted to make something pretty. Period.
Today, I realize where I went wrong and I try to make up for it with every one of my projects. All my ideals had to shift. And once they did, designing came much easier for me and clients became a lot more satisfied with my work. My referrals increased and in turn my prices increased. Why? Because there were at least 5 questions I asked before starting a project or even accepting a client.
Here are those 5 questions:
This is probably the most important question when discussing projects with clients. It’s not about the design or the color scheme and such, it’s about getting to know the company. You want to understand why they went into business and even how they went in business. A deeper connection with your client and with the company make it so much easier to understand what they like and what will fit for them.
At one point, I had a client that was a social media agency — they enjoyed developing strategies for social media campaigns and ways to get social in general. In getting to know them better, I came to understand things, such as, they were interested in doing business with creative businesses rather than corporate ones. I also found out their goals were to create organic connections between businesses and their customers rather than high tech digital ones. I also found out they had a personal affinity for circles, so this became a motif in the creative work. This allowed me to create pieces for them that reflected these goals and likes.
Understanding your client is essential. You do this by listening. Don’t tell your client about what you want to do and what they need to do, but let your client tell you what they have a desire to do. This is often the difference between work that creates conversions and work that just takes up space. You firstly want to make sure the goals of your client are consistent with the goals of the design.
Along the same lines of knowing the purposes and goals, you want to know and understand how a client wants to be perceived. This is easily and obviously the second most important thing to discuss with a client. Simply find out what your client wants their customers to think about them. This is how we begin to go deeper.
What do you think about when you ponder your favorite businesses and companies? I guarantee you that whatever pops up in your mind is not there by accident. You feel that way about them because someone took the time out to design projects and messages that helped reflect that idea.
Here is where it’s especially important to listen to your client because our own common perceptions may not be what the client wants. To use my previous social media agency example, it’s easy to immediately perceive them as a high tech, digital agency, but actually they wanted to be perceived as creative. A client such a frozen yogurt shop may not want to be seen as a family fun spot, but as a premium yogurt cafe with flavor palettes for adults. Wouldn’t you design the two differently?
The idea is to approach your client as if you’ve never heard of their business or what they do before. You want to be a blank canvas with a picture painted by them and only them.
I’ve always been the type of person who likes things explained to me as simply as possible. I believe in simplicity in all aspects of life, including in design and in business. Because of that, I believe in niches and simplifying my customer. I’ll often ask my clients to do this by creating one person and telling me how and why that one person is an ideal customer.
This is typically different for many clients because they’re so used to thinking about large groups of people and how to attract them. However, when we focus on one person, we begin to really breakdown how this person thinks, where this person goes and it becomes easier to figure out how to influence this person.
Telling me your target market is men, aged 18 to 35 who like fashion and music is totally different than saying your ideal customer is a guy that hangs out at open mics and museums, is a college graduate and/or young professional who values his health. We became a ton more specific and are immediately aware of some motifs, jargon and other brands that may influence him. And the more specific, the better!
Nailing this part down makes the next part so much easier. This is the first step in figuring out how to create influential connections.
This question should take all your previous answers and turn them into something wonderful. This is essentially why you’ve asked all the questions. You need to understand how your client wants to connect emotionally with their customer. It should be consistent with the goals, the ideal customer and the desired perception of the company and product. How do you now design to connect?
My social media agency, isn’t going to want design work that appeals to a stuffy, rigid business because they value creative businesses. They aren’t going to want to use hardcore persuasive techniques in their design, because they value organic connections and relationships. All these things have to be evident in your design work. You certainly can’t just pick one thing to design and not the rest.
We all know that good design helps create emotion. This is how you get to that point; by combining everything you’ve heard up to this point and putting it all together. Of course you want to make something beautiful, but remember that beauty is in the eye of the beholder. And the beholder is going to be your client’s customer…so what’s beautiful to them?
This is really just a qualifying question that you can phrase any way you want, and put wherever you want in this sequence of questions. The ideal answer is that your client says something about good design creating value and connections and things of that nature. The ultimate idea is to make sure the client understands the value of design beyond making something look pretty.
You don’t want to ask these questions and create something effective and meaningful that your client can’t necessarily comprehend. You don’t want to waste your time.
I typically treat this question as a meeting of the minds as well. If we’re on the same page, then great! Let’s commence with the designing. But if not, I have to determine whether or not I want to educate my client and hope they see the light, or I have to see if we should just part ways. Either is fine, but again, the purpose is to make sure this project is worthwhile for both parties.
We touched on it earlier, but asking these questions is really a chance for you to listen. As a designer, you’ll have plenty of time to talk and influence your client as a project is being completed. You need to be able to connect the dots between a client, their offering and their customer. Consistency and simplicity is key in this task and listening is imperative.
These questions also help build a line of communication between yourself and the client. This is also important to a well developed and thought out project because after all, teamwork makes the dream work. Keep an open mind and ear and watch your designs come out amazing and effective.
What questions do you ask at the start of a project? What’s the strangest answer you’ve received? Let us know in the comments.
Featured image/thumbnail, raised hands image via Tim Young.
| WP Plugins: Countdown and Photobooth – only $14! |  |
|
|
Browser builder Opera smartly simplifies the Web on the iPad with touchable tiles.
While computers have changed drastically over the past 20 years, morphing from big boxes to svelte laptops, touch-screen tablets, and smartphones, the Web browsers we use on them have looked largely the same.
]]>