๐Ÿ“ฑ๐Ÿ‘ 6 Things OVERLOOKED In Mobile-Friendly Website Design

Articles, Blog

๐Ÿ“ฑ๐Ÿ‘ 6 Things OVERLOOKED In Mobile-Friendly Website Design

๐Ÿ“ฑ๐Ÿ‘ 6 Things OVERLOOKED In Mobile-Friendly Website Design


Are you watching this video on a monitor
or in the smartphone? There is a 50% probability that your answer is gonna be
a “smartphone” since, in recent years, over 50% of web traffic has been generated by
mobile devices. This means that half of the people who visit your website will
be viewing it not like this, but like this. And it makes up for certain challenges for the designer, such as the necessity
to create device specific layouts where you will need to change the order and
positioning – and sometimes even the contents of your sections!
So at the scale of which element is appropriate for a specific device, this
means that your grid has to adjust to the width of the device screen. The best
solution to that is reducing the number of columns your layout has, when on
tablet devices, or placing your sections in one column when viewed on a
smartphone. But, as a result, you might end up with some pretty lengthy pages. In
some cases, it is recommended that you get rid of some sections to benefit your
mobile layout. By using a heatmap, you can determine which sections on your site
evoke the most interest and just remove the rest from the mobile layout. Another
tip to reduce the length of your website is – instead of putting elements of the
same type in a list or in a grid, throw them together in a carousel, so users can
view them by scrolling through the carousel, and then move on to exploring
the rest of your layout! As for the navigation, you want to make sure that
you hide all the extra stuff you have in your header inside of a neat hamburger
menu. If it’s a store, a blog, a news portal, or a site with booking
functionality – make sure you include the search icon in your header or inside the
hamburger menu, so users can find what they want straight away. If you need to
place the primary CTA somewhere on your page, there is no better place than the
hero section. So, it’s right in the users view once they open the page and they’re
able to perform this action straight away! Another option could be placing it
in the header, if you have enough room in there Now text – picking the wrong font size can seriously compromise readability, so the
text elements on your mobile layout should be twelve to sixteen pixels for
the main body copy, and one or two pixels smaller for secondary elements such as
captions and tags. While your H1’s should be
two and a half size of your base font. Headings should fit on two to three
lines on average, so it doesn’t take up half of the user’s screen. As for the clickable
interactive elements, such as buttons and fields, make sure that their size is
bigger than the average touch targetб which is ten by ten millimeters, and
talking about interactive elements – if you embed a form – make sure you don’t
make it too long and too confusing. Go for a form which can fit in the screen
dimensions and has a comprehensible and friendly UI. Websites with some
heavyweight functionality like online stores, for example, also require a lot of
UI elements to be present on the pages. So, don’t dismiss mobile users’ need to
access all of those filters buttons and options, but do let these elements
breathe and organize them in a way that is not intrusive and confusing, but
comfortable and intuitive to use! Well, it was pretty much it for this brief
beginner’s guide to designing mobile website layouts! And if you’re a web designer and developer, or a site owner yourself, you might be interested in what TemplateMonster marketplace has to offer in terms of responsive websites templates,
eCommerce templates, and WordPress themes, and also other assets for website
building, such as plugins, illustrations, fonts and much more. Make sure to follow the link in the description to explore TemplateMonster Marketplace yourself!
Well, thank you so much for watching! If you liked the video, leave us a like and
subscribe to our channel! You can also drop a line in the comments regarding
what else you would like to learn about! See ya!

7 thoughts on ๐Ÿ“ฑ๐Ÿ‘ 6 Things OVERLOOKED In Mobile-Friendly Website Design

  1. โฐ Timestamps for you guys
    :

    00:21 Challenges for the designer of mobile-friendly website layouts

    01:12 Use carousels to save space

    01:24 Navigation

    01:34 Search field

    01:45 CTA

    02:00 Font sizes

    02:25 Buttons and Fields

    02:47 Mobile-friendly design for online stores

  2. All the cool websites shown in the video as examples. Yeah, a couple of WordPress themes from TemplateMonster Marketplace also in there.
    ๐Ÿ˜ See them here!!

    00:17 – https://www.templatemonster.com/wordpress-themes/patrick-designer-portfolio-website-for-personal-promotion-wordpress-theme-86470.html

    00:23 – https://www.platform81.com/

    00:50 – https://www.thecollective.com/

    00:58 – https://www.templatemonster.com/wordpress-themes/81169.html

    01:08 – https://www.adidas.com/us

    01:11 – https://m.booking.com/

    01:15 – https://www.apple.com/

    01:18 – https://www.thecollective.com/

    01:24 – https://www.ign.com/

    01:25 – https://www.reachpartners.ch/en/

    01:33 – https://www.rumsans.dk/

    01:36 – https://www.nytimes.com/

    01:38 – https://www2.hm.com/en_ca/index.html

    01:46 – https://jellypepper.com/

    01:48 – https://evernote.com/

    01:50 – https://mogutable.com/

    01:52 – https://peaceprizelaureates.nobelpeacecenter.org/en/

    02:28 – http://helicopter-view.com/

    02:35 – http://jamesgillen.co.uk/

    02:44 – https://www.compressport.com/

    02:50 – https://www.apple.com/

    02:58 – https://www.abercrombie.com/shop/wd

    03:06 – https://www.keus-store.com/en/

    03:12 – https://nomos-glashuette.com/en/

Leave a Reply

Your email address will not be published. Required fields are marked *