Best Sources for Responsive Design Templates

HTML & CSS
1

Hello everyone and thanks for your help in advance. I am new to responsive web design and am searching for non-specific generic templates that can get me started designing and learning. My problem is there are many sites on the web, but I am first concerned about downloading anything from a trusted source and second, have no idea if these templates are really any good. Can someone point me to trusted resources that can get me started? I appreciate the help.

2

It depends what you want them forā€¦ Wordpress? Themeforest, as an example.

3

If you want a framework theme you can choose Genesis for Wordpress. Base theme and you do the rest of the design. Theme framework means its lightweight and not loaded with features that you will never use. This is paid.

5

I like something like this, particularly if you are interested in learning:-

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <meta name="description" content="Desc">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        
    </body>
</html>

Lightweight and responsive. :wink:

2 Likes
6

Thanks for the response. Yes, I am very interested in learning and understand the start, but need to know the next obvious steps.

7

For the finer details of the page, there is no definitive answer, like ā€œUse this templateā€. Because the possibilities in web design are so endless, there are too many variables to give such an answer.
A page template will depend on the type of layout you want, the type of layout should depend upon the content of the page.
So this first thing you need is content, then consider how that content would best be displayed. What works for one type of content may not be the best layout for another type of content. For example,if the content was a football league table, you would use a different layout type than you would for an article, and a different one for a range of products you have for sale, or a picture gallery. Or you may have mixed content. This is why content should come first in web design, it defines the options for appropriate layout.

8

Thanks again. Yes, I understand the content drives the layout, but I am just trying to get an idea on basics like, say a three column layout and some font control. So for example, on a wide screen, the three column would work fine, but what would you do on a mobile device? Stack the columns, hide the side columns?

9

The choice is yours, stacking is a common method. You can hide things altogether if it is surplus to requirements, though I generally would not do that with content important enough to have its own column, maybe just more decorative ā€œwhistles & bellsā€. What you can do is hide secondary content in roll-outs that may be opened on demand.
The column behaviour can easily be undone in a media query. The best ways to get the column layout are IMO ā€˜display tableā€™ and ā€˜flex-boxā€™. With flex-box you may not even need a query to adapt to different screens.

10

OK. First of all, thanks for your response. I am really trying to learn this. But could you give me an example of what you mean exactly?

11

This is a basic example of a column layout, going to one col with roll-outs using flex. I did this a while back, I could probably come up with another version that does not require queries.

12

This version shows how you can make a responsive page without any media queries using flex-box.

13

Perfect. This gets me started on the right track. Thanks so much for the help.

14

I would just recommend learning Bootstrap. Yes, you can make responsive design from scratch using media-query. Iā€™ve actually done both by custom responsive vs bootstrap responsive. At the end, Iā€™ve chosen to work w/ bootstrap. If you want to see awesome bootstrap templates then check out

15

A lot of people have a lot of problems with that because the type of layout they are trying to create doesnā€™t match to what that template is designed for. Most people are trying to use much simpler layouts.

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.