    
|
|
|
Dean John Jeffries retired at the end of June after forty years of service to UMBC. In recognition of his profound impact on UMBC, we are delighted to announce the establishment of the John Jeffries International Fellowship.
The Fellowship fund honors John’s commitment to building a strong and distinctive undergraduate curriculum and to educating students to become informed and engaged global citizens. The Fellowship will provide faculty with resources to create, or redesign, and teach a course in their fields in order to add or enhance an explicit international or transnational focus. Our expectation is that the resulting courses will be taught regularly and will broaden the intellectual scope of the curriculum in the College of Arts, Humanities, and Social Sciences.
In a matter of weeks, current and former Department Chairs, Program Directors, and Associate Deans in the College of Arts, Humanities, and Social Sciences have contributed more than $25,000 to endow the John Jeffries Fellowship. Since then, others have contributed towards the goal of $200,000, which will enable the campus to support two Jeffries Fellows each year.
If you are interested in making a gift to the John Jeffries International Fellowship Program or have any questions, please contact Marjoleine Kars, Jason Loviglio, or Carole McCann.
I can remember a time when pretty much everyone designed websites for an 800×600 screen resolution, but (thankfully) those days are long gone. Smart watches and 4k displays are pushing resolutions at both ends of the spectrum, and even more devices fill the gaps between, such as desktops, tablets, phones, and gaming consoles. In parallel, the density of pixels is increasing, too.
Designing for a single screen resolution is dead. Photo courtesy Flickr user endlisnis.
How can a web designer create sites that work on the devices of today and tomorrow? In this post, I propose a workflow called Scalable Web Design that attempts to address pixel density in a sustainable fashion.
Fortunately, Responsive Web Design (RWD) came at just the right time and has since become the de facto solution for building modern websites. If you’re not familiar with it yet, the Beginner’s Guide to Responsive Web Design will help you get caught up. The genius of RWD is that it works on current devices as well as devices that haven’t been dreamt up yet. No matter what kind of shiny new glowing rectangles are released in the next few years, chances are pretty good that a responsive website will require little to no changes.
RWD solves the problem of device sizes, but some devices have a 1x pixel ratio, some are at 2x, still others are at 1.5x, and who knows what else. Check out this handy table at screensiz.es to see what I mean.
Screensiz.es provides tables of information about popular hardware devices.
Once again, web designers are faced with a new rabbit hole of questions with fuzzy answers. Do you create 1x and 2x versions of all your images? Do you only use 2x for everything? What if 3x becomes popular?
The problem of pixel densities is similar in spirit to the problem of screen sizes that RWD solves, so I’ve come up with a workflow that I’ve been calling “Scalable Web Design.” I’m sure some people will hate this term because scalable already can refer to building sites that are capable of handling lots of traffic, but you could say similar things about the term responsive. As long as it’s used in the context of design, I think it adequately encapsulates the idea of creating designs that scale with pixel density. If you agree or disagree, I’d love to hear your thoughts in the comments.
So then, what are the steps for building a scalable design? Let’s break it down.
Rather than scramble to accommodate every new pixel density, it’s better to retool our thinking from the start. As mobile devices surge beyond the popularity of desktops, this shift in thinking has already started with the “mobile first” approach (and rightly so). Now, I think it’s time we start thinking “vector first” as well. Check out this 19kb SVG example on CodePen and notice how crisp it looks, even when it fills the page.
See the Pen AFjaw by Nick Pettit (@nickpettit) on CodePen
If you’re addicted to using Photoshop for everything, it’s time to start learning a vector based drawing program like Illustrator. Vector graphics like SVGs and icon fonts have considerable benefits over bitmap formats:
Designing with vectors in mind from the start should prompt healthy thinking about aesthetic and technological choices. For example, if you only need to use 1 or 2 photographs and it’s going to mean including more code to serve multiple source images, it might make you reconsider whether or not that photograph is really necessary. I wouldn’t expect every web designer to create sites with 100% vector imagery, but it’s certainly worth using vectors where possible. The good news is, vectors work beautifully with the recent “flat design” aesthetic, as most vectors trend towards solid colors, sharp lines, and simple shapes.
When it comes to vectors, you basically have the option of using icon fonts or SVGs. Icon fonts are great because there are lots of premade options and they boast smaller filesizes than SVGs. However, as Filament Group smartly pointed out, browser support for icon fonts isn’t that great. SVGs on the other hand are pretty well supported and they allow for full color graphics and gradients (font icons are monochromatic). Filament Group even created an awesome bitmap based fallback solution called Grumpicon. The workflow is simple:
For more detailed information about SVG browser support, here’s the handy caniuse.com SVG support table.
After you’ve created a vector layout, you should next look for areas where SVGs can be replaced with simple CSS. Designing with vectors has a tendency to lead towards flat color and simple shapes. Using CSS pseudo elements, it’s possible to create lots of shapes without adding any markup. To see lots of examples of shapes created with a single HTML element, check out The Shapes of CSS on CSS-Tricks.
If you’ve never investigated CSS shapes before, you might be surprised by what’s possible.
Replacing SVGs with CSS will help reduce the number of assets you need to load, which makes for more performant pages. This step will pick up even more steam in the next few years when the CSS shapes module gains broad browser support.
Vectors don’t work for extremely detailed images like photographs or screenshots, so you will still need to use bitmapped graphics there (the picture element is looking like a promising solution in this case). However, limitations can be a great source of creativity.
For example, Treehouse teacher Mat Helme created a website for a fictional conference called Stop Visual Pollution and the site uses SVGs for all the images. It’s not perfectly responsive (as it’s only intended for demonstration purposes), but it’s a wonderful example of what vector based thinking can lead towards. He could have used photos for the speakers, but the illustrations are much more captivating. This graphically rich site is just 386kb total and it looks incredibly sharp on my 15″ retina display. To do this without vectors, you would need to use massive PNG images, which isn’t practical.
This screenshot of the fictional Stop Visual Pollution website shows how Mat used illustrations for each speaker instead of a photograph.
If you do need to use bitmaps, start out with the largest source material available. It might not ever get used in production, but it’s good to keep it handy in case you need it someday.
As a general rule of thumb, it’s usually safe to provide a single 2x bitmap and call it a day. Modern browsers do a great job of scaling these down to 1x if necessary and the difference in filesize between 1x and 2x images is usually pretty small. That’s because you can apply a much greater amount of image compression to 2x images and they’ll still look good, because the compression artifacts have a tendency to wash out when the images are rescaled.
For responsive designs, you may need to use multiple image sources that get served up based on the size of the screen. The picture element which I mentioned earlier looks like a promising for the future, but presently, there are numerous solutions that do this. Here are a few to get you started:
Many image source swapping solutions will also allow you to include imagery intended for higher pixel densities. If you do find that a higher number of your website visitors are using 3x devices and beyond, you’ll probably want to consider serving up 3x assets specifically for them (and not to other visitors as to not waste bandwidth). If you need help doing your density calculations, check out the Teehan+Lax Density Converter.
I think the advent of vectors came a bit faster than web professionals expected. For years SVGs were a dream from tomorrow, but Internet Explorer was the last holdout, and that threshold was crossed several versions ago now.
Indeed, uncertainty is a part of web design, so we should embrace it. It’s impossible to predict every twist that technology will take next and create future proof designs, but vectors are a pretty good preventative measure.
The post Scalable Web Design appeared first on Treehouse Blog.
]]>When: Friday, Nov. 22, 6:30 PM to 8:30 PM
Where: Google Campus, London
Untangle the Web is back at the Google Campus in London this month with three fantastic talks and a new bigger ground floor space!
If you’re new to our Meetups, we host monthly events where we invite industry professionals from the world of the web to share their experiences and offer guidance to those new to the arena. With a philosophy of simplicity and conciseness, all talks are refreshingly “data-light” and cover a wide variety of topics.
This month focuses on how to engage users and cultivate relationships with client. James Offer will be talking about content strategy, and Ruth Smith and Treehouse student Graham Davidson will be discussing working with clients.
As always there will be pizza, beer and soft drinks available at the end of the evening for everyone, so feel free to stick around and hang out after the talks. We’ll also have another Treehouse giveaway, so be sure to come and enter for a chance to win some fun Treehouse swag!
RSVP to reserve your spot today and please help us spread the word as we’ll have an even bigger space than usual, so the more the merrier. 
We look forward to seeing you on the 22nd!
The post Join Us for the November Untangle the Web + Treehouse Meetup in London appeared first on Treehouse Blog.
]]>On campus access requires no additional login. Off campus users must sign in first using the VPN (requires UMBC username and password).
The trial runs through December 10, 2013. Feedback on the usefulness of this database is appreciated. Leave us a comment to let us know what you think.
Come out and enjoy hearing some of UMBC's brightest entrepreneurs pitch their innovative ideas to a panel of seasoned entrepreneurs as well as a crowd of their fellow students.
There were over 40 ideas submitted, the 10 best have been chosen to compete for prizes up to $750 in cash.
YOUR VOTE COUNTS, come show your support.
Finalist(s) & Idea Topic
