If you're still using a desktop website and a mobile website, the time has come for upgrading to a responsive design. If you're a Yahoo! Store and haven't updated your website to a responsive theme, the time has come – and it's easier than you may think.
Users of Big Commerce and Shopify are most likely using responsive design as most of the core themes on these platforms are newer – but merchants that have been online and selling for many, many years are most likely still using desktop and mobile websites.
If you're on Yahoo! Store, there's never been a better time to go responsive and ditch the mobile website.
What is Responsive Design?
Let's first learn a bit more about what responsive design is. A responsive design is an approach to web design that makes all web pages render to a proper size based on the device that is viewing the page. So for simplicity's sake, this means that no matter what device a user is using to view your website, your website will conform to the device of the user.
The different content sections on your website are automatically re-arranged into a vertical column so again to make viewing much more pleasant. For non-mobile responsive websites, your content / text are simply shrunk to sizes comparable to sand (okay, so a bit of exaggeration here, but you get the point). Earn more money with responsive web design. The motivation to adopt responsive web design becomes even more obvious when you see the amount of money involved in online sales. From November 1 to November 30, 2020, consumers in the U.S. Spent $39.9 billion while shopping from their smartphones. Shoppers spent $60.7 billion from their laptops. Responsive web design means that your blog or website will automatically appear properly formatted on any device: a desktop computer, a tablet or a mobile device.
This means you no longer have 2 sites operating with the purpose of this same goal. Google and the search engines like it because they are indexing only ONE website, versus TWO.
So let's assume you are still operating a website that was redesigned around 2007 (pre responsive design). In order to meet the consumer's mobile demands, you most likely opted for a mobile website. A mobile website helped bridge the gap between desktop and responsive design. It gave your mobile users the ability to browse your website on a mobile device, but it does only that. The same experience that your desktop users receive does not carry over to the mobile device. It's kind of like just giving your customers a special 'order form' to use if they wish to shop on a mobile device.
Mobile websites also frustrate Google, mostly because a mobile website in theory is a separate website. Now, this is not the end of the world, because Google is smart. Google knows that your mobile website and desktop website are two different websites – but why not operate only one website? It's 2018. If you are using a service to provide you with a mobile website, this is also a good opportunity to just save that extra money. If you go responsive, you will not have additional costs to maintain a mobile website.
What Solutions Are Available to Me?
Earlier this year, Yahoo! released new responsive themes. These themes are well documented and well designed, allowing companies like Your Store Wizards to migrate your existing look and feel into one of the new responsive themes.
If you operate a simple, small store that has not had a lot of customization over the years, you can most likely migrate your own store to a responsive theme on your own. But, if your store is older, and has had a lot of customization – the customization won't carry over to the new responsive theme.
This article on Yahoo's support community explains the process. Yahoo! has created three responsive themes (of which all three can be extremely modified). It is important to remember that a responsive theme is essentially 'framework' and can be customized.
What Can I Do?
If you have a simple store with very little customization, it is possible to migrate to a responsive theme yourself, but if your store has been around a number of years, and has a lot of customization, you should have an expert do it for you.
These are the three themes you can choose from.
Fanal – A modern, responsive theme for a small to medium sized business selling housewares, furniture or like items.
DiVitto – A modern responsive theme that is best suited for electronics or consumer items.
Sambee – A modern responsive theme that is a more general eCommerce layout.
If you decide that you don't feel that going responsive on your own is something that is right for you, but like to update to a responsive theme and would like Your Store Wizards to provide you with pricing, please contact us using the form below!
Responsive Design For Your Website Blog Or Store Bought
With mobile devices taking over as the primary way people experience the web, responsive design is more important than ever. But responsive design doesn't just create a consistent mobile experience.
It's also affected the way we design for all screens, encouraging simpler layouts and more streamlined experiences. Whether you're running a responsive redesign or starting from scratch, these tips and tricks will help you along the way.
Pay attention to your navigation
The adoption of responsive web design has had a huge impact on site navigation. Just take a look at any website from 2007. It's almost impossible to not feel overwhelmed by the mountain of categories piled into the left-hand navigation.
Since you're designing for smaller screens, your design needs to work within these limitations. Try to simplify your navigational choices and use icons paired with text, in-page links, collapsible menus, and dropdowns to get people where they need to go. Remember that hidden navigational choices are roughly half as discoverable as apparent ones, and lengthen time to complete tasks, so do your best to make access to core pages visually obvious.
In general, you'll only have room for four or five core links. That affects not just your site's navigation, but also its entire content strategy/information architecture. You'll want to be sure that those four or five links represent the places people will want to go/should go, and that those pages offer opportunities for people to dig deeper.
Sidebars can be tricky. Desktops give us a ton of horizontal space to work with, so so it was all too easy to just throw all the extra links in a sidebar. But responsive design requires us as designers to create the simplest path we want someone to take without distracting them. Eliminating sidebars is one way to accomplish this.
In the past, long scrolling pages were considered a poor design decision, but mobile has changed that. Just remember that long-scrolling pages can make getting back to the navigation a pain. So use either a simple sticky navigation bar fixed to the bottom or top of the screen or a back to top button. For one-hand friendliness, go with the bottom nav.
Fingers don't fail me now
Your call to action buttons should pop out from the page, both in color and style.
Responsive Design For Your Website Blog Or Store Locations
The size and shape of your buttons is just as important as their color. Generally, circular and rectangular elements are the most recognizable as buttons. Just think of what you press in an elevator or the keypad on your smartphone. Getting too creative with the shape of your buttons can confuse a user, so stick with familiar forms.
Size can also make a huge difference, especially for those with disabilities. But we've all found ourselves struggling to hit just the right link on a mobile webpage — so save your audience that struggle and make sure your buttons are super finger-friendly. Material design provides the following specs for buttons:
To ensure usability for people with disabilities, give buttons a height of 36dp and give touchable targets a minimum height of 48dp.
Where 1dp equals 1px.
You'll also want to ensure that buttons and text links have generous space around them, again to avoid mis-clicks. You'll also want to make sure that your buttons are clearly interactive objects. Drop shadows, gradients, and other dimension-lending stylistic additions can help assure people they can click your buttons.
Start your design with mobile in mind
Good design is as little design as possible
–Dieter Rams
This is one of the pillars of responsive design. If the organization of your content, navigation, and graphics all make sense on a smartphone, they'll also be clear on a tablet or on a larger device like a desktop. This is one of the advantages of responsive design. When a design has to work on a variety of screen sizes, it helps strips down functionality and content to only what is necessary. It's more than just a practice, it's a philosophy that improves user experience.
Discover the processes and tools behind high-performing websites.
Plan your content organization before you design
Designing a website without a strong sense of its content structures is kind of like picking out a fancy frame before you've actually created a painting. You need to have an idea of how the content is going to be organized so that you can see the bigger picture.
Content and design flourish when developed in tandem. Content organization is more than just copying and pasting blocks of text to see where they'll fit on a page. Your content is the story you're trying to tell your audience. Make a list prioritizing the messages you want to convey. Figure out how these ideas flow from one to the next. Design around the content and base your navigation on its organization. A linear path will keep someone engaged with your website and lead to better conversion rates (so long as the message itself resonates with your audience).
Use only the words you need
Desktops allow for more text. This isn't always a good thing. With mobile devices, you must work within the confines of smaller screens. That means writing more economically, ensuring that every word helps move your story forward.
If you're taking writing from a desktop site, it' might need some editing. Consolidate copy, use bullet points and other structural devices, and trim the fat wherever you can.
Typography matters even more on smaller screens
Make sure you scale font size, line-height, and width to best fit differing screen sizes.
You don't need to see an eye doctor to know that tiny type on any screen is hard to read. Using larger font sizes can dramatically improve readability. So use something in the range of 16px for body copy, and adjust up or down depending on the font's design. (Though we'd recommend using ems instead, starting at 1 to 1.25em.)
And be sure to use a highly legible font, especially for vital bits of text like navigation labels. Nobody wants to see a script font in your menu.
Spacing is also a factor on smaller screens. Make sure that your line height is set to an appropriate amount. Too much will leave your text floating in space and too little will see your words stacked like pancakes. Usually something in the 1.25 to 1.5 range will work well, but individual typefaces will vary.
Pro tip: if you're using pixels for font sizes and don't want to calculate 16 x 1.35, leave the value blank and Webflow will do it for you.
Outlook express for macheavenlyboard. Throughout the design process, check your text on different devices to see how your line height will affect the presentation of the text.
When you're designing with mobile in mind, remember that a huge font may push the important content you want someone to read further down on a page. So consider all the other design methods in your toolkit to add drama: vary font weights, use all caps or all lowercase, or use color to differentiate content sections from other elements on the page.
Embrace negative space
You walk a fine line when creating a responsive design. Yes, you want to take a minimalistic approach to content and navigation — but you also don't want to leave anything vital out. Make use of negative space (aka, whitespace) to create breaks in your design and highlight those areas of content that you don't want anyone to miss.
Create and test responsive prototypes
It's important to know how the look and feel of your design is going to translate to different screens. It's also crucial to know how it will function.
Static prototypes will take you part of the way, but eventually you'll need a functional prototype to help you understand how the site will work and feel. Make sure to test your prototype on the actual devices to ensure that the website will work without problems. This will save you time and hassle — and spare you snarky tweets reporting that your site's 'broken' on mobile. Thankfully, Webflow takes the pain out of building easily shareable, fully functional, and responsive prototypes — all without writing code.
Also, be sure to check out our 'Best practices for prototyping websites' for more details on what you need to create prototypes that meet both user and stakeholder needs.
Stick to the fast lane with responsive images
Keep your website moving with images that load quickly, on every device.
One of the problems people run into with responsive design is that while images visually scale on smaller devices, they're still 3MB in size and slow load times to a crawl. Responsive images offer a powerful and effective workaround, but are laborious and painful to hand code. Fun stuffbeyblade battles codes. Filezilla mac 10.6 downloadbrownsearch.
Which is why we built responsive images right into Webflow, so you don't have to deal with it.
We may be a bit partial, but really, Webflow does make responsive images incredibly easy. Our platform optimizes all your inline images for you, so they load up to ten times faster and look beautiful on every device.
So go ahead, upload that 3.5MB image. We got you.
Power your layouts with flexbox
Flexbox is a CSS3 layout module that makes sure your layout responsives fluidly to different devices. To use flexbox, you simply give a parent container the display setting of 'flex,' then select how the children within that container distribute themselves within it. Fairly simple in principle, but it allows a powerful level of flexibility.
There are a number of tools you can use to implement flexbox layouts into your design, but we can't but help to recommend our own flexbox builder. It takes the pain out of building creative layouts like split-screens, sidebars, and hero covers, and lets you build popular design patterns like equal-height modules and Z-pattern feature lists in a snap.
Responsive design has changed the web … for the better
The popularity of mobile devices and tablets has changed how we design websites and navigate through them. The huge spaces that desktop designs were allotted often led to a lot of unnecessary graphics and content that detracted from a site's core message. Responsive design lets us strip away what we don't need, so everybody can get what they need done, done faster.
