Responsive

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)

New Responsive Design Mode: RDM Lands in Firefox Dev Tools

Firefox Developer Tools now includes a completely redesigned Responsive Design Mode (RDM for short) that’s just landed in Firefox Developer Edition, thanks to hard work from the DevTools team.

In a mobile-first world, it’s essential to prioritize performance for low-bandwidth and offline mobile experiences and design progressive web apps that can deliver across a range of devices. We aim to design developer tools that prioritize empathy for users and developers. That’s why we’ve put so much effort into the Responsive Design Mode.

We want to make it easier for developers to build web experiences that load and respond on screens of all different sizes and support a multitude of browsers, platforms, and device types. RDM is a significant upgrade to the Firefox tools themselves, reflecting our commitment to people who build for the web.

To access the RDM tool, make sure you’re running an up-to-date version of DevEdition. Next, open any web page to view  the Responsive Design Mode via Developer ? Responsive Design Mode.

There’s a lot in this new tool, and many new features still to come. Check out the video walk-through to see the tool in action with all of its features enumerated, including:

  • Popular device emulation
  • Network throttling
  • Touch-event emulation
  • Ability to set DPR (device pixel ratio) of devices
  • Screenshotting devices at certain sizes

Firefox Developer Tools already has a series of improvements planned for the next release of Responsive Design Mode, including:

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)