RWD Summit: RWD & SVG

By Christopher Schmitt

In his RWD & SVG talk at RWD Summit in March 2016, Dudley Storey shares his thoughts on working with Scalable Vector Graphics for Responsive Web Design, especially on logos and icons. Here are my notes from his talk:

There are five rules when designing icons and logos in SVG:

  1. Design & build SVG icons&logos at the aprox target px for the screens (~50x50px for icons, as needed for logos)
  2. Set up your illustration tool to help solve issues before they happen: 
    • Strokes in the middle of paths
    • Exporting styles as CSS
    • Use Boolean paths rather than superimposed layers
    • SVG filters and not illustrator’s one (if illustrator)
  3. Draw icons 1px in from the edge of the viewBox to allow for browser’s tendency to fractionally bloat SVG with antialiasing, which can be cut off if you draw too close to the edges 
    • Optimize the SVG to remove redundant code
    • SVGOMG
    • Adobe Illustrator 2015.2
    • Sketch Beta 3
  4. Since SVG is a replaced HTML element, linked CSS that does not load will leave an SVG element rendered at 300x150px by default. Icons should have fallback width and height attributes:
  5. Deal with IE 
    • It sets height for the SVG applied as a 150px height and 100% width creating distortion. You can use img {width: 100%;} or safer with img[src$=“.svg”] { width: 100%}
    • Inline SVGs require a container element and a “padding hack”

LiveBlogging: Lynda.com’s Up and Running with Snapchat

By Christopher Schmitt
Snapchat

Of the social media networks, I like to think I understand Twitter the most.

The Facebook replaces the need to go our family and friends’ places and see their family vacation photographs in person. Or worst yet, slideshows of ads.

Snapchat, however, I don’t get it. For a service that delivers 7 billion videos a day1 , I figured it’s time to dive in. 

So, I’m looking to get up and running with Snapchat. 

Thankfully, there’s a Lynda.com course called Up and Running with Snapchat by Anson Alex .

Also, it’s Saturday night and this is how I roll now. Apparently.

Sunday; April 3, 2016

12:06 AM

Opening up the web site and logging into Lynda.com.

12:11 AM 

First, up the welcome message. Snapchat is a “unique social media sharing program.” Snapchat is on Android and iOS respective app stores.

12:14 AM 

Snapchat sends video and messages to friends OR family. Oh, friends AND family, too.

Snaps can only be sent once by the recipient—except for some “conditions”. Seems ominous. 

Maximum video length is 10 seconds long. So, videos need to be memorable. 

12:16 AM 

Going through the Snapchat account registration process. I already set one up years ago, it looks like. Also, it appears I’ve gained a few friends and a family members since I last opened up the app.

So, reviewing the Snapchat does on-boarding process. As a designer, it’s interesting to see the UX instead of living it.

12:19 AM

Once you are done with the onboard processing, you get the main camera screen–a major area in Snapchat:

  • The big circle is for taking a photo or video: Press-click to take a photo and press-and-hold to record a video.
  • Upper right corner allows for switching of back and front cameras.
  • Bottom-left of the screen is the the bumber of
  • Swipe left-to-right to access inbox.

12:25 AM

You can add friends AT ANY TIME! Crazy, I know.

Also, the course is reminded me that Snapchat is a medium to share videos and pictures. So, I better get some friends:

My account is “teleject” on Snapchat.

12:31 AM

First time recording the video, Snapchat asks to access the microphone. 

You can record a video for up to 10 seconds. You might rembeber that factiod from 10 minutes ago.

When you are ready to send your snap, you can specify which Snapchat to send to. You can send it to one or multiple people. 

You can even at the Snapcat to “My Story” and my “friends” can view the Snapchat as many times as they like within a 24 hour window. 

It’s the exception to the “view once” Snapchat rule.

Also, I’m more than halfway done with this course!

12:42 AM

Somewhat hung up on the content disappearing. Is content creation really this disposable? Tweets and Facebook postings don’t disappear. 

You can type captions on your Snapchat by pressing the Type icon in the top right of the Camera screen.

Once you press done on the keyboard, captions can be moved anywhere. Press and hold on the captions while moving them to your new desired location for the caption.

For filters, slide on the Snap from right to left. Filters will slide over the image. There are several to pick from–some are basic photographic filters to dynamic text (like picking our location, your speed, etc.). If you don’t get these cool filters, you might need to enabled location services for the Snapchat app in your phone’s setting.

You can do free form drawing by clicking on the pencil icon. Pick the color you want and then draw with your finger over the Snap. 

Of course, you can add emojis. We are not savages. Click on the sticker icon in the upper right corner. Scroll through the list of emojis. Using your fingers on the touch screen, you can position, place, enlarge, or shrink the image over the Snap. And you can add more than one emoji on a Snap photo. So, go nuts.

12:55 AM

You can also adjust the amount of time a friend can view a photo. This can be up to 10 seconds. Adjust this feature in the lower lefthand corner of the Camera screen. 

If you love your Snap photo, you can save it to your photos app by clicking on the down arrow icon in the lower left hand screen. 

Well, that helps me feel better from creating disposable media!

To automatically saved a Snap photo to your “My Stories” section–which can be seen by all your friends, I believe–select the plus sign icon. This saves a step or two and allows for quick sharing–and allows friends to see the Snap for up to 24 hours. 

Of course, you can always be in greater control of your Snaps and send them directly to friends by clicking the right arrow in the lower righthand corner of the Camera screen. This brings up your friends directory. Check off the friends that you want to receive the Snap photo.

1:06 AM

Again, if you get a Snapchat, the icon in the Camera screen will show a number in the lower righthand corner. 

To view a Snap from a friend, it will appear as a solid colored icon next to their name in the Snapchat inbox. 

Where as Snapchats that you have sent to a friend will have an arrow next to their name.

Better know a Snapchat icon by reading the icon directory in Snapchat help. Please someone tell me there’s a Memory game made out of this?

1:08 AM

When viewing a Snap that someone has sent you, hold and press the screen the entire time for the Snap. 

You can also chat directly to a friend via Snapchat because text message software needs to be reprogrammed otherwise it’s not a social media app.

In the settings, you can make updates to how to be notified that when new Snaps arrive. You can also set other settings about privacy, setting up your Best Friends, gloss over their Terms of Service.

1:19 AM

Reviewing now who can see Snaps. Sent directly to friends, only friends. Send to “My Story”, all friends in your directory.

Do Snaps really disappear “for good”? It depends. They appear to disappear–If it’s on the internet, it’s probably out there. 

If you want to delete your Snapchat, you need to go to the Snapchat web site. Once there, log into the site under the account you wish to delete and follow the Support/Help documents for instructions on deleting the account.

That’s it! We’re Snapchat pros!

1:20 AM

That was pretty basic, but it definitely does what is said on the package to get us up and running. 

  1. According to Business Insider ↩

Non Breaking Space Show № 72: Arianne Stiles — Submitting Talks to Conferences

By Christopher Schmitt
Arianne Stiles

Today’s Non Breaking Space Show guest is Arianne Stiles. From Austin, Texas, we talk with Arianne Stiles, ½ of Environments for Humans. Environments for Humans produces over a dozen of virtual front-end and UX design conferences every year as well as the first web builder conference for CSS, CSS Dev Conf, which is coming up this October in San Antonio, Texas.

Topics discussed with Arianne Stiles:

  • 2:45 What’s the difference between online speaking and conference speaking?
  • 10:37 How has double-blind voting helped with talk suggestions at Environments for Humans conferences?
  • 18:00 Overcoming imposter syndrome and talking about your experiences.
  • 23:30 One key thing to have on your website to help a conference organizer.
  • 30:00 A disagreement about “it depends”
  • 37:00 How to describe your talk when submitting for a conference.
  • 44:20 What has been Ari’s favorite presentation?

Non Breaking Space Show is still free of charge for those using Windows XP along with show notes and resources: Non Breaking Space Show № 72: Arianne Stiles — Submitting Talks to Conferences

Rachel’s Tips ‘n’ Tricks on Flexbox and CSS Grid

By Christopher Schmitt
Rachel Andrew headshot

Rachel Andrews. One of 17 reasons to attend Responsive Web Design 2016. Save 20% at registration using discount code RWDCHRISTOPHER and hear Rachel’s deep dive into CSS layout tools flexbox and grids.

Rachel Andrew is web builder and lives in Bristol, England. She is one half of web development company edgeofmyseat.com, the company behind Perch CMS. Rachel has been working on the web since 1996 and writing about the web for almost as long. Her books include the bestselling CSS Anthology from Sitepoint and recent ventures into self-publishing have seen her write The Profitable Side Project Handbook, and CSS3 Layout Modules, 2nd edition. She is a regular columnist for A List Apart as well as other publications online and print. When not writing, Rachel often acts as a technical editor for other authors.

Non Breaking Space Show № 71: Simon St. Laurent — SXSW Interactive, Fluent Conf

By Christopher Schmitt
President speaking at SXSW

Today’s Non Breaking Space Show guest is Simon St. Laurent. While I endure the SXSW Interactive invasion of Ausin, Texas, Simon returns from this year’s Fluent Conf. 

We both talk about tech trends they saw from our respective points of view.

Topics discussed with Simon St. Laurent:

  • 5:00 Main topic of conversation at Fluent Conf this year?
  • 11:00 What happened from Angular 1 to Angular 2?
  • 13:56 Design stuff at Fluent Conf
  • 17:40 Are we shifting from native apps to web apps?
  • 18:40 Christopher proposes removes subscription service day
  • 21:11 Classic mobile tools with service worker for web apps
  • 26:00 No wearables, big VR presence at SXSW
  • 30:00 President Obama delivers keynote at SXSW
  • 31:40 President’s remarks on strong encryption vs government backdoors
  • 37:42 Bringing WIFI to rural, low-income areas
  • 43:50 SVG at Fluent Conference

Non Breaking Space Show is still free of charge to those without SXSW badges along with show notes and resources: Non Breaking Space Show № 71: Simon St. Laurent — SXSW Interactive, Fluent Conf

SXSW McDonald’s WIFI Landing Page

By Christopher Schmitt

I was asked to build out the WIFI landing page for McDonald’s SXSW experience. The catch was I had less than an afternoon before SXSW started to pull it all together. 

When it’s a rush job, the workflow means sticking with what I know–yet I did want to try a few new things.

These are some of the few steps and thoughts I had while producing the landing page:

Paper printout

Since the design was pre-made in Photoshop, I printed out the design and made production notes before I started working. While we prototype in the browsers these days, I always enjoyed printing a PSD web page design and marking it up before I start coding. 

Photoshop

While the design is based with linear artwork that would make it the right candidate for for SVGs, I only had a Photoshop file to worth with.

I know my around Photoshop and know it very well, Adobe keeps on adding new capabilities. I made use of the new “Quick Export as PNG” function to export assets from their respective layers. It’s a new feature in the Adobe Photoshop CC 2015.1 release.

Photoshop Quick Export

Page Weight Budget

Oh, and this all had to be under 1MB. The visual design played to the strengths in the way GIFs and PNGs optimize, so I was able to bring the image file sizes way down. This was done first by restricting the number of colors before exporting them Photoshop.

Reducing colors in Photoshop

Making sure to strip metadata information the image, I then used ImageOptim to squeeze the image files even more. I found that Quick Export feature in Photoshop does not optimize the image files, if at all. 

Expressive CSS

On the Non Breaking Space Show, Allison Wagner made mention of Expressive CSS framework. While the conversation wasn’t about yet another CSS framework, but rather the intent or concept of how it worked differently from other frameworks. 

After working on a previous project when the framework seemed counter-intuitive to my needs, this project was all the excuse I needed to try out a small, nimble framework. 

Expressive CSS Utilities

I appreciate the modular nature of frameworks, however I wish “some assembly required” note was labelled on the download page. It took me a few minutes for me to realize I didn’t have the utilities installed with the original download. Those minutes were precious on a tight deadline.

JavaScript Knowledge

While I was asked to do this project because I know “CSS,” it became clear that HTML, CSS, and JavaScript were required. The JavaScript required was not anything that serious, but I had to switch my brain from CSS-mode to JavaScript-mode.

Conclusion

While it was a rush project, I loved doing it. Offsite brand experiences are a staple of the SXSW experience. As both a web builder and event organizer myself, it was fun to contribute in a small way to a major brand’s experience at one of our industry’s bigger events. 

Favicon Images for My Web Site

By Christopher Schmitt

Working on a new site means I need to include a favicon. The magical favicon is a design treatment that is made up of a small image or icon that can represent a website or web page. 

Favicons in Browser Tabs

Where Favicons are Found

Favicons are commonly displayed in the browser’s address bar next to the web URL, but can be found in other other areas:

  • Address bar
  • Links bar
  • Bookmarks/Favorites
  • Tabs
  • “Dragged to Desktop”

Since they are found in and around the browser as well as sometimes on a desktop when a bookmark is dragged to a PC’s desktop, having a favicon is an important site asset. 

Image Formats for Favicon

Internet Explorer 5 first started using favicons and only through the ICO image file format. 

Other browsers have since widely adopted the favicon and support more file formats. Most browsers support GIF, JPEG, and PNG. 

PNG favicons

Icon used by browsers to identify a webpage or site. While all browsers support the ‘.ico‘ format, the PNG format can be preferable.

Supported from the following versions:

Desktop

  • 4
  • 2
  • 11
  • 9
  • 3.1

Mobile / Tablet

  • No
  • 2.1
  • No
  • 55
  • 51

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

SVG images are also supported–but only in Firefox and Safari at the time of this writing.

SVG favicons

Icon used by browsers to identify a webpage or site. While all browsers support the ‘.ico‘ format, the SVG format can be preferable to more easily support higher resolutions or larger icons.

Supported from the following versions:

Desktop

  • 57
  • 4
  • No
  • No
  • 9

Mobile / Tablet

  • 9.0
  • No
  • No
  • No
  • No

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

The ICO format is the original responsive image format as it can contain multiple images at different sizes like an image storage locker. 

For example, a browser will use the 16×16 pixel ICO image. However, if a browser is on a computer with a retina screen, it might pick out the 32×32 pixel image instead leaving the smaller image behind.

Since all browsers support ICO file format, going with this “responsive” ICO image format makes the most sense to me. 

Creating a Favicon

For Macs, there is a great application called Icon Slate that makes creating an ICO file easy.1

Using my logo as the image source, I exported different sizes and placed them in their respective slots:

Using IconSlate for Favicon

Once the images are lined up in their respective sections, I start the build process by selecting File > Build which produces a hot ‘n’ fresh ICO file.

Inserting a Favicon into a Web Site

Making sure to rename the file to favicon.ico, place the ICO file in the root or main directory of your site:

Favicon File in FTP Browser

By placing the file in the root directory and giving the file this specific name, the browser picks up the favicon file automatically. No fuss, no muss. 

This way updating the favicon then becomes easy: in the future, create a new image, rename it favicon.ico, and replace the file on the server. 

What If I Don’t Have Access to My Root Directory?

If there is a reason I could not drop the ICO file in the root directory, I could then tell the browser that a favicon would be found elsewhere through a bit of HTML in the document header: 


<link rel="shortcut icon" href="http://example.com/folder1/folder2/myicon.ico" />

This link approach is practical if you cannot access the root of a web site for one reason or another and still want to deliver favicon. 

Conclusion

Favicon File on Display in Browser

Adding a bit of flair of your personal brand is pretty straightforward. Give it a shot, if you haven’t already!

UPDATED: To include Can I Use charts for PNG and SVG support.

  1. Use can use the versatile Icon Slate creating icons for pretty much any situation you might need an icon: Apple Watch, folder icons, Android, and much more learn the facts here now. ↩

[Literary Press Group of Canada] Responsive Retrofitting

By Christopher Schmitt
Slide from Responsively Retrofitting talk

On March 10th, I had the pleasure of speaking about responsive web design to members of the Literary Press Group of Canada, a professional membership of independent publishers.

Covering tips and tricks for WordPress, web performance, navigation, HTML tables, and more, the main framework was about retrofit an existing, fixed-width web site. 

For some organizations and companies, starting over does not make financially sense. Whereas responsively retrofitting is both a time and cost effective solution to get sites looking better on mobile devices until a time when starting fresh is possible.

Slides are also available on Slideshare.

Non Breaking Space Show № 70: Zell Liew — Responsive Typography

By Christopher Schmitt
Zell Leiw

Today’s Non Breaking Space Show guest is Zell Liew. Zell is a writer, freelance web designer & developer based in Singapore. His down-to-earth articles — especially those recently published on the topic of responsive typography — make it easier to understand for both designers and developers.

Topics discussed with Zell Liew:

  • 3:20 What got Zell into the web?
  • 9:30 What’s the difference between EM and REM type sizes?
  • 16:00 Vertical rhythms for typography
  • <a href=“http://goodstuff oxycontin pills.fm/nbsp/70#t=20:20″>20:20 What are people’s main struggles with vertical rhythms?
  • 29:10 Are you a Javascript or a CSS person?
  • 37:50 What else are you passionate about these days?
  • 40:20 Tips for creating responsive images

Non Breaking Space Show is still free of charge to crossing guards along with show notes and resources: Episode № 70: Zell Liew — Responsive Typography