Web Design to Code for desktop and mobile

Design & UX
1

Hi all

Is there a good web tool out there that I can give my psd/sketch design elements to convert to code for both desktop & mobile with functionality?

I am transitioning from graphic design to web design and am currently trying to help a friend design a website.

I thought invision app would help but they don’t seem to give you a code after uploading your design assets.

thanks
M

2

If your friend’s website is not very complicated, and you are really interested in moving into web design, why don’t you use this as an opportunity to learn how to code. Start with the basics of html and css and then build from there. I’m not really sure if there is any app out there that can take a psd and automatically turn it into code. Maybe others have heard of or used such apps, though.

1 Like
3

Agree. And thats what I did a few months back - learnt some html, css with bootstrap and already designed a few web pages with code alone.
But as the pages are increasing in number its getting hard for a novice like me. So thought there might be something out there.
Also am curious as to what process freelance web designers use to get through this.

4

I can’t speak for freelance web designers, but I code everything if it is just a static website. But to save effort, any part of the page which is repeated for all the pages, is put in its own file (such as header.php) and I insert each part with php includes.

For example, I might have header.php, navigation.php and footer.php. Then in each of my pages (which I save with the .php extension) I have the following:

<?php include_once('header.php'); ?>
<?php include_once('navigation.php'); ?>

// Then the page html code goes here

<?php include_once('footer.php'); ?>

Please note: this is just a very simple example of what can be done to save on the coding side of things. This way, you don’t have to retype the header, navigation menu and footer over and over again, and you don’t have to edit every single page if you need to make a change to the header, for instance.

1 Like
5

thanks will try this out!

6

Once you have your master css set up, that should apply to any number of pages, unless they all have drastically different layouts/designs.

I used to do it that way, but now I do it the other way around.
I have a generic html template for all pages, then the unique page content is an insert into that.
For Example

<!DOCTYPE html>
<html lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name=viewport content="width=device-width, initial-scale=1">
    <?php if(!$follow) : ?>
        <meta name="robots" content="nofollow, noarchive, noindex">
    <?php endif ?>
        <title><?php echo $title; ?></title>
    <meta name="description" content="<?php echo $pdesc; ?>">
    <link rel="canonical" href="http://www.example.com<?php echo $canon; ?>">
    </head>
    <body>
    <?php include $_SERVER["DOCUMENT_ROOT"] . "/incl/pgels/menu.php"; // I have the menu as an include ?>      
        <main>
            <article>
                <header class="ahead">
            <p class="phead">
            <a href="/" title="Homepage">
                Site Title or Co Logo
            </a>
            </p>
                    <h1><?php echo $h1; ?></h1>
                </header>
        <div id="pbody">
            <?php include $pagecont ; // This is the actual content of the page ?>
            <footer>
            <p class="copy">&copy; <?php echo $year ; ?> www.example.com</p>
            </footer>
                </div>
            </article>
        </main>
    <script>
        //W/E Scripts
    </script>
    </body>
</html>

There is a main php script that does any processing, reads databases etc, defines the variables seen in the template, then includes the template, which in turn includes the page content.
Again there may be further includes in the page content for reoccurring elements.

7

I do similar although i add in a variable before calling the header include so i can include things in the header for specific pages.

<?php $addcode = '//whatever script or style you want here';?> <?php include_once('header.php'); //output the $addcode variable into the head after everything else?> <?php include_once('navigation.php'); ?>

// Then the page html code goes here

<?php include_once('footer.php'); ?>`

That way i can override the main CSS or add in code for a map or anything else that needs to be in the <head> section. You can either do this on a page by page basis or i have it built into my cms and just have the $addcode generated from the record being called.

hth

8

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