That was my Beyond Tellerrand Munich 2018 – Keynote talk/slides and impressions

I just got back from Beyond Tellerrand in Munich and here’s a quick report what you missed if you didn’t go. You might not be interested in my impressions, so let’s get my work out of the way first.

I gave the opening keynote “Sacrificing the golden calf of coding” in which I explained my transition from a hobby coder to a professional developer and learning along the way that tooling and automation is not the enemy.

The video is already available on the Vimeo Channel:

Sacrificing the golden calf of “coding” – Christian Heilmann – btconfMUC2018 from beyond tellerrand on Vimeo.

I also added the slides to Slideshare:

As you may know, I am a huge fan of Beyond Tellerrand. The organizer is a very old friend of mine and he bends over backwards to make the event something special. He cherry-picks the speakers, treats them immensely well and on a deeply personal level. I feel very proud to be a part of this for many years. On a personal level, I am chuffed about its success as my partner and me met at this event. Thus, she also was a volunteer this time and helped making this event work smoothly for all the attendees.

Anke packing bags

I was worried that branching out from Duesseldorf to Berlin and Munich might be a tough step for the event and as Munich is not a hotspot for events I worried about participation numbers. But I shouldn’t have. The even was full up and people stayed for the whole duration. I was heartbroken to hear about a massive personal loss in the organiser’s life just before the event and I am even more so impressed how well it worked out.

Attendees painting on the Surface Studio

I shot quite a few photos at the event, none of which of course will match what the official photographers managed to get.

Live Video Editing at BTConf

Beyond Tellerrand is ridiculously fast in releasing the videos of the event as they are mixed live. I love this as with booth duties at the Microsoft stand and personal errands I couldn’t see all the talks but will do so now in the nearer future. Here are some picks that may tickle your fancy, too:

Simon Collison’s “The Internet of Natural Things” talk was a lovely reminder how the internet is not all about cold technical things but also a way to organise your life and record natural things around you. It ends with an intriguing new way how an OS could look to be more helpful for people in their natural environment.


The Internet of Natural Things – Simon Collison – btconfMUC2018 from beyond tellerrand on Vimeo.

Harry Robert’s “Why Fast Matters” is a talk full of great information on how to measure and improve the speed of your products and what the positive effects of that can be. Harry does not only show tools but also proves why considering improvements can make profound business sense. And he explains how well performing products are truly international and help you reach new markets without breaking the bank of users who live there. His slides with all the links are available on speakerdeck.


Why Fast Matters – Harry Roberts – btconfMUC2018 from beyond tellerrand on Vimeo.

Nadieh Bremer’s “Data Sketches: A Year of Exotic Data Visualisations” is a whirlwind explanation of her last year of creating bafflingly beautiful data visualisations. She doesn’t only show off her work and talks about the beauty of it but explains the story warts and all – from having to scrape and clean up the data to iteratively doing the math on paper to get the effects she wanted to have.


Data Sketches: A Year of Exotic Data Visualisations – Nadieh Bremer – btconfMUC2018 from beyond tellerrand on Vimeo.

Dina Amin’s “A tinker story” was a total surprise to me and clearly the winner of the event. It already inspired me to write two new talks. Dina is a lady from Egypt who likes to take mechanical things apart and build stop motion animations from them. That’s impressive enough, but the real beauty of the talk is about her story. How she dared to do something that crazy and creative instead of pursuing a normal career and how the internet and working with other people over it made that possible. If you want to see some really cool animations and hear a story of empowerment and joy, this is for you.


A Tinker Story – dina Amin – btconfMUC2018 from beyond tellerrand on Vimeo.

Make sure to keep checking the channel for more videos coming up. Another absolute highlight was Stefan Sagmeister’s closing keynote which was a gorgeous and sweary rant about how we should embrace beauty instead of following outdated Bauhaus ideas. And it ended with the whole audience singing along with him to a song about beauty.

Stefan Sagmeister's Karaoke about beauty

There is no question in my book that Beyond Tellerrand is a worth-while conference to support and attend. My company agreed to support all the events this year and I am looking forward to seeing the next one in May in Duesseldorf. You should, too.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

January HTML/CSS Updates

What’s been happening with HTML and CSS?

Just like having the ability to speak a foreign language, this sort of skill is helpful in almost all professions. HTML and CSS are the foundational languages of the web. As web professionals we should know what updates are taking place in HTML and CSS world. I came across few articles about what’s new about both CSS grid and HTML.

Latest news about HTML and CSS

CSS Grid Layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

The post January HTML/CSS Updates appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

January JavaScript update

As web professionals are undoubtedly aware, many changes are happening with JavaScript these days. Yes, there is a fair amount of churn in frameworks employed on various projects. We did ask the question (some time ago) – are we relying too much on JavaScript? Regardless of your opinion about that question, we need to be aware that major changes are happening to core JavaScript as well. ES6/ ES2015 (ECMAScript 6) is the latest version making its way into browsers near you (and many other places). For those who have been working with web technologies for quite a while, you may recall that ES5 was released in 2009. Yes, nearly a decade ago.

The post January JavaScript update appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

January accessibility update

As we begin a new year, we thought it summarize some recent information regarding web accessibility. As a web professional, one should already know that making your pages accessible helps your search engine ranking and much more. As an organization, we have been promoting (and encouraging members) to participate in Project Silver (this initiative is focused on a new version of accessibility guidelines) for some time. We encourage you to consider helping with this initiative.

Of course, it is important to understand what we should be doing now to make certain our projects are accessible. We found the following articles to be a helpful review of what is presently happening with respect to accessibility.

What are you doing to make your projects accessible?

In December, Scott O’Hara discussed the trials and tribulations of the title attribute. This is a great review of the current state of use/ disuse of this attribute. In a nutshell, Scott review this venerable attribute since it’s inception in the HTML 1.2 draft (yes, that was in 1993). One of the main issues with this attribute is that most browsers assume a visitor is using a mouse [for example, to see a title tooltip, you must hover your cursor].  Surprisingly, Internet Explorer 10, 11 (and MS Edge) display tooltips (after a short delay) as if the visitor hovered over them. Additionally, when you long press an image in iOS 11, the title attribute also displays in the popover menu. Of course, these sorts of examples do not help much with overall user experience (and are not consistently implemented). Scott also reviews how this attribute is somewhat useful on select elements for screen readers. NVDA and other readers will announce title on landmark elements (header, footer and so forth), but will not on div or other elements (unless role updates are provided as well). Scott provides a number of use cases where the title attribute can be helpful. The bottom line is that the title attribute can be potentially quite useful, but a number of previous bad practices and lack of consistent support among browsers and screen readers is hampering more consistent use. We encourage readers to review Scott’s entire article. It takes about 20 minutes to review and is well worth the read.

In July, IBM updated their accessibility checklist (now at version 7.0). We encourage readers to review it (if you haven’t already). In addition to providing a thorough checklist, we like the approach of combining the revised US Section 508 standards (which also incorporates Web Content Accessibility Guidelines) along with the additional requirements needed to meet European standard EN 301 549. One central checklist for multiple countries. That alone should be useful for those who conduct business in the U.S. and E.U. We encourage web professionals everywhere to make certain they review (and use) such a checklist.

Dennis Lembree provided a very useful article on the topic of building a culture of accessibility (with a focus on leadership roles). Many of us have encountered situations where initiatives fail because there is no clear leadership. What we like most about this article is the specific breakdown (by corporate division) how individual leaders can contribute to a culture of accessibility. We already look forward to follow ups to Dennis’ post and additional insights. We encourage web professionals to take 5 to 7 minutes and read his entire article.

For those using the React framework, Scott Vinkle provides a very useful overview of React’s accessibility code linter. What we found most helpful is that Scott walks you through creating a new React app and describes in detail how to employ the code linter for maximum accessibility. As a web professional, you are employing linting as part of your continuous improvement strategy (aren’t you?). We encourage you to review Scott’s article (particularly if you are considering employing React in applications you develop in 2018). It will take you a couple of hours to review this article (if you work along with his examples).

For those web professionals who are new to web accessibility, we offer a foundational course on this topic via our School of Web initiative. As a current member of Web Professionals, you first course is free.

As you surmise from the above overview, a lot has been happening in the past months regarding accessibility. We encourage you to provide comments regarding your efforts to incorporate accessibility in your projects and tell us what you have been doing to develop a culture of accessibility in your organization. We may be in contact with you to do a follow up post on the specifics you provide.

All the best for a great 2018,

Mark DuBois
Community Evangelist and Executive Director.

 

 

The post January accessibility update appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

We’re not giving browsers enough credit…

I’m currently working on a few projects that are special browsers. I can’t put in any more details but the gist is that I will only have a WebView to play with. The interface of the browser is JavaScript/CSS/HTML, for which we use vue.js and Sass respectively.

I am also running an insider build of the OS as I want to be on the bleeding edge. My own browsers is a developer preview. This all taught me quite a few things.

  • There is a huge difference between a browser and a webview
  • It is possible to build all kind of fancy interfaces in web technologies. But often there are hard to work around security, performance and accessibility issues.
  • Day-to-day browsing sucks when your browser is a moving target

The main thing it taught me that as developers, we have a massively skewed view of what a browser is. Or, more accurately, what matters to users.

A browser is a web display tool

Glasses in front of a screen
Photo by Kevin Ku

In my meetings with clients, I found a few things that mattered most to them:

  • Performance – a browser should start up fast, not bog down the operating system eating resources and stay responsive. This is not only about first use, but often a big need for long-term use – for example in a kiosk scenario. Browser restarts are uncommon and should not be necessary
  • A reliable content display – a browser should also render content instantly. Content could be HTML documents with all the cruft they come with these days. But it is increasingly important that media of all kind plays smoothly. And often there is no chance to rely on a plugin or third-party player. This means a browser should be a video/audio player. It also should be an ePub and PDF reader. And it needs to render huge images and WebGL/WebVR content without any hiccups.

Neither of those should come as a surprise – this is also what we as developers expect. As developers we also want more. We put a lot of stake into the developer tools experience. And we want browsers to support the newest and hottest experimental technology. And we complain to other browser makers if not all are on par with the others on both these counts.

Most clients that wanted a bespoke browser, however, had other priorities.

A browser is an enabler

Welcome sign
Photo by rebeck96

I was happy to hear that every customer I worked with put a high emphasis on accessibility. I was less happy to see how tough it still can be to make a zoomable interface in a WebView. And how to get keyboard access right. And how to enable screenreader access and text to speech interfaces. But that’s my job as a developer. And yours, too.

A browser needs to enable people of all different abilities to reach what they came for. And ability isn’t a fixed state but fluctuates with environment and external influences. I found that out lately when I had to zoom my browser to 110% to read the average web site. A reminder that I am the age I look. I fixed it later by switching to varifocals, but I am happy that browsers allow me to fix it on the spot. Often a WebView embedded in an App doesn’t allow that.

A browser is a guardian

Lock
Photo by ShonEjai

A very common demand is to have blocking of unwanted content in the browser. This ranges from must haves like malicious site filters to popup blocking up to providing a pre-approved whitelist and block all else. Ad-blocking is also often a demand, but the big worry is that an opened document could give an attacker access to the computer.

Browser creators have a shared list of known attack sites to filter out. This is a great service that protected quite a few people over the last years.

Displaying insecure content in a secure site is another problem that I needed to work with. Whilst browsers have UI interfaces and blocking built-in some WebViews allow mixed content. That’s not good.

People also wanted to ensure that there is no dependency on plugins for video display or to outright ban Flash content. PDF was a big concern, too. And they were right to do so. Browsers do a lot to avoid malformed PDFs to spy on us.

Speaking of spying, a private browsing mode or a general browsing experience that blocks trackers was also high on the list. This is not surprising and a sensible feature to offer.

The opposite of a private mode is, however, also something that we keep underestimating.

A browser is a memory keeper

Reminder knot on finger
Photo by Rachel Demsick

Browsers are there for us to display the web, but they are much more importantly there to make this easier for us the more we use them. I felt that in my own use of an unreliable (preview) browser in a constantly changing configuration. I realised just how much it sucks having to constantly re-enter passwords. How annoying it is not to have sites I keep visiting autocomplete when I type a few letters of the URL. How “share with X” buttons become useless when you are not logged in. In essence, how much I rely on the browser to remember what I’ve done and intelligently help me along the way.

We don’t give browser makers enough credit for this amazing experience, as it is – like all good UX – invisible. A browser that automatically and safely stores and enters form data for me is a great help. It even protects me from entering wrong information and the frustrating re-filling experience. Yes, of course this is also an attack vector, but that doesn’t mean we shouldn’t celebrate its usefulness – we should make it more secure instead.

Having Firefox’s “awesomebar” remember my surfing habits over the last 10 years spoiled me. I don’t even remember the last time I bookmarked anything. My important finds I tweeted out anyway and let Pinboard remember them for me.

Others may as well have a lot of bookmarks. Together with synced autofill content and history it is great to be able to take this experience with you. Independent of computer, phone or device.

Conclusion

When it comes to answering what a browser does for us, I learned a lot in the last few months. I am more humble when demanding features of my colleagues and friends in other companies working on browsers. They are doing an incredible job building a piece of software that displays the web in an accessible and secure way. And once you learn about attack vectors of the web and webviews you are in for some rough nights.

I also learned that when it comes to who wins the most users in the browser space, it comes down to how they handle user data. Technical ability of a platform and “pushing the envelope of what the web can do” is exciting for us as developers. End users, however want the web to be easy, fast and secure to use. They also want their browser to know where they’ve been, and choose when it shouldn’t. They want a few things automated and get easy access to their content to send out to the web. From a privacy point of view, I also feel uneasy about this, but those who make this the easiest, win.

When it comes to what browsers can do, they’re much more on par than they’ve ever been – thanks to standards. The big differentiator isn’t what tech to support, it is how much of a travel companion on the web the browser is. It is a game of data, insights and good UX of the browser interface itself.

I am much more excited about what we can do in the future to help people keep their online identity in a browser without leaking it. And I would love to see more interfaces that teach people the value of their own data whilst using a browser.

A browser is not merely a display mechanism for the web. It is a record of your identity and history on it. This can be a great thing if done well, or a scary one if not. I’m worried that too many people on the web leave breadcrumbs without knowing it. They see the convenience of that without knowing the consequences or value to others.

I invite any other web developer to look closer at the interface elements and user-centric features of browsers. There is a lot of beauty and very clever, researched-based interfaces to be found. And I’d love to see this get more coverage in our circles, and not only which new API or tech feature is the next big thing.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Tools we use

As 2017 draws to a close, we thought it might be helpful to discuss the tools we use for various activities. These tools are not directly used for web design and development; they help our overall processes. Web Professionals considering freelance work or those working in enterprises may find this list helpful. Obviously, these are the choices we have made; we are not endorsing these particular tools – they just work for us. Your mileage will (and should) vary. We also include a brief overview of why it is important to consider using a tool for a specific task.

  • Accounting – many prefer QuickBooks. Others prefer Freshbooks. Regardless of the tool you use, it is important to keep track of income and expenditures.
  • Advice – mentoring is particularly important when you are starting. Obviously, Web Professionals members are here to help. Additionally, you may wish to consider the Small Business Administration and SCORE. The latter provides free business mentoring.
  • File management – we often work across multiple computers (and need access to files in a variety of situations). We have come to rely on tools such as Google docs, One Drive, Dropbox and similar services.
  • Graphics and video – we have come to rely more and more on Adobe Spark. It is a free tool and provides the ability to rapidly create messages for social media and more.
  • Networking – we should not be working alone; it is important to network with peers. We often rely on Meetup to find local groups with similar interests. Our members also know we use Slack to enhance member to member communication.
  • Password vault – passwords should be long and complex and not reused on various sites. This is why a password vault is so handy these days. If you are not using one, you should be. Examples include DashlaneLastPass, or KeePass (there are other alternatives as well). You only need to remember one password to open the vault and can then copy and paste passwords for a specific site as needed. We also recommend using two factor authentication where possible (see below).
  • Portable Apps – when there is a need to use Windows computers in client locations (or you simply want to take your browser favorites/ bookmarks) with you from computer to computer, we have found PortableApps to be a reasonable solution.
  • Project management – we often use Trello (yes, there are many alternatives). Trello fits with our work flows. We find it easy to share boards, checklists and more with others as needed.
  • Screen capture – we typically rely on SnagIt. However, there are times when using computers while working with clients, we have used Greenshot. The latter also has a zip version (so we can take it with us on a USB drive) along with other portable apps (see above). Yes, you can use the snipping tool (and the Mac equivalent), but tools (such as SnagIt) provide greater control and the ability to rapidly crop and annotate the screen capture.
  • Sharing/ collaborating – we typically use Connect and Zoom. There are many alternatives as well, such as Join.me. The advantage of using these tools (in addition to collaboration) is that you can record your screen (with narration) and use these for training, demonstrations and more.
  • Time trackingToggl is what we use to keep track of time spent on various activities. It is important to measure how much time you are spending on various tasks and projects.
  • Two factor authentication – Passwords are no longer enough to provide access to sites. We recommend using two factor authentication where possible. Google Authenticator, Duo, and Microsoft Authenticator are examples. The SANS OUCH newsletter provided a timely overview of 2 factor authentication recently. Disclosure, I (Mark) am one of the reviewers of that newsletter.
  • WordPress site management – if you are running multiple WordPress sites (and roughly 1/4 of all sites in the U.S. these days are based on this technology), you might want to consider using ManageWP. This is a freemium service offered by GoDaddy. It has a number of useful features in the free version (and you can get site monitoring for a nominal amount per site per month). This can save you a lot of time updating plugins, dealing with SPAM and more.

This is our list of tools that we often use. What did we forget? What tools in the above list do you use? Do you have alternative tools you prefer? Why do you prefer those? We look forward to your comments and further discussions. Let us know if you would like to have a separate Slack channel devoted to tools as well.

Best always,

Mark DuBois

Community Evangelist and Executive Director

The post Tools we use appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Web Typography and Layout

Web professionals should be aware of this discussion concerning Web Typography & Layout: Past, Present, and Future. As a web professional, it is important to know what the future holds.

Key takeaways include:

  • how to avoid being overwhelmed by all the tools and typefaces available today. We need to think of typography and layout as one.
  • how to move away from frameworks and bring creativity back into layout. We should focus on larger type and readable layout, including proper use of whitespace.
  • we should help the reader feel like a collaborator.

Three experts—Mozilla’s Jen Simmons, publication design legend Roger Black, and Jeffrey Zeldman (A List Apart)—discuss typography and layout on today’s web: where we are now, and where we’re going.  CSS grid can be a very helpful tool. Jen Simmons provides a number of examples on her labs.jensimmons.com site.

Typography can encourage long-form reading and not just scanning.

What are the most exciting areas of cutting-edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content? At a minimum, we should understand CSS grid and variable fonts and how they can be properly applied. Layout and typography were connected in the age of metal type, and they will be again. We must make our pages readable and employ the time tested skills that were employed by typesetters so long ago. We should think in terms of properly sized type (which is responsive given that our content may be consumed on phones, tablets, desktops, or other devices).

This discussion also reviews the history of layout on the web, and what multi-device reading and orbital publishing means to the practice of publication design as we move away from frameworks. We need to bring creativity back into layout (including layouts that break the mold). We must fully understand the implications of CSS Grid and its portents and help the reader feel like a collaborator. There is a new wave of user customization, and we need to understand how it impacts our designs.

We encourage you to watch the discussion video and review the associated transcript.

For those aspiring web professionals who need a better understanding of these concepts, we recommend the following resources:

The post Web Typography and Layout appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

The web we may have lost

The current blow to the open web that is the Net Neutrality ruling feels terrible to me. My generation saw the web emerge and many of us owe our careers to it.

There are a few reasons why the ruling is terrible. First of all are the things that everybody should worry about. Allowing ISPs to favour some traffic over others turns the web into a media of the elite. Mozilla’s Mitchell Baker explained this in detail in her CNN opinion piece. The other reason is that a web controlled by ISPs stifles innovation and opens a floodgate for surveillance as explained in this excellent Twitter thread by @jtm_.

I am not surprised that it came to this. The world-wide-web always scared the hell out of those who want to control what people consume and what their career is. The web was the equaliser.

Anyone can publish, anyone can consume and learn. And there was no way to protect your content. People could download, share and remix. From a pure capitalist point of view this is anarchy. From a creativity point of view, it is heaven.

Before we had the web all the information you wanted to access meant you either had to pay or you had to put a lot of effort in. I remember in school cycling to the library and lending out books, CDs and later DVDs. I also remember that I had to be on time or the thing I wanted to research wasn’t available. I didn’t have the money to buy books. But I was hungry to learn and I love reading.

When I got access to the web this all changed. My whole career started when I got online and I taught myself to start writing code for the web. I never finished any job education other than a course on radio journalism. I never went to college as we couldn’t afford it.

I went online. I found things to learn and I found mistakes I could help fix. I was online very early on when the web was, well – shit. I wasn’t tempted by thousands of streaming services giving me things to consume. Even downloading an MP3 was pretty much wishful thinking on a dial-up connection that cost per minute. I used the web as a read and write medium. I wrote things offline, dialled up, uploaded my changes, got my emails and disconnected.

As a kid I would ask my parents to stop at motorway gas stations to see trucks and cars from other countries. We didn’t have much money for holidays, so any time I could meet people outside my country was a thrill for me. You can’t imagine the thrill I felt when I had my first emails from people from all over the world thanking me for my efforts.

Using the web, I could publish world-wide, 24/7 and could access information as it happened.

This was a huge change to going to the library or reading newspapers. A lot of the information I gathered that way was outdated before it even got published. Editing and releasing is a lengthy process. There’s a flipside, of course. Materials published in a slower, more editorial process tend to be of higher quality. I learned that when I published my books. I learned that having a daunting technical editor and a more formal publishing format pushed me to do better. A lot of what I had blogged about turned out to be not as hot as I thought it was when I re-hashed it in book form.

That’s the price to pay for an open publishing platform?—?it is up to the readers and consumers to criticise and keep the publishers in check. Just because it is online doesn’t mean you should trust it. But as it is online and you can publish, too, you can make it better.

One great thing about an open web was that it enabled me to read several publications and compare them. I didn’t have to buy dozens of newspapers and check how they covered the same topic. I opened them one after the other and did my comparison online. I even got access to the source materials in news organisations. I had quite a chuckle seeing how a DPA or Reuters article ended up in other publications. A web without Net Neutrality wouldn’t allow for that. I’d be fed the message of the publisher that paid the most to the ISP. That’s shit. I might as well watch TV.

I spent 20 years of my career working on and for the web. I did that because when I started it was a pain in the backside to get online. I felt the pain and I very much enjoyed the gain. I had to show a lot of patience geting the content I wanted and publishing my work.

I didn’t have much money from my job as a radio journalist. I took a 10 pack of floppy disks with me to work (later on I used DVD-RWs and re-wrote them). I downloaded whole web sites and articles at work and read them offline at home. I still have a few CDs with “Photoshop tutorials” and “HTML tricks” from back then. Offline browser tools like HTTrack Website Copier or Black Widow were my friends.

At home, I didn’t “surf” as we do now. I opened many browser windows, loaded all the sites and then disconnected. It was too expensive to be online. I would disconnect and go through the browser cache folder to save images that loaded instead of looking at them loading. Dial-up meant hat I paid the same for every minute online as I would have paid for calling someone.

I’ve always wanted to make this better. And I wanted to ensure that whoever wants to use the web to learn or to find a new job or make some money on the side can do it.

And this is where I am angry and disappointed that there is even a possibility that Net Neutrality is in danger.

There is a lot to hate about the “cool viral video” PSA from Chairman of the FCC Ajit Pai

It is smarmy, arrogant and holy crap is it trying to be trendy and cool. But what riled me most about it is that the FCC thinks the main points of worry when it comes to the users of the web are:

  • Posting Pictures of food and animals
  • Shopping
  • Watching media-produced shows and movies
  • Be a fan of the same
  • Post Memes which are remixes of the same

And what scares me even more is the thought that they could be right. Maybe this debate now is a wake-up call for people to understand that the web is a voice for them. A place for them to be a publisher instead of a consumer or repeater of other content in exchange of social media likes and upvotes. It is time to fight for the web, once again.

I’ve always wanted to keep the big equaliser available for all. And I am excited to see what will come next. I look forward to see who will do amazing things with this gift to humanity that is an open publication platform. And how cool is it nowadays to have laptops and mobile phones to carry with you? You can sit in a cafe, access WiFi and you can be and do whatever you want. Wherever inspiration hits you or you try to find something out – go for it.

I sincerely hope that this is what the web still is. I understand that for people who grew up always online that the web is nothing special. It is there, it is like running water when you open a tap. You only care about the water when it doesn’t come.

And I hope that people still care that the web flows, no matter for whom or what the stream carries. The web did me a lot of good, and it can do so for many others. But it can’t do that if it turns into Cable TV. I’ve always seen the web as my media to control. To pick what I want to consume and question it by comparing it. A channel for me to publish and be scrutinised by others. A read-write medium. The only one we have. Let’s do more of the write part.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

SVG Filters

Earlier this year, I had the distinct honor of speaking with Christopher Schmitt about SVG (especially SVG filters). In this 6 minute overview, he discusses why these are important to web professionals everywhere. The full discussion is available to our members (once you login, scroll down to find the link).

Some of the sites mentioned by Christopher in this interview include the following:

Books he mentioned include:

Best always,

Mark DuBois
Executive Director and Community Evangelist

For those who are interested in a transcript of this interview, we provide the following:

[Mark DuBois] I’m speaking with Christopher Schmitt today. Christopher thank you so much for taking the time to be with us and to help web professionals better understand SVG filters.
To use an anology – they are similar to CSS rules; they can enhance text and images and so forth but I know that is an over simplification. Could you help our listeners better understand the technology please.

[Christopher Schmitt] I’ll be happy to. Thanks for having me on Mark.

With SVG filters, I think your analogy is good except that with SVG filters you to actually create a SVG file (which is pretty easy to do) and then you can associate that to an image and apply filters to that. What I really like about it is that you can apply SVG filters to almost any web element you have on the page like a div or the whole page, that is where the power of SVG applies. You can expand to more and more things. Ok.

[Mark] Thank you very much for that. What’s happening with them today? What’s the future looking like with respect to SVG filters. I know you’ve been doing some things recently.

[Christopher] This week my company Environment for Humans we did an online SVG conference are with seven speakers with wide ranging topics. You wouldn’t expect to have an all day conference on jpeg. But you could if you want to be ultra nerdy about it, but just for practical purposes of SVG. We had talks about SVG animation and are we talked about some responsive logos where you actually create a logo that is like a vector image a word type of logo mark. A prime example is like Disney’s castle logo that you see at the beginning of every movie that they do with a simple two color inclusion and the words Walt Disney underneath. One example that always been shown around is that if you have a browser fully expanded you shorten the browser and the castle goes away and you see the words Walt Disney you shorten the browser more and you just see that trademark script D from Disney’s name no matter what size your viewport is, you actually see the Walt Disney trademark.

That’s a great thing you can do to deal with the flexible nature of responsive web design where you have to deal with a lot of the not just resolution independence that you need (because of browser resolutions retina and all that), but you also have to deal with connectivity of the Internet too. Some people have very slow connections to the Internet so you don’t want to be throwing down a lot images for one logo. An example too, we also did stuff with the work flows with Sketch app which is a nice alternative to Illustrator and it’s also great for making wireframe mockups. There is not a lot out there in terms of dealing with Sketch and dealing with SVG exports and high upper level things like that too. There are a lot of things we can do with SVG. I have fun geeking out. There are so many things you can do with it.

[Mark] Definitely, I think the idea that it’s a vector based is very helpful today with all the different resolutions out there. It seems (in my view of the world) a pixel is no longer a pixel. With respect to SVG and filters and so forth why should practicing web professionals care? Why should they be interested in this today other than what you just talked about?

[Christopher] What I like about it is we can jettison Photoshop in some ways to do simple digital imaging effects. So, if you wanted to do a sepia tone, you can do that with SVG filters and can reuse over and over again without having to go back into Photoshop. One example I love was a few years back, Andy Clarke had this great example of making a print style sheet and use CSS filters for converting images to the black and white so when they printout it wouldn’t use color ink which is expensive,  so you conserve it. He also did that to old versions of IE so you get a generic black and white version of it (which was pretty funny), but you can also do it with SVG to create images.

There is a kind of filter you can use called color matrix  and you can do a whole lot of cool things with it. Before I get to that, I want to say that I’m an old guy in terms of the web. Been on the web since 1993 and I love Photoshop, so when I say get rid of Photoshop, it saddens me to say that. I have been working with Photoshop since version 1.5.

[Mark] Is there anything else you’d like to share with web professionals about this or other technologies, Christopher?

[Christopher] I have a weekly newsletter, I started this year, it’s called UXDesignNewsletter.com. Every week I send out a list of resources at least 10 plus more. That I think are really great. It comes out every Monday. If you want to sign up UXDesignNewsletter.com.

[Mark]  Fantastic! We will put the link out there and encourage our members to sign up or anyone else listening to this as well. Christopher, thank you so much for taking the time today in helping us better understand what’s going on in the world of SVG, SVG filters ad more. Thank you again.

[Christopher] Thank you so much for having me.

The post SVG Filters appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Web Truths: The web is world-wide and needs to be more inclusive

This is part of the web truths series of posts. A series where we look at true sounding statements that we keep using to have endless discussions instead of moving on. Today I want to talk about the notion of the web as being a world-wide publishing platform and having to support all environments no matter how basic.

The web is world-wide and needs to be more inclusive

Well, yes, sure, the world-wide-web is world-wide and anyone can be part of it. Hosting is not hard to find and creating a web site is pretty straight-forward, too.

Web content needs to be as inclusive as possible, that’s common sense. If we enable more people to access our content, there is a higher chance we create something that is worth while.

There is no question at all that web content should not exclude people because of their ability. As web content used to be text as a starting point this wasn’t extra effort. Alternative text for images, descriptions for complex visuals and transcripts for videos. These, together with assistive technology and translation services allowed for access. I won’t talk about accessibility here. This is about availability.

For those who started early on the web these are basic principles you need to follow when you want to play on the web. Which is why we always cry foul when someone violates them.

  • When someone creates a product that only works in a certain market
  • When something is only in one language or assumes people know how to work around that problem
  • When a product assumes a certain setup, operating system or browser
  • When a product relies on new technology without a fallback option for older browsers

These are all valid points and in a perfect world, they’d be a problem for a publisher not to follow. We don’t live in a perfect world though, and the sad fact is that the web we defend with these ideas never made it. It died much earlier when we forgot a basic principle of publication: how do you make money with it.

If all you want is to publish something on the web, and your reward is that it will be available for people you’re set. This attitude is either fierce altruism or stems from a position where you can afford to be generous.

For many, this isn’t what the web is about. Very early on the web was sold as a gold-mine. You create a web site and customers will come. Customers ready to pay for your services. Your web site is a 24/7 storefront that doesn’t have any overhead like a call centre would.

Amongst other problems, this marketing message lead to the mess that the web has become. It isn’t about making your content available. It is about reaching people ready to pay for your product or at least cover your costs. Those aren’t hypothetical users all over the world. For most companies that rely on making money these are affluent audiences where the company itself is. There are, of course, exceptions to this and some companies like the NYC based dating site Ignighter survived by realising their audience is coming from somewhere else. But these are scarce, and the safe bet or fast fail for most publishers was to reach people where they are.

You can’t make money if you spend too much, and thus you cut corners. Sure, it sounds interesting to have your product available world-wide. But it is more cost-efficient to stick to the markets you know and can bill people in. That’s why the world-wide-web we wanted to have is in essence a collection of smaller, local webs.

I’m moving from England to Germany. I’m amazed how many people use local web products instead of those I use. Some are because of their offers – the Netflix catalogue for example is much larger in the UK. But many are a success because of classic advertising on TV, in trains and newspapers.

As competiton grew it wasn’t about creating valuable content and maintaining it any longer. It was about adding what you offer and find shortcuts to get yourself found instead of your competition. And thus search engine optimisation came about and got funding and effort.

Of course it makes sense to have your product available in one form or another on all browsers and on enterprise and legacy environments. But is it worth the extra effort? It is when you start with your aim being publishing content. But many web products now don’t start with content, they start as a platform and get products added in a CMS. And that’s when browser market share is the measure, not supporting everybody. A browser that works well on Desktop and is also available on the high-end smartphones is what people optimise for. Because that’s what every sales person tells you is the target audience and they can show fancy numbers to prove that. That this seems short-sighted is understandable for us, but we also need to prove that it really is. In a measureable way with real numbers of how much people lost betting on one environment in the short term.

The sad fact we have to face now is that the web is not the main focus of people who want to offer content online any longer. Which seems strange, as apps are much harder to create and you are at the mercy of the store publishers.

Apple just announced that next year they disallow templated and generated apps. This is a blow to a lot of smaller publishers who bet on iOS as the main channel to paying customers. No worry, though, they can easily create a web site and turn it into a PWA, right?

Well, maybe. But there is an interesting statistic in the Apple article:

According to 2017 data from Flurry, mobile browser usage dropped from 20 percent in 2013 to just 8 percent in 2016, with the rest of our time spent in apps, for example. They are our doorway to the web and the way we interact with services.

Of course, one stat can be debated, and the time we spend in apps doesn’t mean we also buy things in them or click on ads. A good web site may be used for 30 seconds and leave me a happy customer. However, new users are more likely to look for an app than enter or click a URL. The reason is that apps are advertised as more reliable and focused whereas the web is a mess.

On the surface for Apple, this isn’t about punishing smaller publishers. This is a move to clean up their store. A lot of these kind of apps are either low quality or meant to look like successful ones. Reminds us of the time when SEO efforts did exactly the same thing. Companies created dozens of sites that looked great. They had custom made content to attract Google to create inbound links to the site they got paid to promote.

The sad truth about the web and the fact that publishing is easy is that the cleaning step never happens. The best content hasn’t won on the web for years now. The most promoted, the one using the dirtiest tricks whilst skirting Google’s TOCs did.

A lot of what is web content now is too heavy and too demanding for people coming to the web. People on mobile devices with very limited data traffic at their disposal.

That’s no problem though, right? We can slim down the web and make it available to these new markets. There is no shortage of talks at the moment to reach the next billion users. By doing less, by using Service Workers to create offline ready functionality. By concentrating on what browsers can do for us instead of simulating it with frameworks.

Maybe this is the solution. But there is a problem that often we come from a position of privilege that is much further from the truth than we’d like to. Natalie Pistunovich has a great talk called Developing for the next Billion where she talks about her experiences releasing a product in Kenya, one of the big growth markets.

There is a lot of interesting information in there and some hard to swallow truths. One of them is that smartphones are not as available as we think they are – even low end Androids. And the second is that even when they are that people aren’t having reliable data connections. Instead of going to web sites people send apps to each other using Bluetooth. Or they offer and sell products on WhatsApp groups – as these tend to be exempt of the monthly data allowance. With Net Neutrality under attack in the US right now, this could be the same for us soon, too.

Of course these are extreme conditions. But the fact remains that closed systems like WhatsApp allow these people to sell online where the web failed. Not because of its nature and technologies, which are capable enough for that. But because of what it became over the years.

The web may be world-wide as a design idea, but the realities of connectivity and availability of web-ready hardware are a different story. Much like anything else, a few have both in abundance and squander it whilst others who could benefit the most don’t even know how to start.

That’s why the “reaching the next million users with bleeding edge web technology” messages ring hollow. And it doesn’t help to tell us over and over again that it could be different. We have to make it happen.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)