Media Queries are a powerful feature of CSS 3 because they allow a single page to be readable on a variety of devices (pc, tablet, phone), all through targeted css stylesheets. By using simple rules, media queries will swap css stylessheets dynamically based on attributes like screen size and orientation. A great series of articles written by David Powers over at Adobe discuss how to effectively use media queries. If you want a deep dive, read over the W3C specification for CSS 3 media queries.
Take an example: you want to target a screen size of 640 pixels or smaller. Pay particular attention to the media attribute and the simple rule it contains:
I wanted to replace the left hand menu header images with CSS-based fonts (web fonts =
eot, WOFF, ttf and svg) to implement media queries and to follow best practices. In addition, now we can use fonts which aren’t natively on a user’s device, allowing for a more unique feel to the site. To learn about all the new web font standards, head over here and read up on it.
A great resource to find free web fonts is fontsquirrel. They also have a nifty generator to help you get started.
Follow these steps to start taking advantage of the new web fonts standard…
The first version of this blog design, done in 2009, was really just a way for me to get familiar with CSS and jQuery (to make cars go up and down the side of the page). As time has gone on, I’ve become more and more interested in HTML 5 / CSS 3 and the huge usability benefits it has brought. Now that I’ve decided to rework the site to take advantage of HTML 5 / CSS 3, peeking at my page structure and stylesheets made me cringe. Organization was messy, not semantic at all and ridden with unused styles. It’s okay…I was younger then and in a period of experimentation.
A very important part of using the new features of HTML 5 is to have a well organized, semantically correct page. You see that menu on the left?…completely reorganized the structure, incorporating the <nav> tag, and then used media queries to change the styles.
Simple code sample showing how to retrieve profiles and their properties from a SharePoint site.
Note:
This code is relevant only if you’re running it on the SharePoint box, ie: web part, console app. If you need to access profiles outside of the box, use web services, as detailed by Michael Bowersox’s post.
Microsoft.Office.Server.UserProfiles reference.
Instantiate the UserProfileManager with your site context.
PropertyConstants for retrieval of pre-defined properties. Every profile has a handful of standard properties, but check to make sure the property contains data to avoid a possible null reference exception.
Replace PropertyConstants with custom property name to get your custom properties.
