All of the Above: Design, Code, and Learning

[https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1439047498422-V9F6ILAJKNXG2R5NXTHH/image-asset.png?format=1000w] Episode 34: None of the Above | The Hiatus Episode IN THIS EPISODE: This isn't a goodbye, this is a "see you later" as we blastoff into the sunset, sailing through the atmosphere with reckless abandon. SUBSCRIBE WITH iTunes [https://itunes.apple.com/us/podcast/id954052502?mt=2] • Overcast [https://overcast.fm/itunes954052502/all-of-the-above-design-code-and-learning] • TuneIn [http://tunein.com/radio/All-of-the-Above-Tech-UX-Design-and-Education-p674057/] • Pocket Casts [http://pca.st/dRHJ] • RSS [http://www.alloftheabove.audio/episodes?format=rss] ---------------------------------------- [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1439047697924-T71HWDFF39OC58MCB07D/image-asset.png?format=1000w] https://dribbble.com/shots/2109505-Sunset Sunset by Nick Slater EPISODE ARTWORK INSPIRATION Nick Slater [https://dribbble.com/slaterdesign] is an amazing illustrator that you should definitely follow. He is prolific, has an identifiable aesthetic, and is always delivering high quality work. I remembered seeing this illustration [https://dribbble.com/shots/2109505-Sunset] a month ago, and it instantly popped in my head when trying to come up with something as we "sunset" our podcast [http://5by5.tv/bionic/95]. Also, Professor Blastoff [http://earwolf.com/episode/goodbye]. ---------------------------------------- SHOW NOTES & LINKS SEAN PATRICK JOHN PAUL GEORGE RINGO DORAN * Sketch 3 Workshop [https://youtu.be/Wt5-2MXXm_k?t=10m18s] * Sean's UX Newsletter [http://eepurl.com/buUnJn] * Sean's Blog [http://spjpgrd.com/blog] * @spjpgrd [https://www.twitter.com/spjpgrd] SAM JEBEDIAH BANTNER * Sam's Travel Blog: Bearded Traveler [http://beardedtraveler.com] * Sam's Solo Episode [http://alloftheabove.audio/episodes/30] * @SamBantner [https://www.twitter.com/SamBanter] BRYAN M BRUSH * Minus 'Rithmetic [http://minusrithmetic.com] * @BryanMBrush [https://www.twitter.com/BryanMBrush] ---------------------------------------- [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1439048311112-QFMD3VNU4DRXA47OYGHZ/image-asset.png?format=1000w] THE FINAL FEEDBACK How did you enjoy this episode? It was short, and sweet, and we might not make any more — but rating it on iTunes is forever.  Review on iTunes [http://alloftheabove.audio/review]

[https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437433208149-NQ7N5358EDPSEHU3MXQ6/image-asset.png?format=1000w] Episode 33: Vector v. Raster, with Sean Doran IN THIS EPISODE: Ever hear the words "vector" and "raster," when talking about graphics, but wondered what that actually meant? In this quick episode, Sean goes over the technical differences between the two, when each image type should be used, and how to optimize them. SUBSCRIBE WITH iTunes [https://itunes.apple.com/us/podcast/id954052502?mt=2] • Overcast [https://overcast.fm/itunes954052502/all-of-the-above-design-code-and-learning] • TuneIn [http://tunein.com/radio/All-of-the-Above-Tech-UX-Design-and-Education-p674057/] • Pocket Casts [http://pca.st/dRHJ] • RSS [http://www.alloftheabove.audio/episodes?format=rss] ---------------------------------------- SHOW NOTES & LINKS APPS & TOOLS MENTIONED [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437446552148-U8TVCUYNVTSNL7O8X5NS/image-asset.png?format=1000w] https://itunes.apple.com/us/app/sketch-3/id852320343?mt=12&at=10lwgb&ct=aota33 Sketch 3 by Bohemian Coding [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437447387978-VL7IB8J9X5NR0T9PJ3C5/image-asset.png?format=1000w] http://www.adobe.com/products/illustrator.html Adobe Illustrator CC [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437447432319-SWH8MVJG7ZUZ13V7AESF/inkscape-app-icon.png?format=1000w] https://inkscape.org Inkscape [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437447502473-ZZTS5I40JICAW32QUIJ5/image-asset.png?format=1000w] https://itunes.apple.com/us/app/affinity-designer/id824171161?mt=12&at=10lwgb&ct=aota33 Affinity Designer [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437447546411-GM4NX90W398SWMEHHI0L/image-asset.png?format=1000w] https://itunes.apple.com/us/app/pixelmator/id407963104?at=10lwgb&ct=aota33 Pixelmator [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437447562679-ZRNUHET9GDNLJXY0VWZ8/image-asset.png?format=1000w] http://www.adobe.com/products/photoshop.html Adobe Photoshop CC [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437447608770-AX0WXEAHVUVJKB1JUR4M/image-asset.png?format=1000w] http://gulpjs.com Gulp.js [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437447642931-870R1OCHBV0R1YD1GPOA/image-asset.png?format=1000w] http://gruntjs.com Grunt.js [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437447676392-7DRFBVD7WIS71ZKHS6OH/image-asset.png?format=1000w] https://imageoptim.com ImageOptim [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437447761726-XFHSSRM1PWKVWIJDS7ZB/alfred-2-app-icon.png?format=1000w] https://itunes.apple.com/us/app/alfred/id405843582?mt=12&at=10lwgb&ct=aota33 Alfred ---------------------------------------- INTRO Since I recently taught a 2 hour workshop on Sketch 3 [https://www.youtube.com/watch?v=Wt5-2MXXm_k], I wrote a couple of emails to the attendees the week leading up to the class in preparation for what they’d be learning. In the workshop I was showing them how to use Sketch 3 [https://itunes.apple.com/us/app/sketch-3/id852320343?mt=12&at=10lwgb&ct=aota33] as a tool, and how to take advantage of what it has to offer, while also highlighting what areas Sketch isn’t good at. I didn’t have time to give an introduction to design basics, so that’s what these emails were for. Sketch 3: A-Z was a one-week workshop that gave attendees the principles for designing modern day websites, and how they could get up and running with Sketch 3 as a new design tool to see their ideas come to life. Before I begin, a big thank you to Kevin Mack [https://twitter.com/nicetransition] and Columbus Web Group [http://www.meetup.com/Columbus-Web-Group/] for putting on these Weekend Workshops [http://www.meetup.com/Columbus-Web-Group/messages/boards/thread/48980884]. They are free, open to the public, and are meant to offer accessible education that isn’t your traditional schooling route. The monthly free meetups make for great networking events, educational opportunities, and an all around fun time. I can’t recommend them enough. [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437440215358-3QZEDD5H22OCKLBGCMJ8/image-asset.png?format=1000w] Scooby Doo after a couple of Scooby snacks With programs such as Sketch 3 [https://itunes.apple.com/us/app/sketch-3/id852320343?mt=12&at=10lwgb&ct=aota33], Adobe Illustrator [http://www.adobe.com/products/illustrator.html], Affinity Designer [https://itunes.apple.com/us/app/affinity-designer/id824171161?mt=12&at=10lwgb&ct=aota33], InkScape [https://inkscape.org/en/], we have what are called vector-based applications. So what I mean by vector-based is that it is based on points: tiny dots that have an X and Y coordinate. If you think back to grade school, you probably had graph paper and were told to put dots at certain (X,Y) coordinates. After all the dots were on the paper, you would connect the dots with a line in a certain order, and you’d end up with a drawing! Sketch 3, and any design program that can handle vectors, takes that same graph paper concept, and steps it up a notch. Here's a lovely SVG just for you [https://www.alloftheabove.audio/s/all-of-the-above-the-cloud-icon-spjpgrd.svg]. > Vector graphics uses geometrical objects, like points, lines, curves, and polygons to model the image. via Wikipedia [https://en.wikipedia.org/wiki/Vector_graphics] GEOMETRY, MAN Since vectors are all based around geometry, and aren’t concerned about pixels — only the distance between all the points — vectors are infinitely scalable! Ever have an image that was clearly a bit too small, and then you decided to scale it up so that it was bigger? It got distorted and looked nasty, didn’t it? [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437440371809-PFGLX66DANSH9PF6V2JL/image-asset.png?format=1000w] A dramatic illustration of a vector graphic (left) and a raster graphic (right) being scaled up. That’s because when you have a picture, or anything based on pixels, it’s called a raster graphic. You can make them smaller without concern, but once you enlarge them you get weird artifacts, noise, and muddiness as the computer tries to make up the difference. That being said, Sketch 3 can also do some basic raster graphic editing, and I mean basic. Other programs, such as Adobe Photoshop [http://www.adobe.com/products/photoshop.html] or Pixelmator [https://itunes.apple.com/us/app/pixelmator/id407963104?at=10lwgb&ct=aota33], should really be used if you’re wanting do image manipulation, photo retouching, and anything else that you can think of when you hear the word Photoshop being used as a verb. If you are using any images for the web, there are some rather useful tools out there to help optimize them so they aren’t quite so large. But before I list those, you’ll need to know the different file types, as each tool can optimize certain types of image files. An easy way to identify if a file is a vector graphic or raster graphic is by the file extension. There are too many to list, but good ole’ Wikipedia [https://en.wikipedia.org/wiki/Image_file_formats] has our back again. VECTORIZE ALL THE PIXELS! Vectors sound like the way to go, so why isn’t everything a vector? Infinite scalability sounds like a huge plus. Also, they are usually editable with any vector-based program, so what isn’t to like? Don’t get me wrong, they’re great for logos, iconography, and illustrations. It’s just that the more points you have in a document, the more complex calculations are being processed, and the more colors being utilized, the more work your computer has to do. [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1473224592292-56WHFWVMXMGBZ01TI8CC/image-asset.jpeg?format=1000w] This is a nice photo of you. Imagine a nice photograph of you. The photo makes way more sense to be a rasterized image, as there’s a finite amount of information that the camera took in and converted into the pixels that resemble your face. Now, going in and converting something as complex as a photograph into vector shapes is possible… but… To make that vectorized version have the same level of detail as the original photograph can be painstaking work to do by hand (also called rotoscoping when applied to video), and usually there is a limit. There are also programs that let you put a photo in, and out pops a vectorized version of that photo. It’s a cool effect, but it’s not exactly practical for everything [http://vector-conversions.com/graphics/vector/photographs.html]. NUTHIN' BUT AN SVG THANG So vector and raster graphics both have their place. And right now is truly an exciting time in web & app design for vector graphics. Here’s the link to a Columbus Web Group talk that Eric Katz gave on SVGs [http://slides.com/ericnkatz/nuthin-but-an-svg-thang#/]. It has tons of useful resources, tips, and demonstrations of how to leverage SVGs in front-end development. In the presentation, Eric (@ericnkatz [https://twitter.com/ericnkatz]) brings up some nice tools to optimize SVGs, such as SVGCleaner [https://github.com/RazrFalcon/SVGCleaner] and SVGO GUI [https://github.com/svg/svgo-gui]. You can also implement image optimization within the build process using build task managers like Gulp [http://gulpjs.com] and Grunt [http://gruntjs.com]. There are online image optimizers like: * Kraken.io [https://kraken.io/] is awesome because it can also do SVGs * TinyPNG [https://tinypng.com/] * ImageOptimizer [http://www.imageoptimizer.net/Pages/Home.aspx] For rasterized images, I personally use ImageOptim [https://imageoptim.com/]. Every image you see on the All of the Above website has been optimized through ImageOptim. I’ve even set up a global keyboard shortcut on my computer to send any amount of image files I have selected straight into ImageOptim.  HOW TO SET UP IMAGEOPTIM'S GLOBAL SHORTCUT ON A MAC (OS X) 1. DOWNLOAD IMAGEOPTIM [https://imageoptim.com/] 2. OPEN UP SYSTEM PREFERENCES [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437440845765-FJH5JJF135C0R6138DZ4/all-of-the-above-imageoptim-alfred.png?format=1000w] I'm using Alfred [http://www.alfredapp.com] as a Spotlight replacement 3. DO A SEARCH FOR “SERVICES” AND CLICK ON KEYBOARD SHORTCUTS. THIS WILL TAKE YOU EXACTLY WHERE YOU WANT TO BE [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437440884366-J5DTBYIQRP6GIML9TYY5/image-asset.png?format=1000w] System Preferences 4. ON THE RIGHT-HAND SIDE, FIND THE PICTURES CATEGORY 5. FIND IMAGEOPTIM AND ASSIGN A KEYBOARD SHORTCUT. I HAVE MINE SET AS ⌃⌥⌘. BUT YOU CAN MAKE YOURS WHATEVER YOU WANT. [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437440970900-3W2VAV91U6YGYWNHC063/image-asset.png?format=1000w] Shortcuts are your best friend 6. SELECT IMAGE(S) FROM THE FINDER AND THEN PERFORM YOUR SHORTCUT [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437440983823-4D0232051TVLKFFCPQ12/image-asset.png?format=1000w] This is very meta. These files are this episode's artwork. 7. PRESTO. YOU HAVE OPTIMIZED IMAGES. [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437441010869-KKHL8K2PBZ85BX1OR5C6/image-asset.png?format=1000w] I care about bandwidth. You should too. ---------------------------------------- [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437433593542-LCJL2HRFNC7RBKVWPDWQ/image-asset.png?format=1000w] http://alloftheabove.audio/review FEEDBACK How did you enjoy this episode? We hope you loved it, but we're curious to know what you thought. Review on iTunes [http://alloftheabove.audio/review]

[https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1436850154930-F6F5FFFA158N5PXZLD1C/image-asset.png?format=1000w] Episode 32: The Web Design Equation  IN THIS EPISODE: Feeling overwhelmed with your web design project? Too many things to keep track of? Today Sean shares the system he uses to manage projects — keeping him focused on solving problems instead of worrying about what he’s missing. SUBSCRIBE WITH iTunes [https://itunes.apple.com/us/podcast/id954052502?mt=2] • Overcast [https://overcast.fm/itunes954052502/all-of-the-above-design-code-and-learning] • TuneIn [http://tunein.com/radio/All-of-the-Above-Tech-UX-Design-and-Education-p674057/] • Pocket Casts [http://pca.st/dRHJ] • RSS [http://www.alloftheabove.audio/episodes?format=rss] ---------------------------------------- SHOW NOTES & LINKS APPS & TOOLS MENTIONED   [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437357978460-UO9XVXTEQWI0G543P1R3/image-asset.png?format=1000w] http://patternlab.io Pattern Lab [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437357599122-L1K4D99DVQZDR84GZ5GQ/sketch-3-app-gem-icon-spjpgrd-all-of-the-above-spjpgrd.png?format=1000w] https://itunes.apple.com/us/app/sketch-3/id852320343?mt=12&at=10lwgb&ct=aota32 Sketch 3 by Bohemian Coding [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437357906325-UJZMZW99A81JJX3EE9R2/sketch-toolbox-app-icon-all-of-the-above-spjpgrd.png?format=1000w] http://sketchtoolbox.com Sketch Toolbox [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1437357987512-RWQJ3TLZ5VNGUDHK9J10/image-asset.png?format=1000w] https://itunes.apple.com/us/app/sketch-mirror/id677296955?mt=8&at=10lwgb&ct=aota32 Sketch Mirror by Bohemian Coding ---------------------------------------- DESIGNING LIKE A MATHEMATICIAN Whether it’s designing a website, a mobile app, or something in between, there are five parts to the design equation: Constants, Variables, Constraints, Maximums, and Minimums. When confronted with a large project, it’s helpful to identify what bucket each element of the screen falls into. From there, it’s easier to iterate and refine towards a final solutions. So let’s explore these in a little more detail. But before we can explore those ideas in more detail, there’s one methodology that will help you out immensely: Atomic Design Unlike print design, designing digital products, e.g., websites, apps, lend themselves to so many variables that are outside of your control that it can get overwhelming. BUT FIRST, BIOLOGY AND ATOMIC DESIGN Atomic Design is a concept that Brad Frost first presented in 2013 [http://bradfrost.com/blog/post/atomic-web-design/], and has been refining ever since — even creating Pattern Lab [http://patternlab.io/], a tool to help implement this approach to front-end web development. It breaks down the web page into 5 different building blocks: 1. Atoms 2. Molecules 3. Organisms 4. Templates 5. Pages The idea behind Atomic Design is to create reusable patterns through combining atoms, molecules, and organisms to create templates. With these templates, they can be translated into specific pages. The deeper dive into what each group is, and how it’s defined can be found on Pattern Lab’s about page. [http://patternlab.io/about.html] For a basic overview: ATOMS These are the single solitary building blocks of a web page. These would be your headers (h1’s and h2’s) , buttons, and input fields. Just single entities that live by themselves. MOLECULES Take one atom, and combine it with another atom. There’s your molecule. It can have more than two atoms, but the goal is that the molecule performs one function, and it performs it well. Take a block quote with a citation at the end of it. That would be combining the block quote atom with the citation atom to create that molecule. ORGANISMS Organisms are combinations of molecules and/or atoms. The best example of an organism would be a header. You have navigation (atom), a logo (atom), a search box, input text, and a search button (all together a molecule). This fits right in with what an organism should be. TEMPLATE This would be a fully composed layout of what kinds of information should be displayed on the page, but not actually filled in with information. T PAGE Now, if you are to take a look at your Facebook Profile, you can see everything that I just mentioned, but filled out with content that makes it a real page. ---------------------------------------- [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1474256777709-9K7GLDBJ6H1ROD8AILX9/image-asset.jpeg?format=1000w] ONTO THE EQUATION Now that you know what atomic design is, and how it helps you to identify and design reusable patterns, let’s get into the nitty gritty. CONSTANTS When working in an agile environment, it sometimes feels as if the only constant is change itself. But within a project, there are things that become staples and will never change, or at least they hopefully won’t change for an extended period of time. Constants can be items such as: * Brand Logo * Company or Product Name * Color Palette * Typography * Existing Content These are more or less the essentials to a basic website Other than those basic fundamental parts of a web design, there are tons of other constants that are used within a website. With that being said, most constants will interact with variables. An example would be a button. Within that button there will be some string of text. That text is a variable. VARIABLES Let’s continue with that button idea. The character length of the text that will be inside this button is unknown, so you should create guidelines as to what constraints there will be when writing text for this particular button. Taking a step back, the biggest variable is the dimensions of the canvas that your end product will be consumed at. With a website, that can mean anything from a 100x100px tiny screen to a 80 inch touchscreen television. If that isn’t daunting, I don’t know what is. Luckily, there are some tried and true methodologies that have been created by some smart people to help manage the ever changing digital landscape. Such as Responsive Web Design [http://www.amazon.com/Responsive-Design-Brief-People-Websites/dp/098444257X?tag=seapatjohpaug-20] by Ethan Marcotte, Mobile First [http://www.amazon.com/Mobile-First-Luke-Wroblewski/dp/1937557022/ref=pd_sim_14_1?refRID=1F7DKR1DB6XT2BDK18V3&tag=seapatjohpaug-20&ie=UTF8] by Luke Wrobelski, and Atomic Design [http://atomicdesign.bradfrost.com/] by Brad Frost to name a few. With native mobile apps, it’s a bit easier for iOS designers since there are only a handful of screen sizes, resolutions, and devices to really account for. And with the advent of Auto Layout [https://developer.apple.com/videos/wwdc/2015/?id=218], it helps apply the same fundamental ideas of Responsive Web Design to native apps. With this flexibility, it helps to design native iOS applications for devices that don’t yet exist [https://developer.apple.com/videos/wwdc/2015/?id=801], and accommodate for Multitasking on an iPad [https://developer.apple.com/videos/wwdc/2015/?id=212]. Designing for Android, Google has created something truly special with Material Design [http://www.google.com/design/] in attempt to make it easier to account for the huge variety in Android devices. And with Windows 10 around the corner [http://blogs.windows.com/bloggingwindows/2015/04/29/windows-10-design-getting-the-balance-right/], there are going to be some changes towards designing a Universal Windows Platform app [https://dev.windows.com/en-us/design]. [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1474257092548-H2JSIAPQ5NI02XT2I8PZ/image-asset.jpeg?format=1000w] REAL DATA RULES If you’ve ever heard the quote “form follows function,” it’s not a lie. Well, at least not for things that are well designed. That’s why it’s so important to design with actual data as soon as you can. Not Lorem Ipsum. The content of a web site drives everything. Everything that is implemented should be to elevate the content, help people complete whatever actions and needs they’ve set out, as well as balance it with the goals of the business. These 18 Design Axioms that are put together by Involution Studios are a great set of principles to refer to, with this Axiom being my favorite [http://www.designaxioms.com/quotes.php?view=single#realData]. When you have real content, it means: * Less rework. The amount of time need to change what you’ve made is exponential relative to the number of changes and how complex the project you’re working on is. * Less headaches when translating a design from mockup to code. Sketch Data Populator [https://github.com/preciousforever/sketch-data-populator] is a plugin that compliments this idea of working with real information. With that, plus Mockaroo [https://www.mockaroo.com], you have yourself an inventory of data and a tool to leverage that data. Sketch 3: A-Z was a one-week workshop that gave attendees the principles for designing modern day websites, and how they could get up and running with Sketch 3 as a new design tool to see their ideas come to life. CONSTRAINTS These are the limitations within the project. Some examples could be: * Browser Compatibility * Operating System Support * Performance/Size/Speed * Bandwidth Concern Other than technology constraints, there are the design constraints for both minimum and maximum values. MAXIMUMS When dealing with presentation of information, there are certain thresholds in place to help avoid things becoming a sprawling mess. When presenting a list of news articles, that entire organism could be made up of an image, a headline, a descriptor, and some metadata such as the author, time posted, and number of comments. During this process, there should be a content strategy in place, because if a news article had an headline that was 300 characters long — it would break the design. Establishing a maximum character limit would avoid that outlier from happening. For headlines that were longer than 60 characters, there could then be two headlines: one that will be seen on the actual article page, and the other be the shorter version that is displayed elsewhere on the website. Using real data has been invaluable especially when it comes to user testing. If you’re working on an existing product, being able to test new designs with a real user with their real data yields an order of magnitude better insights and feedback. Something as simple as passing in a user ID, or having them authenticate their account and pulling a sampling of data allows users to react beyond the surface level of a design, and give profoundly better feedback about the viability and usability of a feature. MINIMUMS When dealing with the web, there’s a whole landscape of devices and screen sizes. Having someone use their watch to view the page you designed isn’t out of the realm of possibility with some Android Wear devices. With that in mind it’s important to know how your website will appear in such circumstances. That’s where a mobile first approach to design is beneficial, and in how it is coded — using media queries to extend the design beyond the smallest screen sizes and device capabilities. Not the other way around. ---------------------------------------- [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1436850975184-V3OUUG6RD710OXMHUYB1/image-asset.png?format=1000w] http://alloftheabove.audio/review FEEDBACK How did you enjoy this episode? We hope you loved it, but we're curious to know what you thought. Review on iTunes [http://alloftheabove.audio/review]

[https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1436237022785-0HQCDPS7ZNT7TYTRUER7/image-asset.png?format=1000w] Episode 31: Flipped Classrooms, with Bryan M Brush IN THIS EPISODE: Bryan goes solo this episode and looks at a growing trend in instructional design known as the flipped classroom. He discusses not only its origins and advantages, but also its pitfalls. By the end of this brief episode you should be able to make sense of what exactly a flipped classroom is. SUBSCRIBE WITH iTunes [https://itunes.apple.com/us/podcast/id954052502?mt=2] • Overcast [https://overcast.fm/itunes954052502/all-of-the-above-design-code-and-learning] • TuneIn [http://tunein.com/radio/All-of-the-Above-Tech-UX-Design-and-Education-p674057/] • Pocket Casts [http://pca.st/dRHJ] • RSS [http://www.alloftheabove.audio/episodes?format=rss] ---------------------------------------- SHOW NOTES & LINKS WIKIPEDIA [https://en.wikipedia.org/wiki/Educational_technology] Educational Technology TEACH THOUGHT [http://www.teachthought.com/blended-learning-2/the-definition-of-blended-learning/] Blended Learning YOUTUBE [https://www.youtube.com/watch?v=1nCqRmx3Dnw] The Fresh Prince of Bel Air Theme Song (Full Song) ELEARNERS [http://www.elearners.com/online-education-resources/degrees-and-programs/synchronous-vs-asynchronous-classes/] Synchronous vs. Asynchronous Classes EXPANDING LEARNING [http://www.expandinglearning.org/expandingminds/article/rise-any-time-any-place-any-path-any-pace-learning-afterschool-and-summer-new] The Rise of Any Time, Any Place, Any Path, Any Pace Learning: Afterschool and Summer as the New American Frontier for Innovative Learning HARVARD MAGAZINE [http://harvardmagazine.com/node/34321] Twilight of the Lecture JSTOR [http://www.jstor.org/stable/27558571?seq=1#page_scan_tab_contents] From Sage on the Stage to Guide on the Side by Alison King THE HUFFINGTON POST [http://www.huffingtonpost.com/2014/09/09/oecd-teacher-salary-report_n_5791166.html] American Teachers Spend More Time In The Classroom Than World Peers, Says Report NATIONAL EDUCATION ASSOCIATION TODAY [http://neatoday.org/2013/10/17/teachers-win-fight-for-more-planning-time-2/] Teachers Win Fight For More Planning Time EDUTOPIA [http://www.edutopia.org/blog/digital-divide-technology-internet-access-mary-beth-hertz] A New Understanding of the Digital Divide THE WASHINGTON POST [http://www.washingtonpost.com/posteverything/wp/2015/06/04/technology-wont-fix-americas-neediest-schools-it-makes-bad-education-worse/] Technology won’t fix America’s neediest schools. It makes bad education worse. ---------------------------------------- [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1436239438924-MEPK5THR5E2J8MMT9GM4/image-asset.png?format=1000w] http://www.alloftheabove.audio/itunes FEEDBACK How did you enjoy this episode? We hope you loved it, but we're curious to know what you thought. Rate on iTunes [http://www.alloftheabove.audio/review]

[https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1435722035863-PPNGBNBNWGYGHV0OE67O/image-asset.png?format=1000w] Episode 30: Memories, with Sam Bantner IN THIS EPISODE: Recorded in a car filled with mosquitos in Maine, Sam explains how externally storing our memories let's us remember more. SUBSCRIBE WITH iTunes [https://itunes.apple.com/us/podcast/id954052502?mt=2] • Overcast [https://overcast.fm/itunes954052502/all-of-the-above-design-code-and-learning] • TuneIn [http://tunein.com/radio/All-of-the-Above-Tech-UX-Design-and-Education-p674057/] • Pocket Casts [http://pca.st/dRHJ] • RSS [http://www.alloftheabove.audio/episodes?format=rss] ---------------------------------------- SHOW NOTES & LINKS [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1435750774697-E0VPOC59RFBXLUF051SN/image-asset.jpeg?format=1000w] Sam Bantner pulling out all the stops. ---------------------------------------- [https://images.squarespace-cdn.com/content/v1/5451765ce4b0f4d5bea100a6/1435722189295-2DY5FIH9K7F4AGPC5XUB/image-asset.png?format=1000w] FEEDBACK: How did you enjoy this episode? We hope you loved it, but we're curious to know what you thought. Review on iTunes [http://www.alloftheabove.audio/itunes]