February

February Updates – Mobile and Responsive Design

We thought it would be helpful to review the fundamentals of web design for aspiring web professionals in this article.

Responsive Web design is a Web design approach aimed at crafting sites to provide an optimal viewing experience. This is also aimed for easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices.

What Is Mobile Responsive Design?

When a website is responsive, the layout and/or content responds or adapts based on the size of screen they are presented on. A responsive website automatically changes to fit the device you’re reading it on. Typically there have been four general screen sizes that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop or laptop, the tablet and the mobile phone.

 

 

Josh Byers 2012 article – A Beginner’s Guide to Mobile Responsive Design – StudioPress has examples given as the screen gets smaller, the content shifts and changes to the best display for each screen. This article also has more detailed information about

  • Why Should I Care About Mobile Responsive Design? These days we need to think of mobile first.
  • We first need to optimize the layout of the content.
  • Next, we need to adapt the content that is shown (and only show content that is really needed).
  • It has been amazingly easy to create a mobile responsive website for some time.

Why Responsive Images?

In article Responsive images by MDN Web Docs we can learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them.

It also has a detail overview of

  • How do you create responsive images?
  • Resolution switching: Different sizes
  • Useful developer tools
  • Resolution switching: Same size, different resolutions
  • Art direction
  • Active learning: Implementing your own responsive images

Why Responsive Design?

Use of responsive web design is highly recommended because it

  • Makes it easier for users to share and link to your content with a single URL.
  • Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
  • Requires less engineering time to maintain multiple pages for the same content.
  • Reduces the possibility of the common mistakes that affect mobile sites.
  • Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience (see Pitfalls when detecting user agents” section for details).
  • Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site’s content and keep it appropriately fresh.

Google provides many more details in this article.

Other Resources which may be helpful

We always try to deliver something new in our Web professional’s world. Also we hope you find these overviews useful and always look forward to your comments and feedback (whether you are a member or not).

If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web. As a member, your first class is free.

 

The post February Updates – Mobile and Responsive Design 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)

February security review

We are now midway through the second month of the new year. This should be a good time for web professionals to review and update their individual security practices. Do your daily practices keep you secure? Are you certain? It is easy to to become complacent with our practices, credentials and equipment. This might be a good time to review individual security fundamentals.

Is it time to review your security practices?

We have all seen the examples where passwords are taped to a monitor or under a keyboard. We know not to do that. But do we periodically stop to consider our daily practices and how they affect security? This might be a good time to ask ourselves the following questions…

Best practices

With respect to passwords – are yours long and complex? Do you use passphrases? Are they impossible to guess? Do you use a different password on each site? Do you keep your passwords in a vault? Do you change your passwords from time to time?

Do you use two factor authentication (because passwords alone are no longer enough)?

When you are traveling – do you use a VPN (if you must connect to a public network – such as a hotel or airport)? Do you keep your phone and tablet backed up? Do you have the ability to track a device (in the event you lose it)? Do you have the ability to remotely wipe said device (again if it is lost or stolen)?

Do you routinely update your applications and operating system? Do you do this on your phone and tablet as well?

Additionally, do you do a factory reset on devices before you dispose of them (or recycle them)? Do you confirm that all data has really been erased from the device?

Hopefully you have been able to answer in the affirmative to all the above questions. If not, this might be a good time to rethink your practices. This also might be a good time to discuss these topics with colleagues and clients.

Resources

We have found the following resources helpful (you might want to share some of these with your colleagues and clients as well). All are links to the SANS website. I am a reviewer of their OUCH newsletter. These are provided because they can also be easily shared with colleagues and clients. Hopefully you find them useful.

What other security practices do you employ periodically? Care to share stories of “best practices” and how they helped (either personally or a client)?

As always, we look forward to your comments.

Best always,
Mark DuBois
Executive Director and Community Evangelist

The post February security review 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)

February Updates – CSS Grid Layout

In January we reviewed recent CSS updates. As a web professional you must be aware of constant changes taking place in our world. CSS Grid Layout is now supported by nearly 90% of modern browsers. It was adopted as a candidate recommendation by the W3C on December 17, 2017.

CSS Grid Layout

In this article I would like to focus on CSS Grid – a powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.

CSS Grid Layout

CSS Grid Layout

In the article A Complete Guide to Grid, Chris House provides many details about CSS Grid Layout along with examples.

Here are some key-points:

  1. In his introduction, Chris references two great resources – Rachel Andrew’s book (Get Ready for CSS Grid Layout) and Chris Coyier’s Complete Guide to Flexbox.
  2. He reviews the basics (including getting started with your container element display:grid, setting rows and columns and placing child elements).
  3. Of course, it is important to know the proper terminology (including grid container, grid item, grid line and more).
  4. He then provides a very useful overview of properties for the grid container and grid items.

Everything you need to learn CSS Grid Layout

In Rachel Andrews article Grid by Example explained basic concepts of Grid Layout which gives us a method of creating grid structures that are described in CSS and not in HTML. It helps us to create layouts that can be redefined using Media Queries and adapt to different contexts. Her 2016 book “Get Ready for CSS Grid Layout” has a meaningful quote by Eric Meyer in the forward. We think this nicely sums up the importance of CSS Grid Layout.

“Grid Layout is to Flexbox as PNG is to BMP, and then some.”

Resources

Here are additional resources about CSS Grid we believe are useful for Web Professionals.

  •  A collection of resources & tools to help you manage the Grid link 
  • Great examples which include an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code and a CodePen of the example. Examples by Rachel Andrews
  • This is an older example (but still useful) which tells how CSS grid are becoming popular these days. As web applications become more and more complex, we need a more natural way to do advanced layouts easily without hacky solutions that use floats and other less burdensome techniques. An exciting new solution for creating layouts comes with the CSS Grid Layout Module.
  • 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. MDN Web Docs also have great examples of CSS Grid.

We hope you find these overviews and examples in CSS Grid world useful. As always, we look forward to your comments and feedback (whether you are a member or not). What have been your experiences with employing CSS Grid in real world applications for clients. How was the work received? Did any issues arise?

For those who would like to have a little fun, try out CSS Grid Garden.

If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. These include the fundamentals of CSS and HTML (and much more). As a member, your first class is free.

 

The post February Updates – CSS Grid 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)

February UX update – User Experience is all about Users

User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by improving the usabilityaccessibility, and pleasure provided in the interaction with the product. User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users. As an aspiring or practicing web professional, we should make every effort to enhance user satisfaction.

UX Term origin

User Experience Architect Donald Norman – it has been said that he has invented this term as he thought human interface and usability were too narrow and he wanted to cover all aspects of the person’s experience with the system including industrial design graphics, the interface, the physical interaction and the manual. Since then the term has spread widely, so much so that it is starting to lose its meaning. He has written his personal reflection about this in his Wikipedia article.

The post February UX update – User Experience is all about Users 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)

Announcing the winners of the February 2013 Dev Derby!

Last month, some of the most creative web developers out there pushed the limits of touch events and multi-touch interaction in the February Dev Derby contest. After looking through the entries, our three expert judges–Franck Lecollinet, Guillaume Lecollinet, and (filling in for Craig Cook this month) yours truly–decided on three winners and two runners-up.

Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with multi-touch today.

Dev Derby

The Results

Winners

Runners-up

Naming just a few winners is always difficult, but the task was especially hard this time around. Just about every demo I came across impressed me more than the last, and I know our other judges faced a similar dilemma. Our winners managed to take a relatively familiar form of interaction and create experiences that were more creative, more fun, and more visually stunning than we would have ever predicted. Congratulations to them and to everyone else who amazed us last month.

Want to get a head start on an upcoming Derby? We are now accepting demos related to mobile web development in general (March), Web Workers (April), and getUserMedia (May). Head over to the Dev Derby to get started.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 8.0/10 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Announcing the February Dev Derby Winners

Touch events help you make websites and applications more engaging by responding appropriately when users interact with touch screens. A user touching a screen is very different from a user clicking a mouse button, so special care must be taken to ensure that touch-enabled Web applications respond to touch screen interactions in ways that users expect.

Last month, creative developers from around the web competed in the Touch Events Dev Derby to show off just how powerful touch events are. We had some really great entries (many so much fun I could barely stop playing with them). Our expert judgesRemy Sharp, Chris Coyier, and Chris Heilmann—looked over the entries and are proud to announce three winners and a runner-up. Please join us in congratulating these outstanding contributors!

1st: Pinch That Frog! by Danny.D
2nd:
Kite Flying by ltch
3rd: The Face Builder by boblemarin

Runner up:
Twistron by seva

But let’s not forget about everyone else who submitted to this Derby. Each and every one of these people is pushing the web forward and deserves a huge amount of praise for doing so.

Want to see your name here next month? We are now accepting demos related to CSS 3D Transforms (March), HTML5 audio (April), and Websockets (May). Get an early start by submitting today!

View full post on Mozilla Hacks – the Web developer blog

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

Accepting February Dev Derby entries for one extra day

Wait a minute, there are how many days in February?

Looks like leap day got the best of us. Earlier today, we ended the February Dev Derby prematurely, making it impossible for some of you to submit those last-minute demos for a couple of hours.

To make up for this oversight, we will accept February Dev Derby submissions for one extra day. Please submit your entry before March 1 at 11:59:59 p.m. PT for them to be counted.

Want to get a head start on an upcoming Derby? We are now accepting entries related to CSS 3D Transforms (March) and HTML5 audio (April). Submit today!

View full post on Mozilla Hacks – the Web developer blog

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

Wiki Wednesday: February 22, 2012

Here are today’s Wiki Wednesday articles! If you know about these topics, please try to find a few minutes to look over these articles that are marked as needing technical intervention and see if you can fix them up. You can do so either by logging into the wiki and editing the articles directly, or by emailing your notes, sample code, or feedback to mdnwiki@mozilla.org.

Contributors to Wiki Wednesday will get recognition in the next Wiki Wednesday announcement. Thanks in advance for your help!

JavaScript

SpiderMonkey

Developing Mozilla

Extensions

XUL

XPCOM

Interfaces

Thanks to Neil Rashbrook for contributing!

Plugins

CSS

Thanks to leeli and Panagiotis Tsalaportas for their contributions!

SVG

HTML

Thanks to Panagiotis Tsalaportas and Neil Rashbrook for their contributions since last time.

DOM

Thanks to Matt N. for his contribution to the DOM documentation.

View full post on Mozilla Hacks – the Web developer blog

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

Mozilla Hacks Weekly, February 23rd 2012

We like our routines here in Mozilla’s Developer Engagement team , and just like every Thursday, it’s time to share some good links!

At the end of this blog post, you also have all the Developer Engagement team members and what they work on. If you are interested in discussing more, contributing or taking part of our work, don’t hesitate to contact us or follow us on Twitter!

Weekly links

If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other means.
The picks this week are:

The Developer Engagement team

Mozilla’s Developer Engagement team work with writing articles, documentation – such as MDN (Mozilla Developer Network) – public speaking and generally helping and informing about open technologies and Mozilla products. If you are interested in following our work, here are the team members:

Barry Munsterteiger

Barry is our Creative Instigator and is working on interesting and limit-breaking demos.

Twitter: @mozBarry

Christian Heilmann

Christian is Mozilla’s Principal Evangelist and is working with HTML5, Open Web, BrowserID and Developer Tools in Firefox. He is also maintaining the @mozhacks account together with Robert Nyman.

Blog: http://christianheilmann.com/
Twitter: @codepo8

Eric “Sheppy” Shepherd

Eric is the Developer Documentation Lead for the MDN documentation and everything surrounding it.

Blog: http://www.bitstampede.com/
Twitter: @sheppy

Havi Hoffman

Havi works with Mozilla Labs and WebFWD, and maintains the @mozlabs account.

Twitter: @freshelectrons.

Janet Swisher

Janet is working on MDN documentation and is organizing doc sprints to ensure we have premium quality on MDN.

Blog: http://www.janetswisher.com/
Twitter: @jmswisher.

Jean-Yves Perrier

Jean-Yves is another one of our technical writers working on MDN documentation.

Twitter: @teoli2003.

Jeff Griffiths

Jeff is working with the Add-ons SDK (Jetpack).

Blog: http://canuckistani.ca/
Twitter: @canuckistani

Joe Stagner

Joe is working with Web Apps Developer Ecosystem & Partner Engagement, HTML5 and the Open Web.

Blog: http://www.misfitgeek.com/
Twitter: @MisfitGeek

John Karahalis

John is working on Dev Derby.

Twitter: @openjck

Rob Hawkes

Rob is working on HTML5 games and the Open Web.

Blog: http://rawkes.com/
Twitter: @robhawkes

Robert Nyman

Robert is working with HTML5, Open Web, Firefox, WebAPI and maintains the @mozhacks account.

Blog: http://robertnyman.com
Twitter: @robertnyman

Shezmeen Prasad

Shezmeen is working on everything regarding events, organization and connecting conferences with Mozilla speakers.

Stormy Peters

Stormy is the Team Lead for the Developer Engagement team. managing it and evaluating our objectives.

Blog: http://stormyscorner.com/
Twitter: @storming

Tristan Nitot

Tristan is our Mission Evangelist and is focusing on the bigger picture of Mozilla.

Blog: http://standblog.org/blog/en
Twitter: @nitot

Will Bamberg

A picture of Will Bamberg Will is working on documentation for the Add-ons SDK (Jetpack).

View full post on Mozilla Hacks – the Web developer blog

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

Mozilla Hacks Weekly, February 16th 2012

It’s Thursday, meaning that all of us in Mozilla’s Developer Engagement team want to share our reading tips! And man, have we got a lot of good links for you this week!

At the end of this blog post, you also have all the Developer Engagement team members and what they work on. If you are interested in discussing more, contributing or taking part of our work, don’t hesitate to contact us!

Weekly links

If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other means.
The picks this week are:

The Developer Engagement team

Mozilla’s Developer Engagement team work with writing articles, documentation – such as MDN (Mozilla Developer Network) – public speaking and generally helping and informing about open technologies and Mozilla products. If you are interested in following our work, here are the team members:

Barry Munsterteiger

Barry is our Creative Instigator and is working on interesting and limit-breaking demos.

Twitter: @mozBarry

Christian Heilmann

Christian is Mozilla’s Principal Evangelist and is working with HTML5, Open Web, BrowserID and Developer Tools in Firefox. He is also maintaining the @mozhacks account together with Robert Nyman.

Blog: http://christianheilmann.com/
Twitter: @codepo8

Eric “Sheppy” Shepherd

Eric is the Developer Documentation Lead for the MDN documentation and everything surrounding it.

Blog: http://www.bitstampede.com/
Twitter: @sheppy

Havi Hoffman

Havi works with Mozilla Labs and WebFWD, and maintains the @mozlabs account.

Twitter: @freshelectrons.

Janet Swisher

Janet is working on MDN documentation and is organizing doc sprints to ensure we have premium quality on MDN.

Blog: http://www.janetswisher.com/
Twitter: @jmswisher.

Jean-Yves Perrier

Jean-Yves is another one of our technical writers working on MDN documentation.

Twitter: @teoli2003.

Jeff Griffiths

Jeff is working with the Add-ons SDK (Jetpack).

Blog: http://canuckistani.ca/
Twitter: @canuckistani

Joe Stagner

Joe is working with Web Apps Developer Ecosystem & Partner Engagement, HTML5 and the Open Web.

Blog: http://www.misfitgeek.com/
Twitter: @MisfitGeek

John Karahalis

John is working on Dev Derby.

Twitter: @openjck

Rob Hawkes

Rob is working on HTML5 games and the Open Web.

Blog: http://rawkes.com/
Twitter: @robhawkes

Robert Nyman

Robert is working with HTML5, Open Web, Firefox, WebAPI and maintains the @mozhacks account.

Blog: http://robertnyman.com
Twitter: @robertnyman

Shezmeen Prasad

Shezmeen is working on everything regarding events, organization and connecting conferences with Mozilla speakers.

Stormy Peters

Stormy is the Team Lead for the Developer Engagement team. managing it and evaluating our objectives.

Blog: http://stormyscorner.com/
Twitter: @storming

Tristan Nitot

Tristan is our Mission Evangelist and is focusing on the bigger picture of Mozilla.

Blog: http://standblog.org/blog/en
Twitter: @nitot

Will Bamberg

A picture of Will Bamberg Will is working on documentation for the Add-ons SDK (Jetpack).

View full post on Mozilla Hacks – the Web developer blog

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