SlideShare uma empresa Scribd logo
1 de 3
Baixar para ler offline
Responsive Web Design: Beyond the Breakpoints
Making responsive web designs that work for ‘anyone anywhere’ is a goal rather than a real
prospect. We can only aim high and hope to cater for as many as possible, and the task is often both
challenging and frustrating. But the constraints have brought with them, or made necessary, some
trends that are quite positive for usability and flexibility.
For example, whitespace has become vital for manoeuvring space, often leading to designs that are
simplified, vibrant, and practical. Buttons and links have changed for the better too, as microscopic
menus and CTAs are abolished in favour of large objects that are easy to spot and click.
Neat – but what about the actual content?
The ramifications of this brave new world of design reach farther than grids and scalability. Content
strategy is more crucial than ever, and must be part of the earliest stages of wireframing. Websites
that aim to work on screens both big and small need to feature carefully selected images, effective
texts, and sensible layout hierarchies.
Here are some content-specific areas that require thought, preparation, and testing:
Images re-imagined
Visually appealing, striking and scalable, large JPEGs are widespread in every sense. Aside from the
possible issues of hitting mobile users with hundreds of kilobytes of jazzy pixels, consider how your
image of choice will appear on 28-inch widescreen compared to an early iPhone. If the image relies
on fine details or faint nuances to make sense, it’s no good.
This is readily countered with a measure of work: Simply choose images that jump out at every size.
Employ the same principles as when designing a logotype, and find an idea that works from
billboards down to pencils.
Glares galore
Light has also become an important factor when targeting a wide and varied audience. Images must
stand out in bright daylight as well as in office environments, and that requires imagery that is
immediate and clear.
The implications go beyond saturation and hues: The key factor to high clarity is contrast, as this
affects how well we can make out images in varying lights and from different angles.
This is a tall order. Pictures meant to work everywhere must adhere to brand guidelines, pop on
smalls screens in direct light, but not come across as a storm of colours on larger monitors. The
remedy is to discuss potential issues with those who pick the images and tweak photographs when
necessary.
Fighting the TL;DR syndrome
One benefit– or straightjacket, depending on whom you ask – of RWD (Responsive Web Design) is
the increased need for tight copy. Typically, text reflows when boxes and columns grow narrower,
and short texts surrounded by ample whitespace make for easy changes between layouts.
Conversely, wordy and keyword-packed descriptions are the kryptonite of effective transitions.
Added to this is the small amount of time typical visitors spend on websites. Today’s web users are a
hurried crowd and want the gist of messages now. Consequently, shrewd organisations revise their
copy to be as efficient as possible. Be to-the-point, tantalise, hint and hook.
Think of texts as competitors, fighting distractions such as work, social media, overflowing inboxes,
sudden noises and general boredom. This has always been the case; mobile devices have only made
the situation worse.
Also, tread carefully around vague terms such as ‘solution’. If you can, point to the possible benefits
of your service or product. Examples: ‘We increase your conversions, kick-start your social media
presence, and bring more people to your website.’
Hide or show
Consider what to show and which elements to hide for small resolutions. Dropping non-critical texts
and images can make for much quicker and slicker browsing. Current users are reported not to mind
scrolling, but scrolling on small screens still makes it easier to miss content.
While the once-crucial fold is held as less important – not to mention harder to define – these days,
there is still the matter of hierarchy. Keep important features near the top of the page, lose
redundant elements when scaling down, and keep in mind that smart copy and imagery can spark
curiosity while using up very little space.
Conversion-critical websites should take care to ensure that CTAs (calls-to-action) and key messages
are prioritised. Crucially, any long page should feature whitespace as well as clear pointers to
content below the fold.
Design for the future
This is not to be confused with removing access to any part of the website. I’m a strong believer in
retaining all content and functionality, no excuses or exceptions. If a section is cumbersome to use
or outright unavailable, the navigation – or perhaps the overall structure – is probably flawed.
Some might argue that certain areas are likely to be of minimal (or no) interest to visitors using
mobile devices, and that behaviour analyses can point to key user journeys that should be
prioritized. This is correct, and useful when scopes and budgets limit what can be done – otherwise,
everything should be available and easy to use, regardless of what device is used to access the
website.
The reason is straightforward: More and more people use mobile devices. What was been true for
behaviour patterns might be wrong tomorrow. Always give the visitor the opportunity to navigate
and act as she or he wants, and then draw conclusions.
Don’t leave the content hanging
In short, while the technical constraints of RWD in themselves are a case for simplicity, they’re also
an argument for looking closely at bland images and longwinded copy. Much can easily be updated –
and should be so, to be more effective for an increasingly diverse group of users.
Now that unique, helpful and entertaining texts are recognized for their worth, it’s critical to make
certain they get read. Dazzling and inspiring pieces are challenging to write; making mobile web
users take part of them is even tougher. Creating and perfecting them must be allowed to take time.
Likewise, images should be picked based on their appearance on large widescreens down to
thumbnail size. This too can take more effort than expected. Obviously, this is the case for all
websites whether or not they’re responsive, as most devices shrink pictures down one way or
another.
Agency work rarely allows for long planning, so the case for content must be made early in the
process. Explain – or better yet, show – clients the effects to underline your point. Instead of
suggesting that your taste in images and words is superior, use numbers to highlight what your
creative involvement has done for others in terms of conversions and traffic.
Effective content demands hard work, but the end result is a website that truly stands out for
(almost) everyone, everywhere.

Mais conteúdo relacionado

Destaque

Content Marketing Strategies That Drive and Protect Organic Leads - NEDMA 2015
Content Marketing Strategies That Drive and Protect Organic Leads - NEDMA 2015 Content Marketing Strategies That Drive and Protect Organic Leads - NEDMA 2015
Content Marketing Strategies That Drive and Protect Organic Leads - NEDMA 2015 Dennis Kelly
 
All about me power point
All about me power pointAll about me power point
All about me power pointJa3397
 
Presentazione MilanoMarittimaEventi.com
Presentazione MilanoMarittimaEventi.comPresentazione MilanoMarittimaEventi.com
Presentazione MilanoMarittimaEventi.comSara Di Stefano
 
b-confident_smb_jan11_cover_story
b-confident_smb_jan11_cover_storyb-confident_smb_jan11_cover_story
b-confident_smb_jan11_cover_storyPatrick Spencer
 
Monografico7 AGUA Y SALUD
Monografico7 AGUA Y SALUDMonografico7 AGUA Y SALUD
Monografico7 AGUA Y SALUDCesar Enoch
 
All about me
All about meAll about me
All about meJa3397
 

Destaque (15)

Sistem persamaan linier
Sistem persamaan linier Sistem persamaan linier
Sistem persamaan linier
 
Content Marketing Strategies That Drive and Protect Organic Leads - NEDMA 2015
Content Marketing Strategies That Drive and Protect Organic Leads - NEDMA 2015 Content Marketing Strategies That Drive and Protect Organic Leads - NEDMA 2015
Content Marketing Strategies That Drive and Protect Organic Leads - NEDMA 2015
 
All about me power point
All about me power pointAll about me power point
All about me power point
 
Presentazione MilanoMarittimaEventi.com
Presentazione MilanoMarittimaEventi.comPresentazione MilanoMarittimaEventi.com
Presentazione MilanoMarittimaEventi.com
 
Manusia sain, teknologi dan seni
Manusia sain, teknologi dan seniManusia sain, teknologi dan seni
Manusia sain, teknologi dan seni
 
b-confident_smb_jan11_cover_story
b-confident_smb_jan11_cover_storyb-confident_smb_jan11_cover_story
b-confident_smb_jan11_cover_story
 
HEALTH AND FITNESS
HEALTH AND FITNESS HEALTH AND FITNESS
HEALTH AND FITNESS
 
Monografico7 AGUA Y SALUD
Monografico7 AGUA Y SALUDMonografico7 AGUA Y SALUD
Monografico7 AGUA Y SALUD
 
All about me
All about meAll about me
All about me
 
Matrix dan operasi-operasinya
Matrix dan operasi-operasinyaMatrix dan operasi-operasinya
Matrix dan operasi-operasinya
 
Ruang ruang vector
Ruang ruang vector Ruang ruang vector
Ruang ruang vector
 
Monografico5
Monografico5Monografico5
Monografico5
 
Ruang eigen
Ruang eigen Ruang eigen
Ruang eigen
 
Project work scheletro
Project work  scheletroProject work  scheletro
Project work scheletro
 
DoILookStupid
DoILookStupidDoILookStupid
DoILookStupid
 

Último

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideHironori Washizaki
 

Último (20)

20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
 

Responsive Web Design: Beyond the Breakpoints

  • 1. Responsive Web Design: Beyond the Breakpoints Making responsive web designs that work for ‘anyone anywhere’ is a goal rather than a real prospect. We can only aim high and hope to cater for as many as possible, and the task is often both challenging and frustrating. But the constraints have brought with them, or made necessary, some trends that are quite positive for usability and flexibility. For example, whitespace has become vital for manoeuvring space, often leading to designs that are simplified, vibrant, and practical. Buttons and links have changed for the better too, as microscopic menus and CTAs are abolished in favour of large objects that are easy to spot and click. Neat – but what about the actual content? The ramifications of this brave new world of design reach farther than grids and scalability. Content strategy is more crucial than ever, and must be part of the earliest stages of wireframing. Websites that aim to work on screens both big and small need to feature carefully selected images, effective texts, and sensible layout hierarchies. Here are some content-specific areas that require thought, preparation, and testing: Images re-imagined Visually appealing, striking and scalable, large JPEGs are widespread in every sense. Aside from the possible issues of hitting mobile users with hundreds of kilobytes of jazzy pixels, consider how your image of choice will appear on 28-inch widescreen compared to an early iPhone. If the image relies on fine details or faint nuances to make sense, it’s no good. This is readily countered with a measure of work: Simply choose images that jump out at every size. Employ the same principles as when designing a logotype, and find an idea that works from billboards down to pencils. Glares galore Light has also become an important factor when targeting a wide and varied audience. Images must stand out in bright daylight as well as in office environments, and that requires imagery that is immediate and clear. The implications go beyond saturation and hues: The key factor to high clarity is contrast, as this affects how well we can make out images in varying lights and from different angles. This is a tall order. Pictures meant to work everywhere must adhere to brand guidelines, pop on smalls screens in direct light, but not come across as a storm of colours on larger monitors. The remedy is to discuss potential issues with those who pick the images and tweak photographs when necessary. Fighting the TL;DR syndrome
  • 2. One benefit– or straightjacket, depending on whom you ask – of RWD (Responsive Web Design) is the increased need for tight copy. Typically, text reflows when boxes and columns grow narrower, and short texts surrounded by ample whitespace make for easy changes between layouts. Conversely, wordy and keyword-packed descriptions are the kryptonite of effective transitions. Added to this is the small amount of time typical visitors spend on websites. Today’s web users are a hurried crowd and want the gist of messages now. Consequently, shrewd organisations revise their copy to be as efficient as possible. Be to-the-point, tantalise, hint and hook. Think of texts as competitors, fighting distractions such as work, social media, overflowing inboxes, sudden noises and general boredom. This has always been the case; mobile devices have only made the situation worse. Also, tread carefully around vague terms such as ‘solution’. If you can, point to the possible benefits of your service or product. Examples: ‘We increase your conversions, kick-start your social media presence, and bring more people to your website.’ Hide or show Consider what to show and which elements to hide for small resolutions. Dropping non-critical texts and images can make for much quicker and slicker browsing. Current users are reported not to mind scrolling, but scrolling on small screens still makes it easier to miss content. While the once-crucial fold is held as less important – not to mention harder to define – these days, there is still the matter of hierarchy. Keep important features near the top of the page, lose redundant elements when scaling down, and keep in mind that smart copy and imagery can spark curiosity while using up very little space. Conversion-critical websites should take care to ensure that CTAs (calls-to-action) and key messages are prioritised. Crucially, any long page should feature whitespace as well as clear pointers to content below the fold. Design for the future This is not to be confused with removing access to any part of the website. I’m a strong believer in retaining all content and functionality, no excuses or exceptions. If a section is cumbersome to use or outright unavailable, the navigation – or perhaps the overall structure – is probably flawed. Some might argue that certain areas are likely to be of minimal (or no) interest to visitors using mobile devices, and that behaviour analyses can point to key user journeys that should be prioritized. This is correct, and useful when scopes and budgets limit what can be done – otherwise, everything should be available and easy to use, regardless of what device is used to access the website. The reason is straightforward: More and more people use mobile devices. What was been true for behaviour patterns might be wrong tomorrow. Always give the visitor the opportunity to navigate and act as she or he wants, and then draw conclusions. Don’t leave the content hanging
  • 3. In short, while the technical constraints of RWD in themselves are a case for simplicity, they’re also an argument for looking closely at bland images and longwinded copy. Much can easily be updated – and should be so, to be more effective for an increasingly diverse group of users. Now that unique, helpful and entertaining texts are recognized for their worth, it’s critical to make certain they get read. Dazzling and inspiring pieces are challenging to write; making mobile web users take part of them is even tougher. Creating and perfecting them must be allowed to take time. Likewise, images should be picked based on their appearance on large widescreens down to thumbnail size. This too can take more effort than expected. Obviously, this is the case for all websites whether or not they’re responsive, as most devices shrink pictures down one way or another. Agency work rarely allows for long planning, so the case for content must be made early in the process. Explain – or better yet, show – clients the effects to underline your point. Instead of suggesting that your taste in images and words is superior, use numbers to highlight what your creative involvement has done for others in terms of conversions and traffic. Effective content demands hard work, but the end result is a website that truly stands out for (almost) everyone, everywhere.